Displaying two different sizes for an image?

• thedonquixotic

• October 8, 2017 at 3:09 pm

I’ve got a custom gallery that I made using a php loop and template. The gallery uses a repeater field.

I’ve done some searching online on how to access two different sizes of images in WordPress but so far I haven’t gotten things to work. I have an anchor link with a data-src that displays the smaller preview image, and nested inside of it is an image file with the full resolution image as a fullscreen lightbox. I want to call the medium size image for the data-src and the full sized image for the lightbox.

I tried following a couple of threads on the forum but I can’t seem to get it to work?

This is what my code looks like:

<?php
            //VARIABLES//
            $title =  get_sub_field('card_title');
            $childImage = get_sub_field('card_picture');
            $file = get_sub_field('card_video');
            $video = $file['url'];

            if($loopLazyLoad > $initialCardLoad):

                if( $childImage ): ?>
                    <div class="grid-item">
                        <a data-fancybox="gallery" data-caption="<?php echo $title ?>" href="<?php
                        echo $childImage['sizes']['full'];//big one here ?>">
                            <img class="lazy" data-src="<?php echo $childImage['sizes']['medium']; ?>">
                         </a>
                <?php endif; ?>

Also the image fields are set to image ID. They were previously set to Image Array and also weren’t working. From reading on this forum it looks like they need to be set to image ID though? Or maybe I’m confused?

After looking around some more, I decided to switch it back to image array. When I do this it just loads all images as the full image. I think this might be because I installed WP Media Folders for managing my media content so maybe that’s making it wonky or something. I’m going to disable that and see what happens

Okay tried turning off WP Media Folders and uploaded some new images to see if they were resized by the default WP functionality. The result is basically the same. It is not loading a medium and full version of the images. It is only loading the Full version for some reason.

Also I tried to debug stuff by <p> <?php echo $childImage ?> </p> to see what was being output and what I got was a thing that said “array” and that’s it.

Any pointers on what I’m doing wrong?

• thedonquixotic

• October 9, 2017 at 5:14 am

Okay so I’ve got it working now. I think it might have just been the database needing to catch up or be refreshed. I uploaded a bunch of pictures without WP Media Folders and then inserted the gallery into a new page and it came out working correctly after some tweaks.

A couple of things worth noting. Part of the problem was [‘sizes’][‘full’] was not working at all. For some reason it seems my thing doesn’t get full images using the full keyword? It just comes up blank.

Second, part of the problem is that I forgot about the lazy loader loop I had made, so while I was applying changes to the php loop for the parts that loaded up afterwards, I wasn’t to the initial 5 images in the gallery, which is why I kept changing the code, and not seeing changes to the image elements that I was inspecting in the browser.

Got it working now!