5 added 4 characters in body
source | link

You can get Media collection of particular product by loading it in custom helper as below:

<?php
namespace Your\Module\Helper;

use Magento\Catalog\Api\ProductRepositoryInterface;

class Data extends \Magento\Framework\Url\Helper\Data
{
    public function __construct(
        ...
        ProductRepositoryInterface $productRepository,
        ...
    ) {
        ...
        $this->productRepository = $productRepository;
        ...
    }

    public function getMediaGalleryImages($product)
    {
        $_product = $this->productRepository->get($product->getSku(), false, null, true);

        return $_product->getMediaGalleryImages();
    }
}

Please copy

vendor/magento/module-catalog/view/frontend/templates/product/list.phtml

to your custom theme.

app/design/frontend/package/theme/Magento_Catalog/templates/product/list.phtml

Now in list.phtml file, you can call this function to load the video url if it's available otherwise show the regular image:

<?php
$video = false;
$galleryImages = $this->helper('Your\Module\Helper\Data')->getMediaGalleryImages($_product);
if ($galleryImages) {
    foreach ($galleryImages as $image$primage) {
        $imageData = $image$primage->getData();
        // Check media type
        if (isset($imageData['media_type']) && $imageData['media_type'] == 'external-video') {
            $video = true;
            if (strpos($imageData['video_url'], 'youtube.com') !== false) {
                echo preg_replace("/\s*[a-zA-Z\/\/:\.]*youtube.com\/watch\?v=([a-zA-Z0-9\-_]+)([a-zA-Z0-9\/\*\-\_\?\&\;\%\=\.]*)/i","<iframe width=\"240\" height=\"300\" src=\"//www.youtube.com/embed/$1\" frameborder=\"0\" allowfullscreen></iframe>", $imageData['video_url']);
            }elseif(strpos($imageData['video_url'], 'vimeo.com') !== false){
                echo "<iframe width=\"240\" height=\"300\" src=".$imageData['video_url']." frameborder=\"0\" allowfullscreen></iframe>";
            }
        }
    }
}
?>

<?php if(!$video){ ?>
    <?= $productImage->toHtml() ?>
<?php } ?>

For vimeo, add embedded urls for product video to make them playable at list page. Please note that it would take some extra time to load page first time as we are loading product to get media collection.

You can get Media collection of particular product by loading it in custom helper as below:

<?php
namespace Your\Module\Helper;

use Magento\Catalog\Api\ProductRepositoryInterface;

class Data extends \Magento\Framework\Url\Helper\Data
{
    public function __construct(
        ...
        ProductRepositoryInterface $productRepository,
        ...
    ) {
        ...
        $this->productRepository = $productRepository;
        ...
    }

    public function getMediaGalleryImages($product)
    {
        $_product = $this->productRepository->get($product->getSku(), false, null, true);

        return $_product->getMediaGalleryImages();
    }
}

Please copy

vendor/magento/module-catalog/view/frontend/templates/product/list.phtml

to your custom theme.

app/design/frontend/package/theme/Magento_Catalog/templates/product/list.phtml

Now in list.phtml file, you can call this function to load the video url if it's available otherwise show the regular image:

<?php
$video = false;
$galleryImages = $this->helper('Your\Module\Helper\Data')->getMediaGalleryImages($_product);
if ($galleryImages) {
    foreach ($galleryImages as $image) {
        $imageData = $image->getData();
        // Check media type
        if (isset($imageData['media_type']) && $imageData['media_type'] == 'external-video') {
            $video = true;
            if (strpos($imageData['video_url'], 'youtube.com') !== false) {
                echo preg_replace("/\s*[a-zA-Z\/\/:\.]*youtube.com\/watch\?v=([a-zA-Z0-9\-_]+)([a-zA-Z0-9\/\*\-\_\?\&\;\%\=\.]*)/i","<iframe width=\"240\" height=\"300\" src=\"//www.youtube.com/embed/$1\" frameborder=\"0\" allowfullscreen></iframe>", $imageData['video_url']);
            }elseif(strpos($imageData['video_url'], 'vimeo.com') !== false){
                echo "<iframe width=\"240\" height=\"300\" src=".$imageData['video_url']." frameborder=\"0\" allowfullscreen></iframe>";
            }
        }
    }
}
?>

