Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #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?

    #1191570

    Enfold 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_link

    How 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.

    #1191572

    how 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_choose

    add_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' );
    #1191591

    First 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

    #1191668

    That 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;
    }
    #1193760

    Thank you for the advice.
    I will give it a try.
    Regards, Michael

    #1288266

    I 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 Michael

    #1288490

    Hi 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

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.