Remove all <img> tag except the first one change image size - Tag component

Question

Context: On the Tag page (the Tag page I am talking about is the page I get to when I click on a tag just below the title of an article), I want to display only one image per article so:

• if there is an intro image, the image in the article are removed
• if there is no intro image, only the first image of the article is displayed

The problem: When the Tag page looks like below the size of image of the article just below an article that contains an intro image changes (here the article 3)

• article 1: image is in HTML (introtext)
• article 2: image is an intro image
• article 3: image is in HTML (introtext)
• article 4: image is in HTML (introtext)

The image size should be width="456" height="140" (the default) but instead it's width="624" height="340".

I need help for: I am trying to find a way to make sure that the size of my images doesn't change.

Here is my 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);                  
    }                   
?>

What I have done to fix the problem : I thought that could be linked to the fact that the height and width of the image aren't set in the HTML, but when I tested the part below alone, the size of my images doesn't change. So it's seems the problem is somewhere else.

<?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 is a live example: Look for the second article (the one just below the yellow drawing with huts). The image of the second and third article are supposed to have the same width.

Answer 1

This will not exactly answer your question, in case you want to use the original size of the images you insert in your articles, however remember that:

You can always manipulate the visual part of the page with CSS.

Something like the css below, in your css file (e.g. the template.css) should work and will set a maximum width for all the images that are displayed in the tags page:

CSS

.tag-category .list-striped li img {
    max-width: 456px;
    width:100% !important;
}

Update:

just as a small improvement, you can also add this additional rule: width:100% !important; - So the images will also respond to the various screen sizes. *I updated the CSS code above. *Actually, my way of doing this: to fully style and give my desired layout to the page, would be with CSS. I would only care about the html sizes of the images only for performance considerations.

Answer 2

Your example has only 1 image. The images should be displayed at their natural size, unless you specify dimensions in your html. Don't specify sizes in your html, upload images at the size you want them. That's it.