Ceci est une publication de Josh Pollock.
L’affichage des publications sous forme de grille, à la manière de Pinterest, est depuis un certain temps un design populaire pour les pages d’index des blogs WordPress. Il est populaire uniquement parce qu’il imite l’aspect du site de réseau social populaire, mais aussi parce qu’il utilise au mieux l’espace sur l’écran. Sur l’index d’un blog WordPress, elle permet à chaque publication d’être affichée à la taille qu’elle doit naturellement avoir, sans laisser d’espace supplémentaire.
Dans ce tutoriel, je vous montrerai comment utiliser la populaire Bibliothèque JavaScript Masonry pour créer des mises en page en grille en cascade pour l’index de votre blog, ainsi que pour les pages d’archives de votre thème. J’aborderai quelques problèmes que vous devez prendre en compte pour l’optimisation mobile et comment les résoudre.
Note : Il s’agit d’un tutoriel de niveau avancé pour ceux qui se sentent à l’aise pour modifier des thèmes WordPress et qui ont des connaissances suffisantes en HTML/CSS.
Étape par étape : Ajouter les bibliothèques nécessaires à votre thème
Mise à jour: WordPress 3.9 inclut désormais la dernière version de Masonry.
Tout d’abord, vous devez charger Masonry dans votre thème, en utilisant ce code :
if (! function_exists('slug_scripts_masonry') ) : if ( ! is_admin() ) : function slug_scripts_masonry() { wp_enqueue_script('masonry'); wp_enqueue_style('masonry’, get_template_directory_uri().'/css/’); } add_action( 'wp_enqueue_scripts', 'slug_scripts_masonry' ); endif; //! is_admin() endif; //! slug_scripts_masonry exists
Ce code charge simplement masonry et le rend disponible pour les fichiers de modèles de votre thème (voir notre guide sur la façon d’ajouter correctement des JavaScripts et des Styles dans WordPress). Notez également que nous n’ajoutons pas jQuery comme dépendance pour l’un ou l’autre. L’un des avantages de Masonry 3 est qu’il ne nécessite pas jQuery, mais peut être utilisé avec. D’après mon expérience, l’initialisation de Masonry sans jQuery est plus fiable et permet d’Aller à/au chargement de jQuery, ce qui peut aider à réduire les temps de chargement des pages et les problèmes de compatibilité.
Étape par étape : Initialiser le JavaScript
La fonction suivante définit Réglages, les conteneurs qui seront utilisés et s’assure que tout se passe dans le bon ordre. Masonry a besoin de calculer la taille de chacun des articles de la page afin de commander sa grille de façon dynamique. Un problème que j’ai rencontré avec Masonry dans de nombreux navigateurs est que Masonry calcule mal la hauteur des articles dont les images se chargent lentement, ce qui a pour effet de faire se chevaucher les articles. La solution consiste à utiliser imagesLoaded pour empêcher Masonry de calculer la mise en page jusqu’à ce que toutes les images soient chargées. Cela permet de garantir un dimensionnement correct.
Il s’agit de la fonction et de l’action qui produiront le script d’initialisation dans le pied de page :
if ( ! function_exists( 'slug_masonry_init' )) : function slug_masonry_init() { ?> <script> //set the container that Masonry will be inside of in a var var container = document.querySelector('#masonry-loop'); //create empty var msnry var msnry; // initialize Masonry after all images have loaded imagesLoaded( container, function() { msnry = new Masonry( container, { itemSelector: '.masonry-entry' }); }); </script> <?php } //add to wp_footer add_action( 'wp_footer', 'slug_masonry_init' ); endif; // ! slug_masonry_init exists
La fonction est expliquée étape par étape avec des commentaires en ligne. La fonction JavaScript indique à Masonry de rechercher les articles de la classe « masonry-entry » dans un conteneur portant l’ID « masonry-loop » et de calculer la grille uniquement après le chargement des images. Nous définissons le conteneur extérieur avec querySelector et le conteneur intérieur avec itemSelector.
Étape par étape : Création de la boucle de masonry
Au lieu d’ajouter la Balise HTML pour Masonry directement à un Modèle, nous allons créer un élément de modèle séparé pour cela. Créez un nouveau fichier appelé « content-masonry.php » et ajoutez-le à votre thème. Cela vous permettra d’ajouter la boucle Masonry à autant de modèles différents que vous le souhaitez.
Dans votre nouveau fichier, vous ajouterez le code affiché ci-dessous. Le balisage est similaire à ce que vous verriez normalement pour toute prévisualisation de contenu. Vous pouvez le modifier comme bon vous semble, mais assurez-vous que l’élément le plus externe possède la classe « masonry-entry » que nous avons définie comme itemSelector dans la dernière étape.
<article class="masonry-entry" id="post-<?php the_ID(); ?>" <?php post_class(); ?> > <?php if ( has_post_thumbnail() ) : ?> <div class="masonry-thumbnail"> <a href="<?php the_permalink(' ') ?>" title="<?php the_title(); ?>"><?php the_post_thumbnail('masonry-thumb'); ?></a> </div><!--.masonry-thumbnail--> <?php endif; ?> <div class="masonry-details"> <h5><a href="<?php the_permalink(' ') ?>" title="<?php the_title(); ?>"><span class="masonry-post-title"> <?php the_title(); ?></span></a></h5> <div class="masonry-post-excerpt"> <?php the_excerpt(); ?> </div><!--.masonry-post-excerpt--> </div><!--/.masonry-entry-details --> </article><!--/.masonry-entry-->
Cette balise a des classes pour chacune de ses parties, de sorte que vous pouvez ajouter une balise pour correspondre à votre thème. J’aime ajouter une jolie bordure légèrement arrondie à .masonry-entry. Une autre option intéressante est de ne pas ajouter de bordure à .masonry-entry, mais de lui donner une légère ombre. Cette option est particulièrement intéressante lorsque la miniature de la publication s’étend jusqu’à la bordure du conteneur, ce qui peut être réalisé en donnant à .masonry-thumbnail des marges externes et des marges internes de 0 dans toutes les directions. Vous voudrez ajouter tous ces styles dans un fichier appelé masonry.css dans le répertoire css de votre thème.
Étape par étape : Ajouter la boucle de masonry aux modèles
Maintenant que nous avons notre élément de modèle, vous pouvez l’utiliser dans n’importe quel modèle de votre thème. Vous pouvez l’ajouter à index.php, mais pas à category.php si vous ne voulez pas qu’elle soit utilisée pour les archives des catégories. Si vous voulez l’utiliser uniquement sur la page d’accueil de votre thème, lorsqu’elle est définie pour afficher les publications du blog, vous l’utiliserez dans home.php. Où que vous choisissiez, tout ce que vous avez à faire est d’envelopper votre boucle dans un conteneur avec l’ID « masonry-loop » et d’ajouter l’élément de modèle dans la boucle en utilisant get_template_part(). Confirmez-vous que le conteneur de la boucle de maçonnerie démarre avant while (have_posts() ).
Par exemple, voici la boucle principale de l’index.php de Twentythirteen :
<?php if ( have_posts() ) : ?> <?php /* The loop */ ?> <?php while ( have_posts() ) : the_post(); ?> <?php get_template_part( 'content', get_post_format() ); ?> <?php endwhile; ?> <?php twentythirteen_paging_nav(); ?> <?php else : ?> <?php get_template_part( 'content', 'none' ); ?> <?php endif; ?>
Et la voici modifiée pour utiliser notre boucle Masonry :
<?php if ( have_posts() ) : ?> <div id="masonry-loop"> <?php /* The loop */ ?> <?php while ( have_posts() ) : the_post(); ?> <?php get_template_part( 'content', 'masonry' ?> <?php endwhile; ?> </div><!--/#masonry-loop--> <?php twentythirteen_paging_nav(); ?> <?php else : ?> <?php get_template_part( 'content', 'none' ); ?> <?php endif; ?>
Étape par étape : Définir les Réglages responsive des articles masonry
Vous pouvez définir la largeur de chaque article Masonry de plusieurs manières. Vous pouvez définir la largeur en utilisant un nombre de pixels lorsque vous initialisez Masonry. Je ne suis pas fan de cette méthode car j’utilise des thèmes responsive et cela nécessite des requêtes media complexes pour obtenir des résultats corrects sur les petits écrans. Pour les Réglages responsive, j’ai trouvé que la meilleure chose à faire est de définir une valeur de largeur pour .masonry-entry avec un pourcentage, basé sur le nombre d’articles que vous voulez dans une ligne et laisser Masonry faire le reste du calcul pour vous.
Tout ce qui est nécessaire est de diviser les 100 par le nombre d’articles que vous voulez définir le pourcentage dans une simple entrée dans le style.css de votre thème. Par exemple, si vous voulez quatre articles dans chaque ligne, vous pouvez le faire dans votre fichier masonry.css :
.masonry-entry{width:25%}
Étape par étape : Optimisation mobile
Nous pourrions nous arrêter ici, mais je ne pense pas que le résultat final fonctionne incroyablement bien sur les petits écrans de téléphone. Une fois que vous êtes satisfait de l’aspect de votre thème avec la nouvelle grille Masonry sur votre ordinateur, vérifiez-le sur votre téléphone. Si vous n’êtes pas satisfait de l’aspect de votre thème sur votre téléphone, vous devrez faire un peu de travail.
Je ne pense pas qu’il y ait assez de place sur l’écran d’un téléphone pour tout ce que nous avons ajouté à notre élément contenu-masonry du modèle. Deux bonnes solutions s’offrent à vous : raccourcir l’extrait pour les téléphones ou l’omettre complètement. Voici une fonction supplémentaire que vous pouvez ajouter au fichier functions.php de votre thème pour faire cela. Parce que je ne pense pas que ces questions soient un problème sur les tablettes, j’utilise une excellente extension Mobble dans tous les exemples de cette section pour effectuer uniquement les modifications sur les téléphones, pas sur les tablettes. Je vérifie également si Mobble est activé avant de l’utiliser et, si nécessaire, j’utilise la fonction de détection mobile plus générale wp_is_mobile qui est intégrée à WordPress.
if (! function_exists('slug_custom_excerpt_length') ) : function slug_custom_excerpt_length( $length ) { //set the shorter length once $short = 10; //set long length once $long = 55; //if we can only set short excerpt for phones, else short for all mobile devices if (function_exists( 'is_phone') { if ( is_phone() ) { return $short; } else { return $long; } } else { if ( wp_is_mobile() ) { return $short; } else { return $long; } } } add_filter( 'excerpt_length', 'slug_custom_excerpt_length', 999 ); endif; // ! slug_custom_excerpt_length exists
Comme vous pouvez le voir, nous commençons par stocker la longueur de l’extrait long et la longueur de l’extrait court dans des variables, puisque nous allons utiliser ces valeurs deux fois et que nous voulons être en mesure de les modifier à partir d’un seul endroit si nous en avons besoin ultérieurement. Ensuite, nous testons si nous pouvons utiliser la fonction is_phone() de Mobble. Si c’est le cas, nous définissons l’extrait court pour les téléphones et l’extrait long si nous ne le sommes pas. Après cela, nous faisons la même chose de base, mais en utilisant wp_is_mobile, qui affectera tous les appareils mobiles ,si is_phone() ne peut pas être utilisé. Avec un peu de chance, la partie else de cette fonction ne sera jamais utilisée, mais il est bon d’avoir une sauvegarde au cas où. Une fois la logique de longueur d’extrait définie, il ne reste plus qu’à crocheter la fonction avec le filtre excerpt_length.
Raccourcir l’extrait est une option, mais nous pouvons aussi l’éliminer complètement avec un processus simple. Voici une nouvelle version de content-masonry, avec l’intégralité de l’extrait supprimée sur les téléphones :
<article class="masonry-entry" id="post-<?php the_ID(); ?>" <?php post_class(); ?> > <?php if ( has_post_thumbnail() ) : ?> <div class="masonry-thumbnail"> <a href="<?php the_permalink(' ') ?>" title="<?php the_title(); ?>"><?php the_post_thumbnail('masonry-thumb'); ?></a> </div><!--.masonry-thumbnail--> <?php endif; ?> <div class="masonry-details"> <h5><a href="<?php the_permalink(' ') ?>" title="<?php the_title(); ?>"><span class="masonry-post-title"> <?php the_title(); ?></span></a></h5> <?php //put the excerpt markup in variable so we don't have to repeat it multiple times. $excerpt = '<div class="masonry-post-excerpt">'; $excerpt .= the_excerpt(); $excerpt .= '</div><!--.masonry-post-excerpt-->'; //if we can only skip for phones, else skip for all mobile devices if (function_exists( 'is_phone') { if ( ! is_phone() ) { echo $excerpt; } } else { if ( ! wp_is_mobile() ) { echo $excerpt; } } ?> </div><!--/.masonry-entry-details --> </article><!--/.masonry-entry-->
Cette fois-ci, nous testons si nous ne sommes pas sur un appareil mobile ou un téléphone et si c’est le cas, nous renvoyons la partie extrait de notre boucle. Si nous sommes sur un téléphone/appareil mobile, nous ne faisons rien.
Une autre chose que vous pourriez vouloir faire est d’augmenter la largeur des articles Masonry, ce qui réduit le nombre d’articles dans une ligne, sur les appareils mobiles. Afin de le faire, nous allons ajouter un style en ligne différent à l’en-tête en fonction de la détection de l’appareil. Comme cette fonction utilise wp_add_inline_styles, elle dépendra d’une feuille de style spécifique. Dans ce cas, j’utilise masonry.css, ce que vous pourriez vouloir, pour garder vos styles de masonry séparés. Si vous ne l’utilisez pas, vous pouvez utiliser la Poignée d’une autre feuille de style déjà inscrite.
if ( ! function_exists ( 'slug_masonry_styles' ) ) : function slug_masonry_styles() { //set the wide width $wide = '25%'; //set narrow width $narrow = '50%'; /**Determine value for $width**/ //if we can only set narrow for phones, else narrow for all mobile devices if (function_exists( 'is_phone') { if ( is_phone() ) { $width = $narrow; } else { $width = $wide; } } else { if ( wp_is_mobile() ) { $width = $narrow; } else { $width = $wide; } } /**Output CSS for .masonry-entry with proper width**/ $custom_css = ".masonry-entry{width: {$width};}"; //You must use the handle of an already enqueued stylesheet here. wp_add_inline_style( 'masonry', $custom_css ); } add_action( 'wp_enqueue_scripts', 'slug_masonry_styles' ); endif; // ! slug_masonry_styles exists
Cette fonction interroge la feuille de style personnalisée, puis définit une valeur pour la largeur en utilisant ce qui devrait maintenant être une logique très familière. Ensuite, nous créons la variable $custom_css en passant la valeur de la largeur dans un bout de CSS d’apparence normale avec {$width}. Ensuite, nous utilisons wp_add_inline_style pour dire à WordPress d’imprimer nos styles inline dans l’en-tête chaque fois que la feuille de style Masonry est utilisée, puis nous croisons toute la fonction avec wp_enqueue_scripts et nous avons terminé.
Si vous choisissez de combiner vos styles Masonry dans une feuille de style existante, assurez-vous d’utiliser la Poignée de cette feuille de style avec wp_add_inline_style ou vos styles inline ne seront pas inclus. J’aime utiliser wp_add_inline_style parce que je mets généralement le crochet d’action pour la mise en file d’attente de Masonry dans une conditionnelle afin qu’il soit ajouté uniquement lorsque c’est nécessaire. Par exemple, si j’utilise Masonry uniquement sur l’index de mon blog et les pages d’archives, je ferais ceci :
if ( is_home() || is_archive() ) { add_action( 'wp_enqueue_scripts', 'slug_scripts_masonry' ); }
Ces derniers exemples devraient faire germer d’autres idées dans votre cerveau. Par exemple, vous pourriez utiliser une logique similaire pour Aller à/au tout sur un appareil mobile. Par ailleurs, wp_add_inline_style() est une fonction moins utilisée, mais très utile, car elle vous permet de définir par programme différents styles basés sur n’importe quel type de conditionnel. Elle peut vous permettre de changer radicalement le style de n’importe quel élément en se basant uniquement sur la détection de l’appareil, mais les modifications pourraient également être basées sur le Modèle utilisé, ou même si l’utilisateur est connecté ou non.
J’espère que vous verrez ces différentes modifications que j’apporte comme une opportunité de faire preuve de créativité. La masonry et les systèmes de grille en cascade similaires sont populaires depuis un certain temps maintenant, il est donc temps d’apporter de nouvelles touches à cette idée populaire. Affichez dans les commentaires vos idées pour utiliser Masonry dans un thème WordPress.
Homme à tout faire de WordPress, Josh Pollock écrit sur WordPress, développe des thèmes, est le community manager du Pods Framework et défend les solutions open source pour un design durable.
Syed Balkhi
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Gabi
Hi, i wanted to know if there is a way of using the masonry grid to show registered users. Any ideas?
Neil
Just a quick note if you’re getting the « imagesLoaded » error, try adding the Javascript code after the wp_footer call in your footer.php.
This work for me:
Add to functions.php
add_action( ‘wp_enqueue_scripts’, ‘slug_masonry’ );
function slug_masonry( ) {
wp_enqueue_script(‘masonry’); // note this is not jQuery
}
In your loop, make sure your div is:
And the image class is:
and then after wp_footer in your footer.php this:
//set the container that Masonry will be inside of in a var
var container = document.querySelector(‘#masonry-loop’);
//create empty var msnry
var msnry;
// initialize Masonry after all images have loaded
imagesLoaded( container, function() {
msnry = new Masonry( container, {
itemSelector: ‘.masonry-entry’
});
});
Marisa Di Monda
Hi Andy I just tried this and I couldn’t get it to work. Everything is still running vertically in one column.
Any solutions?
Marisa Di Monda
I’m having the same problem. Did you guys solve it?
Peter
did not work for me. i see only two images on my front page which are arranged underneath. don’t know where is the problem
Eva
For some reason my posts will just all show just in rows like normal, not in masonry form, I’m not really sure how this can happen. Any ideas?
Peter
yeah, i have the same error. any solutions for this?
jcbrmn06
For anyone still having issues with this, I noticed that this code:
//set the container that Masonry will be inside of in a var
var container = document.querySelector(‘#masonry-loop’);
//create empty var msnry
var msnry;
// initialize Masonry after all images have loaded
imagesLoaded( container, function() {
msnry = new Masonry( container, {
itemSelector: ‘.masonry-entry’
});
});
Was before the masonry JS library. Therefore you get the imagesLoaded error. Like Andy suggested below putting it in the header should fix it. Basically you just have to make sure the library has to come before this code.
Andy Giesler
Thanks again for this tutorial, it really helped start me on my way.
Even with everything in place, I saw intermittent problems where the tiles simply ran down the left of the page in a single column, and Firebug confirmed that sometimes the Masonry code didn’t execute. This happened only occasionally, and only in Firefox.
It seemed that under certain load scenarios, there were probems with code trying to execute before the required files were loaded. I don’t think this was an imagesLoaded problem, since that has different symptoms.
I fixed the problem as follows:
1. The « slug_masonry_init » function places the masonry init code inline into the footer. I removed that whole function (as well as the add_action ‘wp_footer’ code) and moved the JS into an extenal file: masonry-init.js
2. I wrapped the masonry init code in jQuery to take advantage of its document.ready ability. It’s unfortunate to pull in jQuery since this is the jQuery-free version of Masonry, but document.ready seemed necessary for the code to execute in all load scenarios.
(function( $ ) {
« use strict »;
$(function() {
});
}(jQuery));
3. I enqueued the scripts like this:
wp_enqueue_script( ‘masonry’ );
wp_enqueue_script( ‘jquery’ );
wp_enqueue_script( ‘masonryInit’, get_stylesheet_directory_uri().’/js/masonry-init.js’, array( ‘masonry’, ‘jquery’ ) );
Daniel Nikolovski
Done exactly as the tutorial says, wp 3.9.1.. imagesLoaded isn’t even being loaded. Some help would be highly appreciated
Tiago Celestino
This , where is define ‘masonry-thumb’?? this default thumbnail size with masonry WordPress?
WPBeginner Staff
Checkout our guide on how to properly add javascript and styles in WordPress.
Jenny Beaumont
I’m having trouble getting this to work…followed things accordingly, based on _s, but my columns don’t wrap – just get one long one. Have any css examples to go with? I’m obviously missing something. cheers!
marisa
Hi Jenny
I am having the same trouble. Did you solve your problem?
caratcake
I’m desperately confused. I performed every step down to the letter, and my site just goes blank. A problem with the functions file. My browser doesn’t even allude to which line causes any error, all I get is »
Server error
The website encountered an error while retrieving (url) It may be down for maintenance or configured incorrectly. »
The same happened for the WP Admin login page. I deleted functions.php in my theme folder, and the login screen was restored, but the front page was not. If you could give me any clues to what the problem might be, I would be very grateful. Regardless, many thanks for the tutorial and in depth explanations.
Andy Giesler
In case this helps others to get the sample working:
It wasn’t working for me even after I made the fix that others have noted — changing « function slug_masonry_exists() » to « function slug_masonry_init() ». The libraries were being loaded, but Masonry wasn’t doing its thing.
Then I changed the wp_enqueue_script calls so that Masonry and imagesLoaded got loaded in the header instead of at the bottom.
Suddenly everything worked.
Jean
Hi, i can´t figure out how do change the wp_enqueue_script. I will really appreciate if you can explain that in detail. Thanks!
gabi
Hello, It doesn’t work for me I have this error message :
» Parse error: syntax error, unexpected T_ENDIF in… »…functions.php on line 17
It means an error on the script from the 3td step. What did I miss ?
werner
Will you update your post due to the fact that now with 3.9 Masonry3 is in WordPress core?
Editorial Staff
Yes we’re working on updating it.
Administrateur
Steven Gardner
The initialization script keeps being called before imagesloaded has been defined so I get
Uncaught ReferenceError: imagesLoaded is not defined
How can I make sure imagesLoaded is there first before I start to initialise things?
Violacase
imagesLoaded is called before enqueueing has been established. Give it a low priority so that it is called last, like:
add_action( ‘wp_footer’, ‘slug_masonry_init’, 100000 );
This did the trick for me.
Nota: I think this article needs to be updated. Not only because of this issue.
Chplusink
Thanks! This is the only solution that worked for me.
Kate
Thanks for this post. I am trying to set up a blog page with Masonry posts, but I’m snagged at step 1. Whenever I add the functions for adding the two libraries to my functions file, my site goes totally blank. Since I am developing in a subdirectory, I tried to make the paths to the js files absolute rather than relative, but that didn’t help. Any idea what I’m missing?
Steven Gardner
Yeah me too.
I’m using version 3.8.3 so wordpress haven’t upgraded to V3 of masonry yet which I though may have been the issue.
they do plan to in the 3.9 release http://make.wordpress.org/core/2014/03/27/masonry-in-wordpress-3-9/
Angie Lee
Hi,
I’m getting this error: « ReferenceError: imagesLoaded is not defined » please help.
Violacase
See above
Amitabha Ghosh
Thanks. It’s a great post and it is working for me. I am doing a template with this code and it is working perfect. But two obstacles I am facing
1. I want to limit my posts in my index page so that it shows first 6 to 7 posts and below will be a button with « Load More » feature which when clicked shall load the other posts.
2. I am trying to integrate infinite scroll javascript of Paul Irish but I couldn’t make it work. Any help??
Thanks
Ismar Hadzic
Well I followed all of your steps and I run on fatal error » PHP Fatal error: Call to undefined function wp_enquqe_style() » and i still don’t understand why wp_enquqe_style() i don’t understand why can you check that out.
AndyM
Hi
I was going to comment to point out that it’s a typo and should be:
wp_enqueue_style
Andre
Great tutorial…just one thing in step 3…this:
…has a missing bracket:
Aurélien Denis
Hi there!
This post is great start but I found some mistakes…
1/ You should use the_title_attribute() for the attribute title instead of the title
2/ add_action( ‘wp_footer’, ‘slug_masonry_exists’ ); is the correct code and not add_action( ‘wp_footer’, ‘slug_masonry_init’ );
Cheers!
Zulian
Actually, you don’t need to use title attributes.
AndyM
I’m wondering if
if ( ! function_exists( ‘slug_masonry_init’ )) :
function slug_masonry_exists() { ?>
should be:
if ( ! function_exists( ‘slug_masonry_init’ )) :
function slug_masonry_init() { ?>
Ben Racicot
Can’t get this working with an infinite scroll setup in my $ajax success CB. Any advice would be great.
Tomasz Bystrek
I was looking for this effect, but I did’t know how it is called and how to search for it, until now. I’ll definitely try it in one of my future project of photo blog. Thanks!
Katrina Moody
Great post – wish it was around when I started working with Masonry on a theme a few weeks ago
A couple variations – I created a new post-thumbnail image size to pull in so that both horizontal and vertical images would have equal attention within the Masonry pages – it’s fairly easy to change out the actual image for a new one (I did that at first, creating a new « entry-thumbnail » size and allowing unlimited length so that horizontal images would display properly). Then I just edited the post-thumbnail
I also wrapped the post-thumbnail within an tag so that I could allow it to return to the post permalink (I changed that out to return the media file link so I could implement a lightbox effect – per a client’s request) so visitors could go directly to the post.
I also added a hover effect to the post-thumbnail to indicate it was clickable
Now I need to pick through what I’ve done and compare it to yours and see what I can improve with your knowledge (love the WordPress community!)
Ivan Vilches
guys all that code is on functions.php ? thanks