<?php if(!$video){ ?>
    <?= $productImage->toHtml() ?>
<?php } ?>

For vimeo, add embedded urls for product video to make them playable at list page. Please note that it would take some extra time to load page first time as we are loading product to get media collection.

You can get Media collection of particular product by loading it in custom helper as below:

<?php
namespace Your\Module\Helper;

use Magento\Catalog\Api\ProductRepositoryInterface;

class Data extends \Magento\Framework\Url\Helper\Data
{
    public function __construct(
        ...
        ProductRepositoryInterface $productRepository,
        ...
    ) {
        ...
        $this->productRepository = $productRepository;
        ...
    }

    public function getMediaGalleryImages($product)
    {
        $_product = $this->productRepository->get($product->getSku(), false, null, true);

        return $_product->getMediaGalleryImages();
    }
}

Please copy

vendor/magento/module-catalog/view/frontend/templates/product/list.phtml

to your custom theme.

app/design/frontend/package/theme/Magento_Catalog/templates/product/list.phtml

Now in list.phtml file, you can call this function to load the video url if it's available otherwise show the regular image:

<?php
$video = false;
$galleryImages = $this->helper('Your\Module\Helper\Data')->getMediaGalleryImages($_product);
if ($galleryImages) {
    foreach ($galleryImages as $primage) {
        $imageData = $primage->getData();
        // Check media type
        if (isset($imageData['media_type']) && $imageData['media_type'] == 'external-video') {
            $video = true;
            if (strpos($imageData['video_url'], 'youtube.com') !== false) {
                echo preg_replace("/\s*[a-zA-Z\/\/:\.]*youtube.com\/watch\?v=([a-zA-Z0-9\-_]+)([a-zA-Z0-9\/\*\-\_\?\&\;\%\=\.]*)/i","<iframe width=\"240\" height=\"300\" src=\"//www.youtube.com/embed/$1\" frameborder=\"0\" allowfullscreen></iframe>", $imageData['video_url']);
            }elseif(strpos($imageData['video_url'], 'vimeo.com') !== false){
                echo "<iframe width=\"240\" height=\"300\" src=".$imageData['video_url']." frameborder=\"0\" allowfullscreen></iframe>";
            }
        }
    }
}
?>

<?php if(!$video){ ?>
    <?= $productImage->toHtml() ?>
<?php } ?>

For vimeo, add embedded urls for product video to make them playable at list page. Please note that it would take some extra time to load page first time as we are loading product to get media collection.

4 added 361 characters in body
source | link

Now in list.phtml file, you can call this function to load the video url if it's available otherwise show the regular image. I tried with Youtube video's, you can check similar way for vimeo urls too:

<?php
    $video = false;
    $galleryImages = $this->helper('Your\Module\Helper\Data')->getMediaGalleryImages($_product);
    if ($galleryImages) {
        foreach ($galleryImages as $image) {
            $imageData = $image->getData();
            // Check media type
            if (isset($imageData['media_type']) && $imageData['media_type'] == 'external-video') {
            $video = true;
  $video = true;        if (strpos($imageData['video_url'], 'youtube.com') !== false) {
                echo preg_replace("/\s*[a-zA-Z\/\/:\.]*youtube.com\/watch\?v=([a-zA-Z0-9\-_]+)([a-zA-Z0-9\/\*\-\_\?\&\;\%\=\.]*)/i","<iframe width=\"240\" height=\"300\" src=\"//www.youtube.com/embed/$1\" frameborder=\"0\" allowfullscreen></iframe>", $imageData['video_url']);
            }elseif(strpos($imageData['video_url'], 'vimeo.com') !== false){
                echo "<iframe width=\"240\" height=\"300\" src=".$imageData['video_url']." frameborder=\"0\" allowfullscreen></iframe>";
            }
        }
    }
}
?>

<?php if(!$video){ ?>
    <?= $productImage->toHtml() ?>
<?php } ?>

For vimeo, add embedded urls for product video to make them playable at list page. Please note that it would take some extra time to load page first time as we are loading product to get media collection. I'll check for vimeo urls and provide you solution on that too :)

