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:
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.
/* 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:
Last edited by Sinulated (2025-05-04 07:32:51)
Offline