adjusts gallery height

README.md

@@ -1,16 +1,14 @@
-# ImageGallery media for Omeka S
+# ImageGallery for Omeka S
 
-[ImageGallery] is a module for [Omeka S] that optionally enables [wheelzoom],
+[ImageGallery] is a module for [Omeka S] that displays image media in an item.
-a script for zooming IMG elements with the mousewheel/trackpad and [zoom],
-a script to enlarge images on touch, click, or mouseover.
 
 ## Install
 
 ```
 cd ./modules
-https://git.hangar.org/arcHIVE-tech/ImageGallery/archive/main.zip
+https://git.hangar.org/arcHIVE-tech/ImageGallery-omeka-module
 unzip main.zip
-mv imageviewer-omeka-module/ ImageGallery
+mv ImageGallery-omeka-module/ ImageGallery
 rm main.zip
 ```
 
@@ -18,8 +16,6 @@ rm main.zip
 The module is released under the [MIT] License.
 
 [arc-hive]: https://arc-hive.zone/
-[wheelzoom]: https://github.com/jackmoore/wheelzoom
-[zoom]: https://github.com/jackmoore/zoom
 [Omeka S]: https://omeka.org/s
-[ImageGallery]: https://git.hangar.org/arcHIVE-tech/ImageGallery
+[ImageGallery]: https://git.hangar.org/arcHIVE-tech/ImageGallery-omeka-module
 [MIT]: http://opensource.org/licenses/MIT

asset/css/gallery.css

@@ -8,7 +8,8 @@
 }
 
 .archive-gallery img {
-  max-width: 100%;
+  /*max-width: 100%;*/
+  width: 100%;
   vertical-align: top;
 }
 
@@ -16,7 +17,6 @@
   display: flex;
   /*margin: 10px auto;*/
   margin: 0 auto;
-  max-width: 600px;
   position: relative;
   /*padding-top: 66.6666666667%;*/
 }
@@ -35,7 +35,7 @@
   transition: opacity 0.3s ease-in-out;
 }
 .archive-gallery .gallery__thumb {
-  padding-top: 6px;
+  padding-top: 0px;
   margin: 6px;
   display: block;
 }

src/Site/BlockLayout/ImageGallery.php

@@ -75,15 +75,20 @@ class ImageGallery extends AbstractBlockLayout
 
     $media = $attachments[0]->item()->media()[0];
     $item = $attachments[0]->item();
+    $item_url = null;
+    if ($block->dataValue('renderSourceLink')) {
+      $item_url = $attachments[0]->item()->url();
+    }
+    $max_width = $block->dataValue('width');
 		return $view->partial('common/block-layout/imageGallery', [
-			'title' => $block->dataValue('title'),
-      'item' => $item,
-      'images' => $item->media(),
-      'item_url' => $attachments[0]->item()->url(),
-      'renderSourceLink' => $block->dataValue('renderSourceLink'),
-			'width' => $block->dataValue('width'),
-			'image' => $media->primaryMedia()->thumbnailUrl('large'),
       'gallery_id' => 'ig-' . ++$id,
+			'title' => $block->dataValue('title'),
+      //'item' => $item,
+      'images' => $item->media(),
+      'item_url' => $item_url,
+      //'renderSourceLink' => $block->dataValue('renderSourceLink'),
+			'width' => $block->dataValue('width'),
+      'max_width' => $max_width,
 		]);
 	}
 }

view/common/block-layout/imageGallery.phtml

@@ -7,14 +7,15 @@ $this->headLink()->appendStylesheet($this->assetUrl('css/gallery.css', 'ImageGal
 
 
 <div class="archive-gallery">
-	<?php if ($renderSourceLink) { ?>
+	<?php if ($item_url) { ?>
 		<div class="source-link">
 			<a href="<?= $item_url ?>">Source</a>
 		</div>
 	<?php } ?>
 
 	<section id="<?= $gallery_id ?>"
-					 class="gallery" style="padding-top: 330px;">
+					 class="gallery"
+					 style="padding-top: 400px; max-width: <?= $max_width ?>%;">
 
 	<?php foreach ($images as $image) { ?>
 		<?php $image_id = $image_id +1;
@@ -26,13 +27,13 @@ $this->headLink()->appendStylesheet($this->assetUrl('css/gallery.css', 'ImageGal
 						 checked name="gallery"
 						 class="gallery__selector"/>
 	    <img class="gallery__img"
-					 style="height: 330px;"
+					 style=""
-					 src="<?= $image->primaryMedia()->thumbnailUrl('large') ?>"
+					 src="<?= $image->primaryMedia()->originalUrl() ?>"
-					 alt=""
+					 alt="<?= $image->primaryMedia()->source() ?>"
 			/>
 	    <label for="<?= $img_id ?>" class="gallery__thumb">
 				<img src="<?= $image->primaryMedia()->thumbnailUrl('large') ?>"
-						 alt=""
+						 alt="Thumbnail: <?= $image->primaryMedia()->source() ?>"
 				/>
 			</label>
 	  </div>
@@ -41,3 +42,17 @@ $this->headLink()->appendStylesheet($this->assetUrl('css/gallery.css', 'ImageGal
 
 	</section>
 </div>
+
+
+<script>
+jQuery(document).ready(function() {
+	var gallery_image_height=0;
+	$( ".gallery__img" ).each(function( index ) {
+		if ($(this).height() > gallery_image_height) {
+			gallery_image_height = $(this).height();
+		}
+	});
+	$('section.gallery').css('padding-top', gallery_image_height)
+
+});
+</script>