Now in list.phtml file, you can call this function to load the video url if it's available otherwise show the regular image. I tried with Youtube video's, you can check similar way for vimeo urls too:

<?php
    $video = false;
    $galleryImages = $this->helper('Your\Module\Helper\Data')->getMediaGalleryImages($_product);
    if ($galleryImages) {
        foreach ($galleryImages as $image) {
            $imageData = $image->getData();
            // Check media type
            if (isset($imageData['media_type']) && $imageData['media_type'] == 'external-video') {
                $video = true;
                echo preg_replace("/\s*[a-zA-Z\/\/:\.]*youtube.com\/watch\?v=([a-zA-Z0-9\-_]+)([a-zA-Z0-9\/\*\-\_\?\&\;\%\=\.]*)/i","<iframe width=\"240\" height=\"300\" src=\"//www.youtube.com/embed/$1\" frameborder=\"0\" allowfullscreen></iframe>", $imageData['video_url']);
            }
        }
    }
?>

<?php if(!$video){ ?>
    <?= $productImage->toHtml() ?>
<?php } ?>

Please note that it would take some extra time to load page first time as we are loading product to get media collection. I'll check for vimeo urls and provide you solution on that too :)

Now in list.phtml file, you can call this function to load the video url if it's available otherwise show the regular image:

<?php
$video = false;
$galleryImages = $this->helper('Your\Module\Helper\Data')->getMediaGalleryImages($_product);
if ($galleryImages) {
    foreach ($galleryImages as $image) {
        $imageData = $image->getData();
        // Check media type
        if (isset($imageData['media_type']) && $imageData['media_type'] == 'external-video') {
            $video = true;
            if (strpos($imageData['video_url'], 'youtube.com') !== false) {
                echo preg_replace("/\s*[a-zA-Z\/\/:\.]*youtube.com\/watch\?v=([a-zA-Z0-9\-_]+)([a-zA-Z0-9\/\*\-\_\?\&\;\%\=\.]*)/i","<iframe width=\"240\" height=\"300\" src=\"//www.youtube.com/embed/$1\" frameborder=\"0\" allowfullscreen></iframe>", $imageData['video_url']);
            }elseif(strpos($imageData['video_url'], 'vimeo.com') !== false){
                echo "<iframe width=\"240\" height=\"300\" src=".$imageData['video_url']." frameborder=\"0\" allowfullscreen></iframe>";
            }
        }
    }
}
?>

<?php if(!$video){ ?>
    <?= $productImage->toHtml() ?>
<?php } ?>

For vimeo, add embedded urls for product video to make them playable at list page. Please note that it would take some extra time to load page first time as we are loading product to get media collection.

3 added 475 characters in body
source | link

You can get Media collection of particular product by loading it in custom helper as below:

<?php
namespace Your\Module\Helper;

use Magento\Catalog\Api\ProductRepositoryInterface;

class ProductData extends \Magento\Framework\Url\Helper\Data
{
    public function __construct(
        ...
        ProductRepositoryInterface $productRepository,
        ...
    ) {
        ...
        $this->productRepository = $productRepository;
        ...
    }

    public function getMediaGalleryImages($product)
    {
        $_product = $this->productRepository->get($product->getSku(), false, null, true);

        return $_product->getMediaGalleryImages();
    }
}

Please copy

vendor/magento/module-catalog/view/frontend/templates/product/list.phtml

to your custom theme.

app/design/frontend/package/theme/Magento_Catalog/templates/product/list.phtml

Now in your list.phtml file, you can call this function to load the video url if itsit's available otherwise show the regular image. I tried with Youtube video's, you can check similar way for vimeo urls too:

<?php
    $video = false;
    $galleryImages = $this->helper('Your\Module\Helper\Data')->getMediaGalleryImages($_product);
    if ($galleryImages) {
        foreach ($galleryImages as $image) {
            $imageData = $image->getData();
            // Check media type
            if (isset($imageData['media_type']) && $imageData['media_type'] == 'external-video') {
                $video = true;
                echo preg_replace("/\s*[a-zA-Z\/\/:\.]*youtube.com\/watch\?v=([a-zA-Z0-9\-_]+)([a-zA-Z0-9\/\*\-\_\?\&\;\%\=\.]*)/i","<iframe width=\"240\" height=\"300\" src=\"//www.youtube.com/embed/$1\" frameborder=\"0\" allowfullscreen></iframe>", $imageData['video_url']);
            }
        }
    }
