All images get the same width but are displayed with their original height and width ratio
Display a perfect grid where each image has exactly the same size. Images get cropped/stretched if they don’t fit
Display a grid where most images get the same size, only very wide images get twice the width and very high images get twice the height. To qualify for „very wide“ or „very high“ the image must have a aspect ratio of 16:9 or higher
/**
* Enfold Masonry Caption Fix - NUR für Perfect Grid
* Schiebt die Caption unter das Bild, ohne es zu verdecken.
*/
function enfold_masonry_perfect_grid_caption_fix() {
?>
<style>
/* ========================================
PERFECT GRID CSS
======================================== */
/* Erlaubt der Caption, über den Container hinauszuragen */
#top .av-masonry.av-fixed-size.av-masonry-gallery .av-inner-masonry,
#top .av-masonry-gallery.av-masonry-gallery-fixed figure.av-inner-masonry {
overflow: visible !important;
}
/* Positioniert die Caption direkt unter das Bild-Quadrat */
#top .av-masonry.av-fixed-size.av-masonry-gallery .av-inner-masonry-content,
#top .av-masonry-gallery.av-masonry-gallery-fixed figcaption.av-inner-masonry-content {
position: relative !important;
top: 100%;
background: #ffffff; /* Hier ggf. deine Wunschfarbe für den Hintergrund */
}
/* Korrektur für Tablets */
@media only screen and (min-width: 767px) and (max-width: 989px) {
.responsive .av-masonry-gallery .av-masonry-entry .av-masonry-entry-title + .av-masonry-entry-content {
display: block !important;
}
}
</style>
<script>
(function($) {
'use strict';
function fixPerfectGrid() {
// Nur für Masonry Galerien mit festem Raster (Perfect Grid)
$('.av-masonry-gallery.av-masonry-gallery-fixed, .av-masonry.av-fixed-size.av-masonry-gallery').each(function() {
var $gallery = $(this);
var columnCount = 1;
// Spaltenanzahl ermitteln
if ($gallery.hasClass('av-masonry-col-2')) columnCount = 2;
else if ($gallery.hasClass('av-masonry-col-3')) columnCount = 3;
else if ($gallery.hasClass('av-masonry-col-4')) columnCount = 4;
else if ($gallery.hasClass('av-masonry-col-5')) columnCount = 5;
else if ($gallery.hasClass('av-masonry-col-6')) columnCount = 6;
if ($gallery.hasClass('av-masonry-col-flexible')) {
var $items = $gallery.find('.av-masonry-item-with-image:visible');
if ($items.length >= 2) {
var firstTop = $items.eq(0).offset().top;
var itemsInFirstRow = 1;
for (var i = 1; i < Math.min($items.length, 10); i++) {
if (Math.abs($items.eq(i).offset().top - firstTop) < 10) {
itemsInFirstRow++;
} else { break; }
}
columnCount = itemsInFirstRow;
}
}
// Maximalhöhe der Captions finden, damit die Zeilen gleichmäßig bleiben
var maxCaptionHeight = 0;
$gallery.find('.av-masonry-item-with-image').each(function() {
var $caption = $(this).find('figcaption.av-inner-masonry-content, .av-inner-masonry-content');
if ($caption.length && $caption.is(':visible')) {
maxCaptionHeight = Math.max(maxCaptionHeight, $caption.outerHeight(true));
}
});
// Abstand unten einfügen, damit das Masonry-Layout Platz für die Caption lässt
if (maxCaptionHeight > 0) {
$gallery.find('a.av-masonry-entry, .av-masonry-item-with-image').css('margin-bottom', maxCaptionHeight + 'px');
}
});
// Layout neu berechnen
$('.av-masonry-gallery.av-masonry-gallery-fixed, .av-masonry.av-fixed-size.av-masonry-gallery').isotope('layout');
}
// ========================================
// INITIAL LOAD - Nur auf Bilder warten, nicht auf die ganze Seite
// ========================================
(function() {
var $gallery = $('.av-masonry-gallery');
if ($gallery.length && typeof $.fn.imagesLoaded === 'function') {
// Wartet NUR auf die Bilder in der Galerie
$gallery.imagesLoaded(function() {
setTimeout(fixPerfectGrid, 200);
});
} else {
// Fallback für den Notfall
setTimeout(fixPerfectGrid, 600);
}
})();
// Nach Enfold Events
$(document).on('av-masonry-complete', function() {
setTimeout(fixPerfectGrid, 250);
});
// Bei Größenänderung
$(window).on('debouncedresize', function() {
// Reset Margin
$('.av-masonry-gallery.av-masonry-gallery-fixed .av-masonry-item-with-image, .av-masonry.av-fixed-size.av-masonry-gallery .av-masonry-item-with-image').css('margin-bottom', '');
fixPerfectGrid();
});
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'enfold_masonry_perfect_grid_caption_fix', 999);