How to configure the slideshow and category images

This section groups all settings related to images used by PrestaBlog.

You will find settings for:

• article images
• category images
• slideshow images
• associated product images
• author images

These settings define the dimensions and formats used when uploading new images.

To update already published images according to new settings, a complementary tool is available in Tools > Regenerate Images.

Image size configuration and the regeneration tool work together: it is recommended to define these settings as soon as the blog is installed, or to regenerate images if adjustments are made on an existing blog.

How to Identify Image Width

When configuring image sizes, it is important to know the width actually used by your theme in the blog listing.

The following procedure allows you to easily obtain this information, directly from the front-office:

1. Go to your blog's homepage, where the article listing is displayed
2. Take the first displayed article
3. Right-click on this article's title
4. Click on "Inspect"

The development tool opens and generally selects the article title. In the code, locate the block just above the title, which contains the image. This block is identified by class="block_top".

Hover over this block in the development tool. The browser then directly displays the block dimensions in pixels on the screen. The displayed width corresponds to the base width used for the image in the listing.

Consider Hover Zoom

Some themes apply a zoom effect on hover for images in listings.

The measured dimension corresponds to the initial display size. On hover, the image is enlarged. To keep a sharp image and avoid any pixelation, it is recommended to use a larger image while respecting proportions.

For example, if the measured width is 400 pixels:

• multiply by 1.5 gives 600 pixels
• multiply by 2 gives 800 pixels

This method allows you to preserve image proportions while ensuring good quality, including on hover.