Contexte: Sur la page Tag (la page Tag dont je parle est la page à laquelle je parviens lorsque je clique sur un tag juste en dessous du titre d'un article), je souhaite afficher une seule image par article de sorte:
Le problème: Lorsque la page Tag se présente comme ci-dessous la taille de l'image de l'article, un article contenant une image d'introduction change (ici l'article 3). )
La taille de l'image doit être width="456" height="140"
(valeur par défaut) mais au lieu de cela width="624" height="340"
.
J'ai besoin d'aide pour: J'essaie de trouver un moyen de m'assurer que la taille de mes images ne change pas.
Voici mon code
<?php
if (!empty($images->image_intro)) {
$item->core_body= strip_tags( $item->core_body, '<p>');
}
else {
$item->core_body= preg_replace('/\<img/','****',$item->core_body,1);
$item->core_body= strip_tags( $item->core_body, '<p>');
$item->core_body= str_replace('****','<img',$item->core_body);
}
?>
Ce que j'ai fait pour résoudre le problème: Je pensais que cela pouvait être lié au fait que la hauteur et la largeur de l'image ne sont pas définies dans le HTML, mais lorsque j'ai testé la partie ci-dessous uniquement, la taille de mes images ne change pas. Il semble donc que le problème se situe ailleurs.
<?php
$item->core_body= preg_replace('/\<img/','****',$item->core_body,1);
$item->core_body= strip_tags( $item->core_body, '<p>');
$item->core_body= str_replace('****','<img',$item->core_body);
?>
Here est un exemple concret: recherchez le deuxième article (celui situé juste en dessous du dessin jaune avec des huttes). Les images des deuxième et troisième articles sont supposées avoir la même largeur.
Cela ne répondra pas exactement à votre question, si vous souhaitez utiliser la taille originale des images que vous insérez dans vos articles, mais n'oubliez pas que:
Vous pouvez toujours manipuler la partie visuelle de la page avec CSS.
Quelque chose comme le css ci-dessous, dans votre fichier css (par exemple, le template.css) devrait fonctionner et définir une largeur maximale pour toutes les images affichées dans la page des balises:
CSS
.tag-category .list-striped li img {
max-width: 456px;
width:100% !important;
}
à titre de petite amélioration, vous pouvez également ajouter cette règle supplémentaire: width: 100%! important; - Les images répondent donc également aux différentes tailles d’écran. * J'ai mis à jour le code CSS ci-dessus. * En fait, ma façon de faire ceci: donner un style complet et donner la mise en page souhaitée à la page, serait avec CSS. Je me soucierais seulement de la taille html des images uniquement pour des raisons de performances.
Votre exemple n'a qu'une image. Les images doivent être affichées à leur taille naturelle, sauf si vous spécifiez des dimensions dans votre code HTML. Ne spécifiez pas de taille dans votre code HTML, téléchargez des images à la taille souhaitée. C'est ça.