Confus sur le dimensionnement des images dans Wordpress
Je crée mon premier thème Wordpress et tout fonctionne bien, et en suivant ce tutoriel et quelques autres, j'ai compris comment ajouter tailles d'image personnalisées à l'aide de la fonction add_image_size (). Cependant, je ne sais pas quelle taille d'image choisir quand.
Par exemple, dans mon thème, j'ai créé un modèle de blog qui affiche les vignettes de blog en 3 colonnes. Chaque colonne mesure environ 400 pixels de large. Donc, ma première hypothèse est que je devrais créer une image de 400 pixels de large afin que cette image soit chargée à chaque fois que la page du blog est chargée.
Ma confusion ici est tout d’abord, quelle hauteur dois-je régler? Devrais-je avoir:
add_image_size('blog-grid', 400, 300, true), // Or
add_image_size('blog-grid', 400, 500, true), etc. // Or
add_image_size('blog-grid', 400, 'auto', true), etc. // Can I set it to 'auto'?
Parce que vraiment, comment suis-je censé savoir quelle hauteur seraient les images, je préférerais simplement régler la largeur et laisser la hauteur automatiquement ajustée à la proportion, de sorte que je n'aurai même pas à rogner les images. De plus, avoir des hauteurs différentes dans la grille ne cassera pas ma mise en page ou quoi que ce soit, pourrait même sembler bien si je choisis une disposition en maçonnerie.
Ma deuxième confusion est que lorsque le navigateur redimensionne, les colonnes s'empilent les unes sur les autres (j'utilise Bootstrap), donc l'image affichée augmente. Serait-ce un facteur dans le choix de la taille d'image personnalisée?
Une autre préoccupation que j’ai eue est que j’ai donné à l’utilisateur une option pour choisir entre une disposition de grille de 2, 3 et 4 colonnes. Devrais-je créer 3 tailles d’images différentes pour ces images ou il serait préférable de choisir une moyenne des trois?.
De plus, j'ai inspecté un thème et découvert qu'il utilise des images deux fois plus grandes que celles requises. Ainsi, par exemple, dans un blog où une colonne mesure 400 pixels de large (et donc l'image), la taille de l'image utilisée est de plus de 800 pixels de large. Est-ce à voir avec l'affichage de la rétine? Comme je pense que je me suis déjà occupé de cela dans mon thème en utilisant retina.js et en suivant ce tutoriel . Dois-je toujours m'inquiéter de l'affichage de la rétine lors de l'ajout de tailles personnalisées?
Je sais que ces questions ont probablement l'air vraiment stupides, mais j'apprécierais vraiment toute aide à ce sujet. Merci!
Je préférerais simplement régler la largeur et laisser la hauteur être automatiquement ajustée à la proportion, de sorte que je n'aurai même pas à rogner les images.
Si les images ne présentent pas toutes la même proportion, il faudra recadrer. Si vous souhaitez éviter le recadrage, vous devez vous assurer que les images sont modifiées avant de les insérer dans WordPress.
Par exemple, si vous souhaitez que les images 400x300 (sans recadrage) soient systématiquement reproduites, votre image d'origine doit avoir les mêmes proportions, par exemple 1200 x 900 pixels. Si l'image d'origine fait 1100x900 pixels, elle sera recadrée.
Si vous ne vous souciez que de la cohérence de la largeur, vous pouvez faire quelque chose comme ceci:
add_image_size( 'blog-grid', 400, 9999, true );
Une autre préoccupation que j’ai eue est que j’ai donné à l’utilisateur une option pour choisir entre une disposition de grille de 2, 3 et 4 colonnes. Devrais-je créer 3 tailles d’images différentes pour ces images ou il serait préférable de choisir une moyenne des trois?.
Par défaut, les piles d’amorçage à 767px et moins, donc sur des téléphones plus grands, ne sont peut-être pas très belles. Je teste habituellement sur un iPhone et un appareil Andriod légèrement plus grand, mais cela dépend de vos besoins - 500 pixels est généralement suffisant.
De plus, j'ai inspecté un thème et découvert qu'il utilise des images deux fois plus grandes que celles requises. Ainsi, par exemple, dans un blog où une colonne mesure 400 pixels de large (et donc l'image), la taille de l'image utilisée est de plus de 800 pixels de large. Est-ce à voir avec l'affichage de la rétine? Comme je pense que cela a déjà été fait dans mon thème en utilisant retina.js et en suivant ce tutoriel. Dois-je toujours m'inquiéter de l'affichage de la rétine lors de l'ajout de tailles personnalisées?
Si vous avez suivi le didacticiel et que vous êtes satisfait des images produites, vous ne semblez plus devoir le faire. Le seul moyen de le savoir est de le tester.