My books's image partial (that creates the image form fields)

Layout 1

<div class="fieldRow fieldRow-inline fieldRow-file fieldRow-image">
	<label>{f:translate(id:'shared.image')}</label>
	
	<f:if condition="{book.image}">
		<f:then>
   			<div class="currentImage">
				<f:if condition="{book.image.originalResource}">
					<img class="recordImage recordImage-book" width="98" src="{f:uri.resource(resource: book.image.originalResource)}" alt="{f:translate(id:'book.image.altPrefix')} {book.title}" /> 
				</f:if>
				
	   			<div class="recordInfo">
					<p class="recordTitle">{book.image.title}</p>
					<p class="recordControls">
						<a class="formButton recordActionLink jsBindFormButtons popupOpener" data-gb-popupname="image" data-gb-button_type="bookImageEdit" href="#">{f:translate(id:'shared.button.edit')}</a> 
						<a class="formButton recordActionLink jsBindFormButtons imageDeleter" data-gb-field_prefix="book[image]" data-gb-rename_target="popup-image" data-gb-button_type="bookImageDelete" href="#">{f:translate(id:'shared.button.delete')}</a>
					</p>
	   			</div>
   			</div>
			
   			<p class="currentImageRemoved hidden">Image will be deleted when you save the book.</p>
			
			<div class="popup popup-image hidden" title="{f:translate(id:'popup.title.imageEdit')}" data-gb-popup_parent="book">
				<div class="popupContentContainer paddedContainer">
					<div class="fieldContainer">
						<div class="fieldRow fieldRow-normal fieldRow-required">
							<label for="imageTitle">{f:translate(id:'shared.title')}</label>
							<f:form.textfield additionalAttributes="{data-gb-max: settings.image.fields.title.max, data-gb-min: settings.image.fields.title.min}" class="imageField jsBindTextfields jsBindCharCounters formField" maxlength="{settings.image.fields.title.max}" property="image.title" id="imageTitle" />
						</div><!-- /fieldRow -->
					</div><!-- /fieldContainer -->
					
					<div class="tabs tabs-popup jsSetupTabs">
						<ul class="tabButtons">
							<li class="first" title="{f:translate(id:'shared.tab.main')}">
								<span class="tabShadow">&nbsp;</span>
								<a href="#tab-image-1">{f:translate(id:'shared.tab.main')}<span class="tabCap">&nbsp;</span></a>
							</li>
							<li class="last" title="{f:translate(id:'shared.tab.media')}">
								<span class="tabShadow">&nbsp;</span>
								<a href="#tab-image-2">{f:translate(id:'shared.tab.media')}<span class="tabCap">&nbsp;</span></a>
							</li>
						</ul><!-- /tabButtons -->
						
						<section id="tab-image-1" class="tabPane">
							<div class="fieldContainer">
								<div class="fieldRow fieldRow-normal">
									<label for="imageTitleshort">{f:translate(id:'shared.titleshort')}</label>
									<f:form.textfield additionalAttributes="{data-gb-max: settings.image.fields.titleshort.max, data-gb-min: settings.image.fields.titleshort.min}" maxlength="settings.image.fields.titleshort.max" class="imageField jsBindTextfields jsBindCharCounters formField" property="image.titleshort" id="imageTitleshort" />
								</div><!-- /fieldRow -->

								<div class="fieldRow fieldRow-textarea">
									<label for="imageCaption">{f:translate(id:'image.caption')}</label>
									<f:form.textarea additionalAttributes="{data-gb-max: settings.image.fields.caption.max, data-gb-min: settings.image.fields.caption.min, maxlength: settings.image.fields.caption.max}" class="imageField jsBindTextareas jsBindCharCounters formField compact" cols="30" rows="3" property="image.caption" id="imageCaption" />
								</div><!-- /fieldRow -->
							</div><!-- /fieldContainer -->
						</section><!-- /tab-1 -->


						<section id="tab-image-2" class="tabPane" style="display: none;">
							<div class="fieldContainer">
								<div class="fieldRow fieldRow-file">
									<label for="imageOriginalResource">{f:translate(id:'image.originalResource')}</label>
									<f:form.upload class="imageField" property="image.originalResource" id="imageOriginalResource" />
								</div><!-- /fieldRow -->
							</div><!-- /fieldContainer -->
								
							<f:if condition="{record.image.originalResource}">
								<div class="fieldContainer">
									<fieldset>
										<legend><span>{f:translate(id:'shared.legend.fileInfo')}</span></legend>
										
										<div class="columns">
											<div class="column column-1">
												<div class="fieldRow fieldRow-normal disabled">
													<label for="imageName">{f:translate(id:'shared.fileName')}</label>
													<f:form.textfield class="imageField" readonly="readonly" value="{record.image.name}" id="imageName" name="image[name]" />
												</div><!-- /fieldRow -->
												
												<div class="fieldRow fieldRow-normal disabled">
													<label for="imageType">{f:translate(id:'shared.fileType')}</label>
													<f:form.textfield class="imageField" readonly="readonly" value="{record.image.ext}" id="imageType" name="image[type]" />
												</div><!-- /fieldRow -->
												
												<div class="fieldRow fieldRow-normal disabled">
													<label for="imageWidth">{f:translate(id:'shared.fileWidth')}</label>
													<f:form.textfield class="imageField" value="{record.image.width} pixels" readonly="readonly" id="imageWidth" name="image[width]" />
												</div><!-- /fieldRow -->
											</div><!-- /column-1 -->
											
											<div class="column column-2">
												<div class="fieldRow fieldRow-normal disabled">
													<label for="imageSize">{f:translate(id:'shared.fileSize')}</label>
													<f:form.textfield class="imageField" value="{gb:file.size(fileSize: record.image.size, sizeLabels: settings.file.sizeLabels)}" readonly="readonly" id="imageSize" name="image[size]" />
												</div><!-- /fieldRow -->
												
												<div class="fieldRow fieldRow-normal disabled">
													<label for="imageOrientation">{f:translate(id:'shared.fileOrientation')}</label>
													<f:form.textfield class="imageField" value="{f:translate(id:'shared.fileOrientation.{record.image.orientation}')}" readonly="readonly" id="imageOrientation" name="image[orientation]" />
												</div><!-- /fieldRow -->
												
												<div class="fieldRow fieldRow-normal disabled">
													<label for="imageHeight">{f:translate(id:'shared.fileHeight')}</label>
													<f:form.textfield class="imageField" value="{record.image.height} pixels" readonly="readonly" id="imageHeight" name="image[height]" />
												</div><!-- /fieldRow -->
											</div><!-- /column-2 -->
											
											<div class="clearer"></div>
										</div><!-- /columns -->
									</fieldset>
								</div><!-- /fieldContainer -->
							</f:if>
						</section><!-- /tab-2 -->
					</div><!-- /tabs -->
				</div>
			</div>
		</f:then>
		
		<f:else>
   			<div class="recordInfo">
				<p class="recordControls">
					<a class="formButton recordActionLink jsBindFormButtons popupOpener imageAdder" data-gb-popupname="image" data-gb-button_type="bookImageAdd" href="#">{f:translate(id:'shared.button.new')}</a> 
				</p>
   			</div>
			
			<div class="popup popup-image hidden jsSetupPopups renameFields" data-gb-field_prefix="book[image]" title="{f:translate(id:'popup.title.imageNew')}" data-gb-popup_parent="book">
				<div class="popupContentContainer paddedContainer">
					<f:render partial="Image/Field/Title" arguments="{record: book}" />
					
					<div class="tabs tabs-popup jsSetupTabs">
						<f:render partial="Image/Tab/Buttons" />
						
						<f:render partial="Image/Tab/Tab1" arguments="{record: book}" />
						<f:render partial="Image/Tab/Tab2" arguments="{record: book}" />
					</div><!-- /tabs -->
				</div>
			</div>
		</f:else>
	</f:if>
</div><!-- /fieldRow -->