Joomla offers a way to insert special images that are “associated with” rather than being inside of a Joomla article. Joomla calls these special images, “Featured” images. There are two kinds of Featured images. Intro Featured Images are smalled thumbnail images used on our News website Home page and typically include Intro Text and a Read More button which when clicked on takes us to the Full Article. Full Article Featured images are bigger images that are displayed on the Full Article page. In our previous articles, we have used Libre Draw to create our Featured Images and used Gthumb to resize these images. In this article, we will review how to add both types of featured images to a Joomla News article.

To better understand what we are trying to accomplish in this article, here is what “Intro” Featured Images with a width of 800 pixels and height of 450 pixels look like in a Single Column Leading article layout:

Click on the image, title or Read More text to go to the Full article.

In our last article, we used Libre Draw to create a couple of Featured Images. In this article, we will use an image editor called Gthumb to quickly resize these images to create versions that are 800, 400 and 200 pixels wide.

Use Gthumb to resize and then crop your Image
Open the Gthumb image editor (available from the Debian Software Center if it is not already installed) and then select and open your featured image file. Click on the Edit Icon (paint brush) in the upper right corner.

Then click on the Resize button in the lower right corner.

The original image is 900 wide by 469 high. We want the image to be exactly 800 wide by 450 high. Click on the Height Minus sign to bring the height down to 450 High. The width is still 864. Click Accept. Then click on the Crop button which is to the right of the Resize button and click Maximize:

In this article, we will review how to use Libre Draw to create “Featured images” for your Community News articles. Each article on your Community News website should include what Joomla called a “Featured” Image. The Featured Image is used not only at the top of the article page, but also on our Community News Home page as the Leading Article Image and/or as the Intro Article image. A Featured article image is assigned to each News article when you create your News Article by clicking on the Images and Links tab in the Article Edit screen. Here you will see buttons to assign an Intro Image and a Full Article Image:

We first need to go to Content, Media and load the Featured Images into on of our images topic folders. Then when creating our news article, we click on the Images and Links tab. Then click on the Blue Select button to select the image we want to use for our Intro Image for this article. Then scroll down and click on the second Blue Select button to select the image we want to use for our Full Article image. To maintain the consistency of our News Page Layout, it is important that all Intro Images have the same width and height and that all Full Article images have the same width and height.