Astuce une solution de contournement pour les images difficiles

Cette astuce explique comment ajouter une colonne personnalisée dans les écrans de gestion de votre blog WordPress..

Récemment, j'ai eu besoin de commencer à utiliser des images en vedette au lieu de timthumb.php pour la première fois. Tout était génial, sauf que je trouvais vraiment ennuyeux de ne pouvoir spécifier la taille exacte d'une image (rognage difficile).

Après avoir regardé pendant un moment, j'ai trouvé que la solution de la plupart des gens consistait à utiliser un plugin qui finissait par contenir une quantité excessive de code..

De plus, je voulais être en mesure de servir une mise en page réactive en utilisant la classe de système de grille Skeleton de "échelle avec grille"- la raison originale d'utiliser des images en vedette qui ne nécessite pas d'attribut de largeur avant ni de hauteur.

Voici la solution de contournement que j'ai proposée compte tenu des exigences du projet.

Étape 1: appliquez une classe arbitraire à vos images de publication sélectionnées

Nous devons pouvoir contrôler l'image à l'aide de notre feuille de style. Nous devons donc appliquer une classe qui affecte uniquement l'image elle-même. J'ai choisi d'envelopper mon image dans un figure/div appelé 'gros titre'. C’était en plus d’une taille de vignette personnalisée que j'avais déjà définie dans le functions.php fichier appelé 'énorme'- cette taille de vignette avait une largeur maximale de 940 alors que la hauteur était de 900.

C'est bien de supposer que vous souhaitiez une image d'une hauteur de 900 pixels - mais avouons-le: vous ne le faites probablement pas car cela ressemble à ceci:

Voici le code que j'ai écrit pour le modèle:

   'scale-with-grid')); ?>

Étape 2 Un peu de piratage CSS

 #headline max-height: 400px; débordement caché;

Et après avoir ajouté ce code, nous obtenons le résultat suivant, qui est beaucoup plus facile à gérer:

Pourquoi ça marche

Cela fonctionne car nous définissons uniquement une hauteur maximale et non une largeur maximale. WordPress utilise par défaut la largeur maximale que nous avons définie via notre fonction:

 add_action ('init', 'my_register_image_sizes'); function my_register_image_sizes () add_image_size ('énorme', 940 900, vrai);

Techniquement, l’image est toujours présente dans sa taille maximale, mais nous avons forcé le navigateur à masquer quoi que ce soit au-dessus de 400 pixels de haut en utilisant la débordement caché attribut.

Ça marche!

Juste un problème bien que…

Bien que cela paraisse bien, nous piratons sauvagement notre navigateur ici. Rappelez-vous que l'image a seulement l'air d'avoir été redimensionnée - comme nous l'avons déjà dit, l'image est toujours là..

Cela signifie que, même s'il est beau, jusqu'à la téléphonie mobile, il prend beaucoup d'espace..

Quelqu'un at-il une meilleure solution? Laissez vos idées dans les commentaires ci-dessous!

Code