web-dev-qa-db-fra.com

Supprimer toutes les balises <img> sauf la première changer la taille de l'image - Composant Balise

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:

  • s'il y a une image d'introduction, l'image de l'article est supprimée
  • s'il n'y a pas d'image d'introduction, seule la première image de l'article est affichée

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). )

  • article 1: l'image est en HTML (introtext)
  • article 2: l'image est une image d'introduction
  • article 3: l'image est en HTML (introtext)
  • article 4: l'image est en HTML (introtext)

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.

2
MagTun

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;
}

Mise à jour:

à 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.

2
FFrewin

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.

1
Seth Warburton