0

I am updating a Wordpress blog that I started over 20 years ago and I am using a clickable Featured Image for all my posts. Unfortunately, most of my images were sized by 1999 standards and many are 640px width, which when clicked to show the full image, rather than filling the screen shows even smaller than the thumbnail used by the theme.

I need them to display as big as possible (filling the width when it is landscape / height when it is portrait) showing their original aspect ratio and centred both vertically and horizontally

Example of what I want to achieve

I have already added code (provided to me) to make the Featured Image clickable so it can open on a Light Box, what I am missing is how to make the image show on full screen rather than it’s original size.

    add_action('wp_footer', 'dbc_open_featured_image_in_lightbox');
    add_action('wp_enqueue_scripts', 'dbc_featured_image_in_lightbox_register_magnific_popup', 11); // Load Magnfic Popup (priority > 10 to avoid triggering Divi's child theme detection)
    if (!function_exists('dbc_open_featured_image_in_lightbox')) {
    function dbc_open_featured_image_in_lightbox() {
        ?>
        <script>
        jQuery(function($){
            $featured_img = $('body.single article.post .et_post_meta_wrapper > img');
            $featured_img.wrap('<a class="et_pb_lightbox_image"></a>');
            $featured_img.each(function(){
                var img_url = $(this).attr('src');
                <?php if (apply_filters('dbc_open_featured_image_in_lightbox_use_fullsize_image', false)) { ?>
                    img_url = img_url.replace(/-\d+x\d+(?=\.(png|jpe?g|gif|bmp|webp))/i, '');
                <?php } ?>
                $(this).parent().attr('href', img_url);
            });
        });
        </script>
        <?php
    }
}

function dbc_featured_image_in_lightbox_register_magnific_popup() {
        if (!defined('ET_BUILDER_URI') || !defined('ET_CORE_VERSION') || version_compare(ET_CORE_VERSION, '4.10', '<')) { return; }
    wp_enqueue_style('dbc-featured-image-magnific-popup', ET_BUILDER_URI.'/feature/dynamic-assets/assets/css/magnific_popup.css', array(), ET_CORE_VERSION);
    wp_enqueue_script('dbc-featured-image-magnific-popup', ET_BUILDER_URI.'/feature/dynamic-assets/assets/js/magnific-popup.js', array( 'jquery' ), ET_CORE_VERSION, true);
}

I have found a few posts with code on how to do it but my problem is that I am not code savvy and I wouldn’t know how to incorporate it within the one I already have, unless there is a way to do it using CSS :)

Daniel Beck
  • 20,653
  • 5
  • 38
  • 53
JustJo
  • 1
  • 1
  • There are many ways to do this, but we can’t guess which one is going to work in the code you haven’t shared. Give us a code example to work with. – Daniel Beck Mar 09 '23 at 14:33
  • Daniel, I have added the code I missed this morning. It’s my first time here so I apologize. – JustJo Mar 09 '23 at 19:43
  • so it looks like you added your update as an answer to the question, which would be confusing for future users; I've gone ahead and edited your question to include that code and flagged the answer for deletion. For next time, you can always change the text of your question with updates (there's an "edit" link in a row with others at the bottom of the question text) – Daniel Beck Mar 09 '23 at 20:01
  • As penance for playing the role of the procedural police, I can offer a partial answer: it looks like your code wraps the image in a '`.et_pb_lightbox_image`' classname you could use as a CSS target. The behavior you want is that of `background-size: contain` but since you're not working with a background image: https://stackoverflow.com/questions/11670874/is-there-an-equivalent-to-background-size-cover-and-contain-for-image-elements – Daniel Beck Mar 09 '23 at 20:07
  • 1
    Daniel, it’s so kind of you to “baptize” me here :) thank you very much for helping me and I’m on my way to your link! – JustJo Mar 10 '23 at 11:42

0 Answers0