[picture image] Responsive image, using thumbnail. #responsive #image #thumbnail #php

image.php

            <?php
            $photoBannerId = get_post_thumbnail_id();
            $photoBannerUrlBase = wp_get_attachment_image_src($photoBannerId, 'listing')[0];
            $photoBannerUrlBaseSmall = wp_get_attachment_image_src($photoBannerId, 'listing-small')[0];
            if ($photoBannerId) { ?>
                <picture>
                    <source media="(max-width: 1023px)" srcset="<?= esc_attr($photoBannerUrlBase) ?>">
                    <source media="(min-width: 1024px)" srcset="<?= esc_attr($photoBannerUrlBaseSmall) ?>">
                    <source srcset="<?= esc_attr($photoBannerUrlBaseSmall) ?>">
                    <img src="<?= esc_attr($photoBannerUrlBaseSmall) ?>" alt="Photo of <?php the_title(); ?>">
                </picture>
            <?php
            } ?>