Custom Image Sizes

By default Adverts has set of fixed (displayed on ads list and in the ad details) image sizes that should fit most of the themes, however in some situations, you might want to change the image sizes to fine tune them for your theme, this article will explain how to do that.

Note that this article is for WPAdverts 1.2 and newer only. In older versions, this will not work.

Set New Image Sizes

In WPAdverts the images sizes can be set from wp-admin / Classifieds / Options / Core / Gallery panel, you should see there a screen like on the image below:

Check just the Image Sizes section, there are 3 items:

• Adverts Gallery (adverts-gallery) default size 650×350 px, this image size is used in the Gallery on Advert details page.
• Adverts List (adverts-list) default size 300×190 px, this is an image visible in [adverts_list] shortcode.
• Upload Thumbnail (adverts-upload-thumbnail) – default size 150×105 px, this is a tiny image you can see after uploading a file (i am guessing most of the time you will not want to change it).

Each image size has 3 options: max-width, max-height and crop. The crop option determines if the images will be cut to exact max-width and max-height dimensions or will the image be cut to maintain correct aspect ratio.

Developer Note: max-width, max-height and crop params are actually just params that will be passed to add_image_size() function, for more details please see add_image_size() function documentation.

To save changes click “Update Options” button.

Regenerate Thumbnails

In WordPress when the image is uploaded, media library automatically resizes the image to all registered sizes. This means that despite the sizes have been changed the images are still in old sizes.

The best way to change this is to use free Regenerate Thumbnails plugin. The plugin will run a script which will resize all your uploaded images to new sizes (this might take a while but does not require much work).

Apply Changes in CSS File

The last step is to apply changes in the theme CSS the best way to do that is to go to wp-admin / Appearance / Customize / Additional CSS panel and add the code there.

The changes in Additional CSS panel will not be overwritten on theme or plugin update.

The CSS code below will change image sizes you just need to make sure to change widths and heights to your required sizes.

/* CSS For Images in Upload Form */
.adverts-form .adverts-gallery-uploads .adverts-gallery-upload-item {
    width: 150px;
    height: 105px;
}
/* CSS For Images on Ads List */
.adverts-list .advert-item {
    width: 300px; 
}
.adverts-list .advert-img {
    height: 190px; 
}
/* CSS For Images on Advert Details pages */
.wpadverts-slide, 
.wpadverts-slide img {
    height: 350px;
}

Note, for Advert Details pages only height is set, this is because usually, you will want the image to take 100% of the available width.

Now when you refresh your site you will see that your pages have images in new sizes.