For anyone who is not aware of how to “assign” an image to an article, the feature is found on the Images and Links tab when you’re creating or editing an article.

J! 4.x Images And Links tab

In J! 3.x the intro image—the image that is displayed when viewing articles in category blog layout—could be placed in one of three locations:

  1. None — the image was not displayed;
  2. Left — the image was floated at the top left and the text wrapped around it; or
  3. Right — the image was floated at the top right and the article text wrapped around it.

Similarly, the full image—the image displayed when viewing a single article—could be placed in one of the three locations I mentioned above.  I liked using the “right” location; I also used the same file for the intro image and the full image and resized the intro images in the category blog with a simple piece of CSS, namely

div.leading-0 > div.pull-right, div.item > div.pull-right {
    width: 20%;                       /* resize the intro image */
    margin: 0 10px 0 0;

J! 4.x (or rather Cassiopeia) doesn’t work like that.see Joomla 4 – Cassiopeia Template – a bunch of Tips & Tricks by Marc Dechèvre, “4.4.5. Articles Images – Left, Center or Right”  The position of the article image is defined by a CSS class.  There are three built-in classes:

  • float-start — the image is floated at the top left and the text wrapped around it;
  • float-end — the image was floated at the top right and the article text wrapped around it; and
  • float-center — which you have to define yourself.

I discovered, however, that these settings appear to work in the single article view but not in the category blog view:  unlike in the single article view, the intro image is neither floated nor does the text wrap around it.see the discussion at The Joomla Forum™  So how could we follow the guide but get it so wrong?  Furthermore, how can I use the same file I used in the single article view—i.e. the full image—in the category blog but resized a little smaller?  Fortunately a small piece of CSS came to the rescue, namely

.blog-item {                          /* float the intro image */
    display: block;                   /* was: flex */
.blog-item figure.item-image {        /* resize the intro image */
    max-width: 15em;                  /* experiment with different values as you like */

And that’s all there was to it!

Extra tip

j4x articlesOptionsIf you always want to float your article images on the right (as I do on this website), change the default setting like this:

  1. Go to Content » Articles
  2. Click the Options button on the top right of the screen.
  3. Use the Editing Layout tab and change the settings for Intro Image Class and Full Text Image Class as you need (refer to the image on the right).

No comments

Comments are closed

The comments for this content have been closed automatically; it's been a while since it was published.