•  » Extensions
  •  » [Plugin] gdThumb - Masonry style thumbs in your gallery - 1.0.20

#211 2025-04-27 22:41:22

Sinulated
Member
2025-04-27
1

Re: [Plugin] gdThumb - Masonry style thumbs in your gallery - 1.0.20

Hi there, I've been looking for a plugin like this for ages!

I know the whole point is to achieve the masonry effect, but all i actually want it for is portrait mode album thumbnails, and this is able to achieve that perfectly! The only thing is, i want to also be able to specify a maximum width. I have almost exclusively portrait mode images, but a few albums have landscape images, and i'd personally prefer to have a uniform grid over a masonry style.

Another feature that would be awesome would be to have album thumbnails different sizes to image thumbnails, using the GThumb+ plugin i had small thumbnails for images and then big square images for albums. Even just being able to disable the scaling for the image thumbnails would suffice, because then i could fall back to GThumb+ for the image thumbs, and use GDThumb for my album categories.

Once my grok limit resets, i'm going to look into making these tweaks myself, and if i get something workable, i'll share my tweaks in case you want to incorporate them.

Thanks a lot for this plugin!!

Edit:
To anyone from the future who also wants to ditch the masonry effect, grok figured it out for me, this sets all the images to a fixed portrait size:


Code:

var GDThumb = {

  max_height: 429, // Default height for thumbnails
  margin: 10,
  min_width: 245,  // Minimum and fixed width for thumbnails
  min_height: 429, // Minimum and fixed height for thumbnails
  method: 'crop',  // Always crop to fit fixed dimensions
  t: new Array,
  do_merge: false,

  // Initialize plugin logic, perform necessary steps
  setup: function(method, max_height, margin, do_merge) {
    jQuery('ul#thumbnails').addClass("thumbnails");

    GDThumb.max_height = max_height || GDThumb.min_height;
    GDThumb.margin = margin;
    GDThumb.method = 'crop'; // Force crop method for uniform grid
    GDThumb.do_merge = do_merge;

    $(window).bind("RVTS_loaded", function() { GDThumb.init(); });
    GDThumb.init();
  },

  init: function() {
    var mainlists = jQuery('ul.thumbnails');
    if (typeof mainlists !== 'undefined') {
      if (GDThumb.do_merge) { GDThumb.merge(); }

      GDThumb.build();
      jQuery(window).bind('RVTS_loaded', GDThumb.build);

      mainlists.resize(GDThumb.process);
      jQuery("ul.thumbnails .thumbLegend.overlay").click(function() {
        window.location.href = $(this).parent().find('a').attr('href');
      });
      jQuery("ul.thumbnails .thumbLegend.overlay-ex").click(function() {
        window.location.href = $(this).parent().find('a').attr('href');
      });
    }
  },

  // Merge categories and picture lists
  merge: function() {
    var mainlists = $('.content ul.thumbnails');
    if (mainlists.length < 2) {
      // Only one list of elements
    } else {
      $(".thumbnailCategories li").addClass("album");
      $(".thumbnailCategories").append($(".content ul#thumbnails").html());
      $("ul#thumbnails").remove();
      $("div.loader:eq(1)").remove();
    }
  },

  // Build thumb metadata
  build: function() {
    GDThumb.t = new Array;
    $('ul.thumbnails img.thumbnail').each(function(index) {
      var width = parseInt(jQuery(this).attr('width'));
      var height = parseInt(jQuery(this).attr('height'));
      var th = {
        index: index,
        width: GDThumb.min_width,  // Fixed width
        height: GDThumb.min_height, // Fixed height
        real_width: width,
        real_height: height,
        crop: GDThumb.min_width // Crop to fixed width
      };
      GDThumb.t.push(th);
    });

    jQuery.resize.throttleWindow = false;
    jQuery.resize.delay = 50;
    GDThumb.process();
  },

  // Adjust thumb attributes to match plugin settings
  process: function() {
    var main_width = jQuery('ul.thumbnails').width();
    var thumbs_per_row = Math.floor(main_width / (GDThumb.min_width + GDThumb.margin));
    thumbs_per_row = Math.max(thumbs_per_row, 1); // Ensure at least one thumbnail per row

    $('ul.thumbnails img.thumbnail').each(function(index) {
      var thumb = jQuery(this);
      var th = GDThumb.t[index];
      GDThumb.resize(thumb, th.real_width, th.real_height, GDThumb.min_width, GDThumb.min_height, false);
    });

    // Ensure the process is re-run if the container width changes
    if (main_width != jQuery('ul.thumbnails').width()) {
      GDThumb.process();
    }
  },

  // Resize and crop thumbnail to fixed dimensions
  resize: function(thumb, width, height, new_width, new_height, is_big) {
    new_width = Math.max(new_width, GDThumb.min_width);
    new_height = Math.max(new_height, GDThumb.min_height);

    var use_crop = true;
    var real_width, real_height, width_crop, height_crop;

    // Calculate scaled dimensions while maintaining aspect ratio
    var aspect_ratio = width / height;
    var target_ratio = new_width / new_height;

    if (aspect_ratio > target_ratio) {
      // Image is wider than target, scale by height
      real_height = new_height;
      real_width = Math.round(width * new_height / height);
      width_crop = Math.round((real_width - new_width) / 2);
      height_crop = 0;
    } else {
      // Image is taller than target, scale by width
      real_width = new_width;
      real_height = Math.round(height * new_width / width);
      height_crop = Math.round((real_height - new_height) / 2);
      width_crop = 0;
    }

    // Apply styles to thumbnail
    thumb.css({
      height: real_height + 'px',
      width: real_width + 'px'
    });

    // Apply cropping by setting parent container size and clipping
    thumb.parents('li').css({
      height: new_height + 'px',
      width: new_width + 'px',
      overflow: 'hidden' // Ensure overflow is hidden for cropping
    });

    thumb.parent('a').css({
      clip: 'rect(' + height_crop + 'px, ' + (new_width + width_crop) + 'px, ' + (new_height + height_crop) + 'px, ' + width_crop + 'px)',
      top: -height_crop + 'px',
      left: -width_crop + 'px',
      position: 'relative'
    });
  }
}

And this fixes the alignment, so it's centered within the parent element, rather than all being shoved to the left.

Code:

/* Style for the thumbnails list */
ul.thumbnails {
    display: flex;
    justify-content: center; /* Center items horizontally */
    flex-wrap: wrap; /* Allow items to wrap to the next row */
    list-style: none; /* Remove default list bullets */
    padding: 0; /* Remove default padding */
    margin: 0; /* Remove default margin */
    box-sizing: border-box; /* Ensure padding/margins don't affect width */
    width: 100%; /* Ensure ul takes full container width */
  }
  
  /* Style for each thumbnail item */
  ul.thumbnails li {
    margin: 10px; /* Match GDThumb.margin from JavaScript */
    width: 245px; /* Fixed width from gdthumb.js */
    height: 429px; /* Fixed height from gdthumb.js */
    overflow: hidden; /* Ensure cropping works */
  }
  
  /* Ensure images and links inside li respect cropping */
  ul.thumbnails li a {
    display: block;
    position: relative;
  }
  
  ul.thumbnails li img.thumbnail {
    display: block;
  }

and these are my settings just in case:
https://i.imgur.com/gxRQ5dU.png

Last edited by Sinulated (2025-05-04 07:32:51)

Offline

 
  •  » Extensions
  •  » [Plugin] gdThumb - Masonry style thumbs in your gallery - 1.0.20

Board footer

Powered by FluxBB

github twitter newsletter Donate Piwigo.org © 2002-2025 · Contact