on performance reasons : you should familiarize yourself with image optimization.
f.e.: this image here: image1 is 524kb big
this image2 450kb etc. pp.
Since you are using the srcset option of enfold, you should ask yourself if increasing the compression level is not also an option for your images. Enfold offers a snippet for this; however, you would have to recalculate the thumbnails afterwards. Because the snippet only controls the compression during media upload.
for 55% compression instead of 0% ( Enfold let the quality level on 100 on uploading )
add_filter("avf_jpeg_quality", "avf_set_quality_mod", 9999, 1);
add_filter("avf_wp_editor_set_quality", "avf_set_quality_mod", 9999, 1);
function avf_set_quality_mod($quality) { $quality = 55; return $quality;}
This project was a conversion from an existing DIVI website.
Feel Positive Coaching ran by Fay Petcher is a holistic divorce and relationship coaching service. Fay is also an established Podcaster, Author and EFT Practitioner helping couples and individuals cope with narcissistic abuse, relationship trauma and infidelity.
The site was rebuilt in Enfold for ongoing support and performance features.
As part of the process the site was turned into a multi-page website from a one page design. Large padding and margins help give the site a modern – easy to scroll feel.
The logo and colour scheme were revised and entered into the Enfold theme control panel.
https://www.feelpositivecoaching.com/
The site scores 95/100 on mobiles in web vitals helping the site load quickly on all devices.
Performance stack:
Bespoke functions.php settings
WP-Optimize – Caching and HTML minification
EWWW WebP Conversion
Short Pixel thumbnail regenerator
Enfold Performance settings on
Bespoke .htaccess settings
Logo and Website designed by Think Jarvis Design and Marketing based in Swadlincote UK.
Another project to share with you.
https://www.mavericksecurityltd.co.uk/
Maverick Security Ltd
Maverick Security is a new startup Manned guarding (security guard) provider based in Derbyshire UK. They specialise in providing reliable security guards for business premises and events throughout the UK.
We were tasked with creating a simple recognisable logo that can be embroided and printed on clothing easily. The colour scheme was then transfered into Enfold for consistency.
The site has some bespoke performance settings including font preload and serving a different background image depending on the screen size. The site currently scores between 95/100 and 97/100 depending on the test run.
Performance stack:
Bespoke functions.php settings
WP-Optimize – Caching and HTML minification
EWWW WebP Conversion
Short Pixel thumbnail regenerator
Enfold Performance settings on
Logo and Website designed by Think Jarvis Design and Marketing based in Swadlincote UK.
I have updated this post to include newer performance figures – The cause and fix of the LCP score being high are here:
https://kriesi.at/support/topic/lcp-issue-and-font-file-sizes/
EDIT:
We had some issues getting Google to crawl the whole site (unrelated to rest of post). I have added links below to try and encourage Google to Index the entire site. I hope support do not mind! :) I will remove if it is successful.
Maverick Security – Manned Guarding Services
Gatehouse Duty – Security Guards
Festival Stewards and Event Security Staff
Door Supervisors for Pubs and Nightclubs
-
This reply was modified 4 years, 4 months ago by
thinkjarvis. Reason: Would really help the client temporarily
Is there a way for the image gallery widget to have a “load more” button to load more thumbnails into the gallery? I have a gallery with lots of images and I want the user to click “load more” to get more of them. I have the lazy load turned on, but I am looking for a button.
Hi,
Thank you for your patience, currently there is a caption for the lead gallery image that is hidden, #top .avia-gallery .avia-gallery-caption
but when you hover over the thumbnails the lead image container is not replaced it is overlayed with a larger thumbnail and the caption is not used. So I’m not seeing a good way to change this, I did come up with this css that sets all of the tooltips to the same location so they look like captions on hover, please try this code in the General Styling ▸ Quick CSS field or in the WordPress ▸ Customize ▸ Additional CSS field:
#top.postid-3431 .avia-tooltip.avia-tt {
top: 675px !important;
left: 31% !important;
background-color: transparent !important;
}
you could also add font size and color rules if you wanted, please see the screenshots in the Private Content area.
Best regards,
Mike
Hey Eefke,
Thank you for the inquiry.
Try to edit the blog posts element and select a different thumbnail in the Styling > Appearance > Select custom preview image size settings. You have to set the Preview Image Size settings to the second option first.
Best regards,
Ismael
Hi, thanks for your quick reply.
The masonry thumbnails are correct, it is the picture that opens when I click on one of the preview pictures.
I tried to add the filter to functions.php, but unfortunately the website stopped working.
Best regards,
Lothar
Hey emilconsor,
Thank you for the inquiry.
Where can we see the issue again? Please provide a direct link to the page containing the image.
Have you tried selecting a thumbnail in the Styling > Grid Settings > Select custom image size settings? You have to set the Portfolio Grid Image Size settings to the second option first.
Best regards,
Ismael
First, have you checked the box to load thumbnails locally?
under Content Blocker – Youtube – this is besides your question a thing to mention.
_______
what kind of link is it – does it lead to a lightbox with the video? can you show me the site it concerns?
Hey augenblende,
Thank you for the inquiry.
Are you trying to adjust the lightbox images used in the masonry element? If yes, then you can use this filter in the functions.php file to display the original image inside the lightbox instead of the masonry thumbnail.
add_filter("avf_alb_lightbox_image_size", function($size, $context) {
if($context = "avia_masonry") {
$size = "full";
}
return $size;
}, 10, 2);
The “large” thumbnail is used by default, which size can be adjusted in the Settings > Media panel.
Best regards,
Ismael
Is there a way to ensure that no matter the image size uploaded, they always get resized to the 1500 X 630 aspect ratio on both the blog element thumbnail as well as the actual blog post image?
Hello
We are having trouble with keeping the thumbnail size the same when using the Portfolio.
We originally loaded the site in 2018 and all the thumbnails were the same size. The portfolios that were added more recently are slightly different sizes and now the most recent one (the last on the page) is about half the height of the rest, regardless of what size image is uploaded as the feature image.
Link shared to page in private content.
We have tried numerous times and can’t work out why the size is different.
We are on the latest version of Enfold (Version 4.8.6.2) and WordPress (5.8.1)
Any suggestions please?
Thanks
Hi Nikko
Just a quick update:
I’ve deactivated the Plugin in question. I’ve removed the CSS you added to remove the padding on the Archive Thumbnails. Everything looks fine.
However, the Search still does not work with the Dropdown Taxonomies.
Is there anything else we can do?
Best
Christian
Hey Guenter,
Thank you for the inquiry.
Looks like you are using the Fullwidth Slider, which does not set the slide image as background. Are you referring to the Fullscreen Slider element? The theme is using the post_thumbnail_html filter to modify the html of the attachment or image and apply the wp-image-id class name. You can find the function in the enfold/framework/php/class-responsive-images.php -> add_attachment_id_to_img.
Best regards,
Ismael
I’d like to hide the thumbnail image of the large image in a gallery. I’ve seen this done on other Enfold websites but can’t seem to find an easy way to do it so I’m assuming I need to use CSS to hide the thumbnail?
Thank you
Hi, I’m using the blog post element on my blog page to display the blog posts. I have is set so that the “custom preview image size” is 1500 x 630 (featured large). However when I upload an image that is slightly taller than that ratio, 1500 x 861 for example, the thumbnail appears taller in size than the rest of the Blog thumbnail images that are 1500 x 630 ratio. It appears taller on the actual blog post as well (the blog layout in general options is also set to “featured large”.
How do I make it so that no matter what size image is uploaded for the blog post, the blog post element thumbnails and image that shows on the actual blog post show the 1500 x 630 ratio?
Hi Yigit,
Thanks for that, hopefully it can be implemented.
I also have another suggestion along similar lines:
Currently, depending on the ALB element you are using, you select an image size in one of two ways: 1. When you choose an image from the media library, you then select the thumbnail size to use (eg: using the Image element). 2. You select the image size on the Styling tab (eg: when using the Full Width Slider element).
I’m not sure of the logic behind these two different ways, but I was thinking it would be nice to keep it all consistent and move all image size selections to the Styling tab of each element. Not only would it make for a more consistent experience, it would also hugely simplify things when you need to swap out an image size.
For example take this scenario – I want to simply change the thumbnail size used for an image, without swapping the actual image (such as if a layout changes from 1/2 column to 1/5 column and now I want to use a smaller size). Currently on a Full Width Slider where image settings are on the Styling tab I can do this in just 3 clicks – styling tab, image size, done.
But if I want to change the thumbnail size used for a standard Image element, I have to click on the image, scroll through and find the exact same image again in my entire media library (can be REALLY time consuming in large libraries), select that image, then select the size to insert, then click done. Way more time involved.
So I hope you can understand the suggestion to use the Styling tab of every element as the way to select image thumbnail sizes.
Thanks for always considering our suggested improvements.
Tim
-
This reply was modified 4 years, 6 months ago by
THP Studio.
Hi jaroljmek,
Thanks for giving us admin access.
I have added this CSS code in your Quick CSS:
.post-type-archive-property #wrap_all .ee-search-form__submit {
height: 48px;
cursor: pointer;
}
.post-type-archive-property #wrap_all .elementor-post__thumbnail {
padding-bottom: 0;
}
Please review the page.
Best regards,
Nikko
Hey Annemarie,
Thank you for your patience, when the image sizes are changed or added it doesn’t take effect until a new image is uploaded, so you should Regenerate the images for the changes to be applied to the old images. If you are sure a size will not be needed from any of your existing images then you could just move forward without regenerating.
I hope this makes sense and helps.
Best regards,
Mike
Hi there, I’m seeing the above codde on all pages I’m trying to edit.
I’m running the latest theme, WP and using php 7.4.
What I see is the page heading, then something like:
[av_three_fifth first av_uid='av-us9ewl']
[av_gallery ids='4643,4642,4640,4641,4639,4638' style='thumbnails' preview_size='portfolio' crop_big_preview_thumbnail='avia-gallery-big-crop-thumb' thumb_size='portfolio' columns='5' imagelink='lightbox' lazyload='avia_lazyload' av_uid='av-35oe3s' admin_preview_bg='']
Happy to supply a link.
@Ismael,
Your wizardry worked again! I used this:
$size = strpos( $blog_style, 'big' ) ? ( ( strpos( $current_post['post_layout'], 'sidebar' ) !== false ) ? 'full' : 'full' ) : 'square';
I did not have to regenerate thumbnails… when the posts loaded they were initially disproportionate, but then they snapped to the proper proportions… and it looks like it stayed that way.
Note: Under blog layout > single post style, I have it set to single post with big preview image.
Thank you all!
Tim
Hi,
The shop_catalogue thumbnail, which is the default thumbnail used in the product grid, has a maximum width of 300px by default. And as we mentioned above, you could change it by adjusting the Thumbnail width option in the Appearance > Customize > Woocommerce > Product Images panel. Did you try to adjust the width value?
Best regards,
Ismael
Hi,
@hypergolica (Tim): Setting the thumbnail size or name to “full” should return the source image with the original dimension or size (unresized/uncropped). You should replace the above line with this.
$size = strpos( $blog_style, 'big' ) ? ( ( strpos( $current_post['post_layout'], 'sidebar' ) !== false ) ? 'full' : 'full' ) : 'square';
.. or with this:
$size = strpos( $blog_style, 'big' ) ? 'full' : 'square';
Thanks @Guenni007 for the info.
Best regards,
Ismael
Hi there, I’ve got this error also.
I’m running the latest theme, WP and using php 7.4.
What I see is the page heading, then something like:
[av_three_fifth first av_uid='av-us9ewl']
[av_gallery ids='4643,4642,4640,4641,4639,4638' style='thumbnails' preview_size='portfolio' crop_big_preview_thumbnail='avia-gallery-big-crop-thumb' thumb_size='portfolio' columns='5' imagelink='lightbox' lazyload='avia_lazyload' av_uid='av-35oe3s' admin_preview_bg='']
Happy to supply a link.
Hi,
Thank you for the info.
Looks like you are now using larger images for the thumbnails (see private field). By selecting or by using a larger image size, you will actually improve the quality of the thumbnails.
Best regards,
Ismael
but allways think of : after changing these sizes – a regeneration of the calculated thumbnails had to be done ( see this again: Then regenerate thumbnails … )
You can read here about the influence of some parameters to those changed or new sizes: https://developer.wordpress.org/reference/functions/add_image_size/ – especially the crop ( true, false ) ;) seems to be important.
Hi,
Thank you, for the images with the borders please try this css:
#main .av-magazine-thumbnail {
border: 0px none;
}
I see other borders between the elements but I believe you want to retain these.
After applying the css, please clear your browser cache and check.
Best regards,
Mike
Hi Ismael, I am not trying to increase the size of the image but to increase the quality of the thumbnail. The top section called Private Appointments images are directly entered on the page in columns, these do not display as good quality as the ones below that are fed via the post system.
We would like the images to be consistent so they display at the best quailty no matter how they are placed on the page please.
With regards, Helen
Dear All,
The more I look for solutions, the more I find it hard to believe that there isn’t a simple option in the ‘blog layout’ section to ‘show featured image as a responsive full size’. ?
Also, here https://kriesi.at/support/topic/full-size-featured-image-in-single-blog-page/ it says:
“You can actually modify the includes > loop-single.php file in your child theme to override the default thumbnail settings. Just look for this code around line 66:
*/
$size = strpos($blog_style, 'big') ? (strpos($current_post['post_layout'], 'sidebar') !== false) ? 'entry_with_sidebar' : 'entry_without_sidebar' : 'square';
Set the default thumbnail sizes from “entry_with_sidebar” and “entry_without_sidebar” to “full” or “extra_large”.”
BUT, in my includes directory, there isn’t any file named loop-single.php. ?
Hi,
Thank you for the update.
Are you trying to increase the image size of the product thumbnails? Try to go to the Appearance > Customize > Woocommerce > Product Images panel and adjust the value of the Thumbnail width option.
Please check the following documentation for more info.
// https://docs.woocommerce.com/document/image-sizes-theme-developers/
Best regards,
Ismael