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.

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™:  https://forum.joomla.org/viewtopic.php?f=815&t=995480.  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

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

I’ve lost count of the number of Joomla websites I’ve created—some of which lasted a couple of hours and some of them have lasted for years—but I have a standard process that I follow when I create websites.  Therefore, in no particular order, this is my checklist of things I do between creating a new Joomla website and adding the first piece of content:

• As a general rule-of-thumb, one should never edit or modify any original software files; this includes the boilerplate “distributed server configuration file” shipped with the J! installation package as htaccess.txt.  Therefore, the first order of business is to make a copy of this file.
• There’s an important change that needs to be made to the vanilla-flavoured “_·htaccess” file.  Edit the copy of the template mentioned in the above dot-point and delete lines 139-172—in other words, everything that relates to “GZIP”—because these rules are unnecessary in nearly every hosted website environment that I’ve seen.The Joomla Forum™ is littered with stories of how the “double gzip” issue has broken people’s websites.  Some of these stories are re-told in my article Joomla “double gzip” problems.  Rename the edited file as .­htaccess.