Merhabalar,
Her Enfold sitesinde 100 uzerinden 95-97 arasi sonuc alan @thomasjarvisdesign assagidaki eklentileri kullandigini bahsetti:
WP-Optimize – Caching and HTML minification
EWWW WebP Conversion
Short Pixel thumbnail regenerator
Enfold Performance settings on
Lutfen bu gonderiyede goz atin – https://kriesi.at/archives/scoring-100-100-in-google-pagespeed-insights-gtmetrix-pagespeed-and-yslow
Regards,
Yigit
Ismael, you are the man! Thanks a lot. That is exactly what I was searching for. I changed the opacity to 1, thanks for the line in the code. How could I set the size of the linked overlay picture to original or ‘large’? Right now only the thumbnail (80×80) is loaded. Can I add a line for the size like that:
$config["content"][$counter]['attr']['overlay_size'] = 'large';
Or do I have to add something to the last line where the attachment is loaded?
All the best, Daniel
Hi,
Thank you for the clarification.
Unfortunately, this is not possible because the default value of the overlay settings would be different for each element or for each page. It is only possible for settings in which the value would be the same for every element. For example, in the slider’s Styling > Slideshow Image Size settings, we could set the “Large” thumbnail as the default option.
You can try this filter in the functions.php file to automatically apply the same slider image as the custom pattern value.
add_filter("avf_slideshow_config", function($config) {
$counter = 0;
foreach ($config["content"] as $slider) {
$config["content"][$counter]['attr']['overlay_enable'] = 'aviaTBaviaTBoverlay_enable';
$config["content"][$counter]['attr']['overlay_opacity'] = '0.5';
$config["content"][$counter]['attr']['overlay_pattern'] = 'custom';
$config["content"][$counter]['attr']['overlay_custom_pattern'] = wp_get_attachment_image_url($slider['attr']["id"]);
$counter++;
}
return $config;
}, 10, 1);
Best regards,
Ismael
I am having trouble with the Portfolio Grid element on two different pages on my website.
Suddenly this week I noticed that there is now an unwanted space gap between the rows of the grid. However, if the browser window is resized, the gap disappears for the viewing session. The resizing only applies to the visible part of the page. When closing the browser and returning to the same page, the extra space comes back.
I have tested this on Firefox, Safari and Chrome with the same results.
I have also tried using different thumbnail sizes but that does not solve the problem.
The theme is version 4.8.6.5.
Thank you.
-
This topic was modified 4 years, 6 months ago by
stickinc.
Usually I set up the post module on a site to grid 3 collums. Which works fine on a laptop. On my phone, I get one collumn, which also makes sense. However om my tablet in portrait mode the layout is messed up. I get an alternating 1 post bigger thumbnail in a row and then two posts next to eachother > one post > two posts… etc…
—
When I use the masonry module, this doesnot happen and all rows are the same.
What can I do to achieve the same result on my tablet? In other words nicely algined rows of two posts each?
Hey Ivana,
Thank you for the inquiry.
The theme automatically adjusts the compression level of the uploaded images, which could lead to increase in file size. You can adjust the default quality by using this filter in the functions.php file.
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 = 65; // compression level what you like in percent
return $quality;
}
Quality is set to 100 by default. And if you want to prevent the generation of multiple images or thumbnails, please check the following thread.
// https://kriesi.at/support/topic/enfold-image-sizes-3/#post-1109028
// https://kriesi.at/support/topic/portfolio-grid-alignment-issues/#post-1306849
// https://kriesi.at/support/topic/how-can-i-delete-all-enfold-image-sizes/
Best regards,
Ismael
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, 5 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, 7 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.