2

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.

  • Please improve the formatting of your question and the code parts and also make clear what the question is and what you are trying to achieve. – FFrewin Jul 23 '14 at 16:43
  • 1
    Ha @FFrewin, not yet tired of me ;-)! I have edited my question, I hope it makes more sens now – MagTun Jul 23 '14 at 17:00
2

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.

  • That's is perfect! You made my day! Thanks a lot for your patience and your advice! – MagTun Jul 23 '14 at 17:25
  • 1
    You are welcome - 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 also my answer to include this. – FFrewin Jul 23 '14 at 17:39
  • 1
    I have no other word than... Amazing! – MagTun Jul 23 '14 at 17:42
1

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.

  • The difficult thing is that I only want one image per article but this image should have a different size whether the article is on a blog page (the image is downscaled) or on his own page (default size). But anyway, the problem is solved thanks to FFrewin. – MagTun Jul 25 '14 at 9:26
  • Then you set one image as the intro image, that will be shown on blog pages, and another larger one as the article image. This is exactly what Joomla's article images feature is for. – Seth Warburton Jul 27 '14 at 22:05
  • Right, I could but that way I can't add a link on the "Full article image" (which I need to do). – MagTun Jul 28 '14 at 13:48
  • Sure you can, that's what template overrides are for. Use the links functionality in the same tab to place a link around an article image. – Seth Warburton Jul 28 '14 at 16:25
  • You're right, I didn't think about doing it that way! – MagTun Jul 31 '14 at 6:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.