<div
	class="ugallery ugallery_publish <?php if(!empty($in_editor)) { ?>ugallery-in-editor<?php } ?> <?php if($even_padding[0] === 'true') { ?>even_padding<?php } ?>"
	data-even-padding="<?php echo $even_padding[0] ?>"
	data-thumb-padding="<?php echo $thumbPadding ?>",
	data-thumb-proportions="<?php echo $thumbProportions ?>"
>
<?php if ($labelFilters['length'] || !empty($in_editor)){ ?>
<div class="ugallery_labels <?php if($in_editor) { ?>ugallery_labels-enabled-<?php echo $labelFilters['length'] ?><?php } ?>">
	<?php for($i=0; $i<$labels_length; $i++) { ?>
		<a href="#" class="ugallery_label_filter <?php echo $i == 0 ? 'filter_selected' : '' ?>" rel="label_<?php echo $labels[$i]['id'] ?>"><?php echo $labels[$i]['text'] ?></a>
	<?php } ?>
	</div>
<?php } ?>
<?php if($imagesLength){ ?>
	<div class="ugallery_items ugallery_grid" rel="<?php echo $element_id ?>">
	<?php for($i=0; $i<$imagesLength; $i++) { ?>
	<div class="ugallery_item ugallery_item_<?php echo !empty($images[$i]['urlType']) && $images[$i]['urlType'] == 'image' ? 'image' : $images[$i]['urlType'] ?> <?php if($captionType === 'over') { ?>ugallery_caption_on_hover_<?php echo $showCaptionOnHover['length'] ?><?php } ?>" style="position:relative; width:<?php echo $thumbWidth ?>px;" rel="<?php echo $images[$i]['id'] ?>" data-groups='[<?php echo $image_labels[$images[$i]['id']] ?>]'>
		<?php $images[$i]['urlType'] = !empty($images[$i]['urlType']) ? $images[$i]['urlType'] : false; ?>
		  <?php if ($images[$i]['urlType'] !== 'unlink') { ?>
			<a class="ugallery_link<?php echo !empty($images[$i]['urlType']) && $images[$i]['urlType'] == 'image' ? ' ugallery_lightbox_link' : $images[$i]['urlType'] ?>" href="<?php echo $images[$i]['url'] ?>" target="<?php echo $images[$i]['linkTarget'] ?>" title="">
			<?php } ?>
				<img src="<?php echo $images[$i]['src'] ?>" alt="" class="ugallery-image" style="<?php echo !empty($images[$i]['loading']) && $images[$i]['loading'] ? 'display:none;' : '' ?> margin-left:<?php echo $images[$i]['margin']['left'] ?>px;  margin-top:<?php echo $images[$i]['margin']['top'] ?>px;width:<?php echo $thumbWidth ?>px; height:<?php echo $thumbHeight ?>px">
				<?php if(!empty($in_editor)) { ?>
				<i class="remove-image"></i>
				<?php } ?>
			<?php if($captionType != 'none' || !empty($in_editor)) { ?>
			<div class="ugallery-thumb-title <?php if($captionType === 'over') { ?>ugallery-caption-on-hover-<?php echo $showCaptionOnHover['length'] ?><?php } ?> ugallery-caption-<?php echo $captionType ?><?php echo $captionUseBackground ? ' ugallery-padded-caption' : '' ?>"><?php echo $images[$i]['title'] ?></div>
			<?php } ?>
			<?php if($linkTo == 'image'){ ?>
			<div class="ugallery_lb_text" rel="<?php echo $images[$i]['id'] ?>"><?php if (!$editing && $images[$i]['caption'] != 'Image description') { ?><?php echo $images[$i]['caption'] ?><?php } ?></div>
			<?php } ?>

			<?php if ($images[$i]['urlType'] !== 'unlink') { ?>
			</a>
			<?php } ?>
		</div><?php } ?>
	</div>
<?php } else { ?>
	<?php if(! $editing) { ?>
		<?php echo $l10n['no_images'] ?>
	<?php } else { ?>
		<div class="ugallery-starting-wrapper upfront-ui">
				<div class="uimage-centered">
					<span class="upfront-image-resizethiselement"><?php echo $l10n['add_img'] ?></span>
					<div class=""><a class="upfront-image-select button" href="#" title="<?php echo $l10n['add_images'] ?>">+</a></div>
				</div>
		</div>
	<?php } ?>
<?php } ?>
</div>

<style>
	#<?php echo $element_id ?> .ugallery-thumb-title {
		background: <?php echo  $captionBackground ?>;
		<?php if($fitThumbCaptions[0] === 'true') { ?>
			overflow: hidden;
			height: <?php echo $thumbCaptionsHeight ?>px;
		<?php } ?>
	}

</style>
