-
AuthorPosts
-
March 9, 2020 at 4:18 pm #1191559
I’ve been using the Enfold theme for a while now, but I still have problems with the blurry display of images.
I have already read some support articles, but unfortunately I can’t figure it out.I want to sharply focus an image in a ½ column and link it to the lightbox view.
In the lightbox view I would like to display the image as large as possible and of course also in a sharp resolution.But if I put the picture in the media library e.g. with the size 800×500, then the representation for the ½ view will be shrinked and therefor the image is blurred.
How can I make sure that the image is always displayed with maximum sharpness?
March 9, 2020 at 4:47 pm #1191570Enfold on Default takes for the lightbox-images not the full but the large images. These image formats are defined in functions.php on lines 174ff
( i just removed the comments) just for info:$avia_config['imgSize']['widget'] = array('width'=>36, 'height'=>36); $avia_config['imgSize']['square'] = array('width'=>180, 'height'=>180); $avia_config['imgSize']['featured'] = array('width'=>1500, 'height'=>430 ); $avia_config['imgSize']['featured_large'] = array('width'=>1500, 'height'=>630 ); $avia_config['imgSize']['extra_large'] = array('width'=>1500, 'height'=>1500 , 'crop' => false); $avia_config['imgSize']['portfolio'] = array('width'=>495, 'height'=>400 ); $avia_config['imgSize']['portfolio_small'] = array('width'=>260, 'height'=>185 ); $avia_config['imgSize']['gallery'] = array('width'=>845, 'height'=>684 ); $avia_config['imgSize']['magazine'] = array('width'=>710, 'height'=>375 ); $avia_config['imgSize']['masonry'] = array('width'=>705, 'height'=>705 , 'crop' => false); $avia_config['imgSize']['entry_with_sidebar'] = array('width'=>845, 'height'=>321); $avia_config['imgSize']['entry_without_sidebar'] = array('width'=>1210, 'height'=>423 ); $avia_config['imgSize'] = apply_filters('avf_modify_thumb_size', $avia_config['imgSize']);
these image-sizes are generated from Enfold on uploading it to media-library.
WordPress itself generates 3 additional image-sizes:Thumbnail (on default : 150px square or 80px)
Medium (on default : maximum 300px width and height)
Large (on default : maximum 1024px width and height)
Full (full/original image size you uploaded)
But: Enfold has some filter to change the format of this image for the different uses.
One is: avf_avia_builder_helper_lightbox_size
Another one is: avf_avia_builder_masonry_lightbox_img_size
Or: avf_avia_builder_gallery_image_linkHow to use the filter : over child-theme functions.php:
function change_lightbox_size() { return "full"; } add_filter('avf_avia_builder_helper_lightbox_size','change_lightbox_size', 10);
function avia_change_masonry_thumbnail_link($size){ return "full"; } add_filter('avf_avia_builder_masonry_lightbox_img_size', 'avia_change_masonry_thumbnail_link', 10, 1);
function avia_change_gallery_thumbnail_link($link, $attachment, $atts, $meta){ $link = wp_get_attachment_image_src($attachment->ID, "full"); return $link; } add_filter('avf_avia_builder_gallery_image_link', 'avia_change_gallery_thumbnail_link', 10, 4);
do not forget to empty all caching plugins and if you merge js and css files in Enfold to regenerate these files.
March 9, 2020 at 4:57 pm #1191572how to influence the lightbox size itself:
.mfp-image-holder .mfp-content { max-width: 80vw; }
how to avoid downscaling when column only can show a scaled version of an image ( not the lightbox )
you can not avoid scaling on responsive case – you only can hope that an image in the srcset fits best to the given space for it.
But you can create your own image-size for best fitting on non responsive case.
…
filter: image_size_names_chooseadd_image_size( 'new-size', 2000, 500, true ); function my_custom_sizes( $sizes ) { return array_merge( $sizes, array( 'new-size' => __( 'New Size' ), ) ); } add_filter( 'image_size_names_choose', 'my_custom_sizes' );
March 9, 2020 at 5:19 pm #1191591First of all: thank you very much for the fast repley and the very complex answer.
Unfortunatly I dont understand a word.
I am just a user of the template, but I am not familiar with php or css.I now what it means to open the functions.php and edit or replace some lines, but thats it.
I dont know the meaning of the changes.Is there a chance to get it solved somehow with deeper knowledge of the code?
Regards, Michael
March 10, 2020 at 1:02 am #1191668That is the reason why i explained the code.
Blurry Images can have a lot of reasons. One is the source image. If this is not blurry : the common reason is the the used image in the frontend is a recalculated image. That can have more than one reason – one is the responsive reaction on the give space.
so if you put in a 1500px wide image and it is resized to 900px because there is no space for it – it could cause blurry results.so first try this in child-theme functions.php:
function change_lightbox_size() { return "full"; } add_filter('avf_avia_builder_helper_lightbox_size','change_lightbox_size', 10);
refresh all cachings and look what happens to the lightbox image.
the size of the lightbox is configured via:
in Quick Css:.mfp-image-holder .mfp-content { max-width: 80vw; }
March 17, 2020 at 11:18 am #1193760Thank you for the advice.
I will give it a try.
Regards, MichaelMarch 15, 2021 at 1:04 pm #1288266I am sorry to bother you again, but I have still problems with blurry images.
My images contain small text, which appears blurry if the image is cropped or scaled.
So all I need is the correct image size to show sharp images on my webpage.Please tell me the Enfold preferred image size if I put the image in a 1/2 column and the preferred size if I put it in 1/1 column to avoid scaling or copping.
Thank you,
regards MichaelMarch 16, 2021 at 12:38 pm #1288490Hi Michael,
If you have added this code in functions.php as @Guenni007 posted:
function change_lightbox_size() { return "full"; } add_filter('avf_avia_builder_helper_lightbox_size','change_lightbox_size', 10);
then Enfold will just use the size you uploaded (without this code then the limit in size is 1030px in both height and width).
I think what you need is to adjust the image’s dpi which is done via image editing software like photoshop.
Also, this article might help in understanding images in the web: https://vsellis.com/understanding-dpi-resolution-and-print-vs-web-images/Best regards,
Nikko -
AuthorPosts
- You must be logged in to reply to this topic.