Avada theme registers thumbnails for many elements and sometimes some of the thumbnails do not necessarily fit your needs and you want to tweak the width and height. Now its not possible to change those thumbnails size from the provided Theme Options of Avada theme but in this tutorial, I will show the list of thumbnails that Avada theme registers and how to change a specific thumbnail from the list.
Below is the complete list of Avada thumbnails:
- Blog Large Layout => ‘blog-large’, 669, 272
- Blog Medium Layout => ‘blog-medium’, 320, 202
- Recent Posts with Standard Layout => ‘recent-posts’, 700, 441
- Recent Posts Thumbnail on Side Layout => ‘portfolio-five’, 177, 142
- Recent Posts Widget => ‘recent-works-thumbnail’, 66, 66
- Portfolio Full Layout => ‘portfolio-full’, 940, 400
- Portfolio One Column Layout => ‘portfolio-one’, 540, 272
- Portfolio Two Column Layout => ‘portfolio-two’, 460, 295
- Portfolio Three Column Layout => ‘portfolio-three’, 300, 214
- Portfolio Five Column Layout => ‘portfolio-five’, 177, 142
The above list is the complete names of Elements that Avada theme uses and registers the thumbnail along with their width and height. Now in order to change the width and height of any thumbnail from the above list, below is an example code which can be used in functions.php file of a Child Theme to change a thumbnail size.
Once the code is added, its required to install the Regenerate Thumbnails plugin and running it from Dashboard -> Tools section. Without this last step, the changes won’t take effect for old images of the website. The above example code will change the thumbnail size of the Recent Posts element when using Thumbnail on Side layout. You can change the names of thumbnail in the above code with the above-provided list (the bold part).
Removing a specific thumbnail:
Removing a thumbnail is pretty much the same process except that you need a tweak to the above-mentioned code. In case of completely removing a thumbnail, the below code can be utilized in functions.php file of your child theme.
Thanks for sharing this. It worked perfectly.
Awesome :-)
Hi, unfortunately, the code isn’t working on my side.
I want to change the portfolio-three image size with 300x300px and I’ve added your code with current thumbnail name but it is still showing the old sizes and not updated.
http://prntscr.com/j55vtl
Make sure that you are using Fixed image size in the Portfolio Element + make sure you have child theme active and then run the Regenerate Thumbnails.
Yup! I sure that I am using a child theme and added the above code snippet for portfolio-three and also regenerated the thumbnails but no luck.
Also, I haven’t found any code for image size inside Avada main theme ( I am using the latest version )
Worked like a charm. Been looking for something like this for a while, thanks a lot.
Hi Muhammad,
I think we might have worked together through Avada’s technical support.
Great article! This is exactly what I am looking for.
However I cant get to make it work somehow.
When I add the code first I get the code shown above my website, see screen shot here: https://prnt.sc/lxhvyg
Then I Clean the Cache and the website totally stops working with the following message being shown:
Screenshot here: https://prnt.sc/lxhx9x
I am using WP Rocket for caching.
Can you please help me with this?
Thanks a lot!
Martin
Great Article. Quite precise and clear
my image size is 2000*2000 but avada theme take 300*200…image get blur…how to solve that
For which exact element are you using the 2000*2000 image? 300×200 is used by Blog Medium Layout.