Tagged: 

Viewing 22 posts - 1 through 22 (of 22 total)
  • Author
    Posts
  • #703782

    Hi,

    the images in the blog are good but I don´t like how the images are cropped in the single post and I would like to have more control about it. For me it makes no sense, that in the overview the images are not cropped and in original size and in the single post they are cropped in 1040 x 391px. The image that is used is by default 845 x 321px (attachment-entry_with_sidebar size-entry_with_sidebar wp-post-image)

    The aim in the single post:
    like in the blog no scaling or cropping => “attachment-no scaling size-no scaling wp-post-image”
    No lightbox of the single-post images

    How can I manage this with preferences, css or other ways?
    Thanks

    Blog-preferences:
    Blog styling: elegant
    Single post: with big preview image and sidebar

    #703936

    Hey AWZ,

    For changing image sizes you can refer on this thread: https://kriesi.at/support/topic/enfold-image-sizes/

    As for removing lightbox in single post try adding this code in functions.php:

    function remove_lightbox(){
    ?>
      <script>
        jQuery(window).load(function(){
          jQuery('.single-post .lightbox-added .overlay, .single-post .lightbox-added .image-overlay').remove();
          jQuery('.single-post .lightbox-added img').unwrap('lightbox-added');
    
        });
      </script>
    <?php
    }
    add_action('wp_footer', 'remove_lightbox');

    Let us know if it works :)

    Best regards,
    Nikko

    #704219

    Hi Nikko,

    thanks for the two parts.

    1) IMAGESIZE
    After some problems – a code of the child-theme function overwrote all changes – it works. I delete this code and it works (after reupload):

    function ava_image_sizes() { 
    add_image_size('entry_with_sidebar', 845, 321, array('center', 'top'));
    add_image_size('entry_without_sidebar', 845, 321, array('center', 'top'));
    }
    add_action( 'after_setup_theme', 'ava_image_sizes', 11 );

    So the last things to this topic are:
    a) How can I integrate the following line in my child-theme to protect in case of theme-updates? If I insert the whole array or parts of it in the function of the child theme, the website crashes.
    $avia_config['imgSize']['entry_with_sidebar'] = array('width'=>1040, 'height'=>1040 , 'crop' => false); // big images for blog and page entries

    b) How can I crop the images in the blog overview? The default is original size.

    2) SINGLE POST IMAGE & LIGHTBOX
    Doesn´t work. Your code snippet crashes the website….

    #705200

    Do you have ideas to that?

    #705950

    Hi,

    1.) Please refer to this thread: https://kriesi.at/support/topic/override-the-global-avia_config-within-child-functions-php/ or you may want to use Simple Image Sizes plugin.

    1.b) Are you using a default editor and use it as a blog? or are you using Advance Layout Builder and the blog module?

    2.) I have tested it on my end but since on your end it’s not working Please post us your login credentials (in the “private data” field), so we can take a look at your backend.

    Login credentials include:

    • The URL to the login screen.
    • A valid username (with full administration capabilities).
    • As well as a password for that username.
    • permission to deactivate plugins if necessary.

    Also I also request for ftp access, since it’s very critical to modify functions.php on wp theme editor.

    Best regards,
    Nikko

    #707862

    Hi,

    Thanks.

    1) IMAGESIZE
    I´ve checked it out. This code in the child function doesn´t “overwrite” the functions code of the theme.

    function avia_change_image_size_array() {
    global $avia_config;
    $avia_config['imgSize']['entry_with_sidebar'] 	= array('width'=>1040, 'height'=>1040 , 'crop' => false);
    }
    add_action( 'init', 'avia_change_image_size_array');

    b) BLOG OVERVIEW
    I use a normal page with a content element called blog posts.

    2) Ok. I´ve had the site on localhost. Now it´s uploaded to our testserver.

    Aim & Conclusion:
    Blog overview (aktuelles): images are not cropped and in fullsize = > here it would be good to crop them and reduce it to a smaller size
    Single post: = > no cropping and reduce it to a size, that shows in a good quality / solved but only in the enfold functions.php not in child function

    #709003

    Hi,

    1.) Please install and activate the following plugin then go to the Settings > Media panel. https://wordpress.org/plugins/simple-image-sizes/

    2.) Edit the blog posts element and then set the Preview Image Size to the second option. A new option will appear that will let you select the thumbnail size for the blog overview page. For the actual post page, after installing the suggested plugin above, go to the Settings > Media panel then adjust the size of the “entry_with_sidebar” thumbnail. Regenerate the thumbnails afterwards.

    Best regards,
    Ismael

    #709110

    Hi Ismael,

    1) IMAGESIZE
    Installed. It works for the single-post-thanks. You have to generate the thumbnail(s) new or upload it again.

    b) BLOG OVERVIEW
    Preference: Elegant, Advanced layout editor. Don´t know, what for a size of images to edit there. By inspecting it: class=big-preview single-big and inside class=attachment-no scaling size-no scaling wp-post-image
    Do you have a final solution?

    2) SINGLE POST IMAGE & LIGHTBOX
    Thanks. Don´t know what you mean with second option, but it works for me. Last thing to that is: lightbox. How can I deselect the lightbox here? The first code snipped crashed the website. Do you have a final solution?

    Best regards Sven

    #709657

    Hi!

    1.b) It using is the same thumbnail, “entry_without_sidebar” or “entry_with_sidebar”.

    2.) Do you want to disable the lightbox? Please go to the Enfold > Theme Options panel and then disable the Lightbox Modal Window option.

    Best regards,
    Ismael

    #709685

    Thanks Ismael,

    1b) BLOG OVERVIEW
    Nope! The thumbnails of the single post and the overview are completly different. This was the beginning of this thread and I don´t understand the programming until now. By default In the blog overview (Preference: Elegant, Advanced layout editor) the images are not cropped and imagesize is not limited. By default in the single post with sidebar the images are cropped to 1040 x 391px and the imagesize is limited to 845 x 321px. Result: pixelated, unfitting details. Maybe the converse would make sense.

    We have found a solution for the single post (plugin). Do you have a solution for the thumbnails in the blog overview?

    2) LIGHTBOX
    Doesn´t work! Check it out, you have the credentials.

    Best regards Sven

    #710562

    Hey!

    1.) It’s not using the default thumbnail because you set the blog posts’ preview image size option to “No Scaling”.

    // REMOVED

    2.) The lightbox is disabled. Please remove browser cache or hard refresh before testing the page. You can check it here.

    // REMOVED
    // REMOVED

    Cheers!
    Ismael

    #710606

    Good morning,

    1) You´ve right! Long time ago – it was set in the blog element. Thanks & solved!

    2) Yes it is disabled. But no result on that. I´ve deleted the cache and tried another browser. Please look at the private content.

    Best regards
    Sven

    #711793

    Hey!

    2.) Do you want to disable the lightbox? This is what you said in your previous post. And the lightbox is already disabled so I’m a bit confused.

    Last thing to that is: lightbox. How can I deselect the lightbox here?

    Best regards,
    Ismael

    #711878

    Good morning,

    2) Yes of course as I wrote in all posts! Deselecting of the lightbox has no effect and doesn´t work! The lightbox isn´t disabled. Please look at the links in the private content of the last thread and in this thread again.

    #712712

    Hi,

    The lightbox is disabled. If you click on the image, it will redirect to the actual image instead of opening the lightbox.

    Best regards,
    Ismael

    #712817

    Ok, than we have a definition problem. :)

    Lightbox is for me: an image as a preview or thumbnail is displayed on the page. By clicking on it, it displays the same image or a gallery in a (normally) higher resolution.
    https://en.wikipedia.org/wiki/Lightbox_(JavaScript)

    So: The Lightbox Modal Window in the enfold theme by switching on / off: what is the sense of it?

    If I don´t want a lightbox inside the page – by clicking on the image in the page nothing happens – what can I do to realize it?

    In the beginning Nikko send me this code, but it crashes the website. But I think it was the correct way and the beginning of the solution:

    function remove_lightbox(){
    ?>
      <script>
        jQuery(window).load(function(){
          jQuery('.single-post .lightbox-added .overlay, .single-post .lightbox-added .image-overlay').remove();
          jQuery('.single-post .lightbox-added img').unwrap('lightbox-added');
    
        });
      </script>
    <?php
    }
    add_action('wp_footer', 'remove_lightbox');
    #713512

    Hi!

    Sorry if I missed this thread, since you said that the code I gave crashed the site though it works properly on my end, can I request for ftp access? I’m a bit hesitant to test the code I gave to your site since if it crashes I can’t reverse it.

    Regards,
    Nikko

    #713592

    Looook.

    #714286

    Hey!

    Lightbox is for me: an image as a preview or thumbnail is displayed on the page. By clicking on it, it displays the same image or a gallery in a (normally) higher resolution.
    https://en.wikipedia.org/wiki/Lightbox_(JavaScript)

    Yes, that is the “lightbox” but this is not happening in the post page. Right now, if you click on the post image, it will redirect to the actual image instead of opening a “lighbox” container, which means that the “lightbox” script is disabled. If you want to completely disable the image link, add this css code.

    .big-preview.single-big a {
        pointer-events: none !important;
    }

    Regards,
    Ismael

    #714383

    Hi!

    I have tried to add the code I gave you previously and it doesn’t crash your site, however, the classes have changed so I have to adjust the code, I have added this code to your functions.php and it’s now working properly:

    function remove_lightbox(){
    ?>
      <script>
        jQuery(window).load(function(){
          jQuery('.single-post .lightbox-added .overlay, .single-post .big-preview.single-big a .image-overlay').remove();
          jQuery('.single-post .big-preview.single-big a img').unwrap('lightbox-added');
    
        });
      </script>
    <?php
    }
    add_action('wp_footer', 'remove_lightbox');

    Let us know if it’s good.

    Cheers!
    Nikko

    #714799

    Hey Ismael and Nikko,

    Thank you very much for your helpful input = solved.


    @Ismael

    Ok, understand the difference. So it´s more like a pop-up image. It makes no sense too at this place :) It works and I didn´t knew this css solution. Thanks! Only one small disadvantage: Because of the same class of the image (big-preview.single-big) in the post and in the overview, it blocks the link to the post via image too.


    @Nikko

    It works now! It´ a good solution for that, because in the preview you have the image-link and in the post not. Thanks. Do you know, why this code works delayed? At first the image is with a link, after a second not. Maybe it´ because of the code is in the child-theme function…

    Best regards
    Sven

    #715860

    Hi,

    glad we could help. Let us know in a new ticket if you have some more questions related to the theme. We are happy to assist you.

    Best regards,
    Andy

Viewing 22 posts - 1 through 22 (of 22 total)
  • The topic ‘Blog Image & Single Post Image Cropping’ is closed to new replies.