?>

<?php if(!$video){ ?>
    <?= $productImage->toHtml() ?>
<?php } ?>

Please note that it would take some extra time to load page first time as we are loading product to get media collection. I'll check for vimeo urls and provide you solution on that too :)

You can get Media collection of particular product by loading it in custom helper as below:

<?php
namespace Your\Module\Helper;

use Magento\Catalog\Api\ProductRepositoryInterface;

class Product extends \Magento\Framework\Url\Helper\Data
{
    public function __construct(
        ...
        ProductRepositoryInterface $productRepository,
        ...
    ) {
        ...
        $this->productRepository = $productRepository;
        ...
    }

    public function getMediaGalleryImages($product)
    {
        $_product = $this->productRepository->get($product->getSku(), false, null, true);

        return $_product->getMediaGalleryImages();
    }
}

Now in your list.phtml file, you can call this function to load the video url if its available otherwise show the regular image. I tried with Youtube video's, you can check similar way for vimeo urls too:

<?php
    $video = false;
    $galleryImages = $this->helper('Your\Module\Helper\Data')->getMediaGalleryImages($_product);
    if ($galleryImages) {
        foreach ($galleryImages as $image) {
            $imageData = $image->getData();
            // Check media type
            if (isset($imageData['media_type']) && $imageData['media_type'] == 'external-video') {
                $video = true;
                echo preg_replace("/\s*[a-zA-Z\/\/:\.]*youtube.com\/watch\?v=([a-zA-Z0-9\-_]+)([a-zA-Z0-9\/\*\-\_\?\&\;\%\=\.]*)/i","<iframe width=\"240\" height=\"300\" src=\"//www.youtube.com/embed/$1\" frameborder=\"0\" allowfullscreen></iframe>", $imageData['video_url']);
            }
        }
    }
?>

<?php if(!$video){ ?>
    <?= $productImage->toHtml() ?>
<?php } ?>

I'll check for vimeo urls and provide you solution on that too :)

You can get Media collection of particular product by loading it in custom helper as below:

<?php
namespace Your\Module\Helper;

use Magento\Catalog\Api\ProductRepositoryInterface;

class Data extends \Magento\Framework\Url\Helper\Data
{
    public function __construct(
        ...
        ProductRepositoryInterface $productRepository,
        ...
    ) {
        ...
        $this->productRepository = $productRepository;
        ...
    }

    public function getMediaGalleryImages($product)
    {
        $_product = $this->productRepository->get($product->getSku(), false, null, true);

        return $_product->getMediaGalleryImages();
    }
}

Please copy

vendor/magento/module-catalog/view/frontend/templates/product/list.phtml

to your custom theme.

app/design/frontend/package/theme/Magento_Catalog/templates/product/list.phtml

Now in list.phtml file, you can call this function to load the video url if it's available otherwise show the regular image. I tried with Youtube video's, you can check similar way for vimeo urls too:

<?php
    $video = false;
    $galleryImages = $this->helper('Your\Module\Helper\Data')->getMediaGalleryImages($_product);
    if ($galleryImages) {
        foreach ($galleryImages as $image) {
            $imageData = $image->getData();
            // Check media type
            if (isset($imageData['media_type']) && $imageData['media_type'] == 'external-video') {
                $video = true;
                echo preg_replace("/\s*[a-zA-Z\/\/:\.]*youtube.com\/watch\?v=([a-zA-Z0-9\-_]+)([a-zA-Z0-9\/\*\-\_\?\&\;\%\=\.]*)/i","<iframe width=\"240\" height=\"300\" src=\"//www.youtube.com/embed/$1\" frameborder=\"0\" allowfullscreen></iframe>", $imageData['video_url']);
            }
        }
    }
?>

<?php if(!$video){ ?>
    <?= $productImage->toHtml() ?>
<?php } ?>

Please note that it would take some extra time to load page first time as we are loading product to get media collection. I'll check for vimeo urls and provide you solution on that too :)

2 added 475 characters in body
source | link
1
source | link