29. Mai 2023

So kann man die WordPress-Gallery für eine Logoübersicht nutzen

Die WordPress-Gallery kann nicht nur für Bildergalerien, sondern auch für Logos genutzt werden. Das Problem hierbei ist, dass die Logos oft alle unterschiedlich groß sind und ein unterschiedliches Seitenverhältnis haben.

Idealerweise werden die Logos also alle in einem gleich großen Rechteck oder Quadrat positioniert und innerhalb dieser Fläche positioniert.

Mit folgendem Code kannst du die Gallery entsprechend anpassen.

.wp-block-gallery.is-style-logos figure{
    background: #fff;
    background-size:contain;
    background-position: center;
    background-repeat: no-repeat;
    border:10px solid #fff;
}

.wp-block-gallery.has-nested-images figure.wp-block-image{ 
    flex-grow: 0; 
 }
Code-Sprache: CSS (css)

$('.wp-block-gallery.is-style-logos figure').each(function() {
    $(this).css('background-image', 'url('+$(this).find('img').attr('src')+')');
    if($(this).find('a').length > 0){$(this).html('<a href="'+$(this).find('a').attr('href')+'" target="_blank"></a>');}else{$(this).html('');}  
    $(this).height($(this).width()*0.6);
});Code-Sprache: JavaScript (javascript)

register_block_style(
	'core/gallery',
    array(
        'name'  => 'logos',
        'label' => 'Logos',
	)
);Code-Sprache: PHP (php)