0

The below code is how my product page gallery/carousel is pulling in images, how can I include product videos in this?

<div class="pdp-gallery__carousel">
    <?php foreach($images as $image): ?>
        <div class="pdp-gallery__image">
            <img src="<?php echo $image->getData('medium_image_url') ?>" class="main-image">
        </div>
    <?php endforeach; ?>
</div>
0

The video URL can be accessed inside the foreach with <?php echo $image->getVideoUrl();?>.

As we only want to add the video URL when required we can check the mediaType in an if statement - <?php if ($image->getMediaType() === 'external-video'): ?>.

My full carousel including the video (I haven't updated classes yet, don't judge ;)):

<div class="pdp-gallery__carousel">
    <?php foreach($images as $image): ?>
        <div class="pdp-gallery__image">
            <?php if ($image->getMediaType() === 'external-video'): ?>
                <img src="<?php echo $image->getData('medium_image_url') ?>" href="<?php echo $image->getVideoUrl();?>" data-fancybox="pdp-images" class="main-image">
            <?php else: ?>
                <img src="<?php echo $image->getData('medium_image_url') ?>" class="main-image">
            <?php endif; ?>
        </div>
    <?php endforeach; ?>
</div>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.