Snyggt galleri i WordPress med Masonry

Vill du ha ett läckert och dynamiskt galleri i dina poster på din WordPress-sajt? Tycker du att det är lite tråkigt med WordPress standardgalleri med fyrkantiga bilder? Då kommer ett tips på en enkel lösning här med Masonry.

Masonry i WordPress

I WordPress finns ett javascript-bibliotek vid namn Masonry. Detta kan användas för att få innehåll att flyta runt och anpassa sig till annat innehåll på sidan på olika sätt (läs mer om Masonry).

För att aktivera Masonry i WordPress behöver du lägga till följande rad i den funktion som inkluderar skript och stilar i filen functions.php i det aktiva temat.

wp_enquque_script( 'jquery-masonry' );

Nu behöver du aktivera Masonry för gallerier. Detta gör du genom att lägga till följande kod i din javascript-fil. 

jQuery(document).ready( function($) {
	var $container = $('.gallery');
	$container.imagesLoaded( function(){
		$container.masonry({
			itemSelector : '.gallery-item',
			isAnimated: true,
			animationOptions: {
				duration: 250,
				easing: 'linear',
				queue: false
			},
			isFitWidth: true
		});
	});
});

Finns det ingen javascript-fil i temat som används på din WordPress-sajt får du skapa en och sen anropa den i den i samma funktion som ovan, som inkluderar skript och stilar i functions.php, med följande kod.

wp_enquque_script( 'mitt-script', get_stylesheet_directory_uri() . 'js/mitt-script.js', array('jquery') );

Du kan även skriva en funktion i din functions.php-fil och använda en hook för att få den att ladda på rätt plats i ditt tema. En hook som kan vara lämplig för detta ändamål kan till exempel vara ’wp_print_footer_scripts’.

function ladda_mitt_script() {
	?>
	<script>

		... jQuery-koden ...

	</script>
	<?php
}
add_action( 'använd_rätt_hook', 'ladda_mitt_script', 90 );

Nästa steg är att ta bort de kvadratiska tumnaglarna (thumbnails). Gå in i mediainställningar och välj att inte beskära bilder för tumnaglar, så att du kan få både stående och liggande bilder. Gör en beräkning på innehållets bredd i temat och sätt storleken för tumnaglarna så de passar i bredd. Gör höjden på tumnageln dubbelt, eller tre gånger, så hög som bredden för att få snygga stående bilder. 

Sista stegen är nu att generera nya bildstorlekar. Ett bra plugin för detta är Simple Image Sizes. Beroende på vilket tema du använder på din WordPress-sajt, så kan du även behöva göra mindre justeringar i temats CSS-fil.

Nu ska galleriet se lite roligare ut.

Lycka till!

Publicerat av Jon Täng

Arbetar som webbutvecklarereklam- och webbyrån Bozzanova AB i Vänersborg. Dagarna fylls med WordPress, PHP, jQuery, HTML5 och CSS3.

Lämna en komentar

E-postadressen publiceras inte. Obligatoriska fält är märkta *