Originally Posted by
nicolle_leong
Hi everyone,
Is that possible to insert video to product images.
I do found a lots of plugin that we can put youtube link on product description, it can be easily done by using ckeditor for the content part.
But i would like combine it with product images, (either short video or youtube link),where it can be shown/play together on main product images.
Thanks a lot.
Although I don't have a video together with main product images I have replaced the main product image with an embedded video (vimeo in my case). You can have both though, I'll explain at the end.
It's a bit of a faff and there is probably a better way (integrating it into the database and Admin for example) but the process that worked for me was:
1. Choose a product type to use solely for products with a video as main image - I used Document Product Info
2. Rename a copy of tpl_modules_main_product_image.php to tpl_modules_main_product_video.php
3. In tpl_document_product_info_display.php rename tpl_modules_main_product_image.php to tpl_modules_main_product_video.php
4. In tpl_modules_main_product_video.php delete everything inside <div id="productMainImage" class="centeredContent">...</div>
5. In tpl_modules_main_product_video.php add something like:
Code:
<?php
if ($_GET['products_id'] == 350) {
echo MY_VIDEO_1;
} elseif ($_GET['products_id'] == 348) {
echo MY_VIDEO_2;
} elseif ......
?>
the product_id being your own.
6. Define MY_VIDEO_1, MY_VIDEO_2 in document_product_info.php language file by adding:
Code:
define('MY_VIDEO_1', '<iframe> ........</iframe>');
define('MY_VIDEO_2', '<iframe> ........</iframe>');
7. Change settings in Admin > Catalog > Product Types for Document - Product to suit your needs.
Style the placement of the video on the main product page with css. This takes some doing to have it work in a responsive template, luckily for me the Vimeo embed code helps with this. You might need to have a different div and class for the video in tpl_modules_main_product_video.php, if displaying both the main image and a video.
If you want to have both the main product image and a video the instead of:
3. In tpl_document_product_info_display.php rename tpl_modules_main_product_image.php to tpl_modules_main_product_video.php
use
3. In tpl_document_product_info_display.php find:
Code:
require($template->get_template_dir('/tpl_modules_main_product_image.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_main_product_image.php');
and add this before or after it:
Code:
require($template->get_template_dir('/tpl_modules_main_product_video.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_main_product_video.php');
It's quite basic and only really feasible if you have a limited number of video'd products.
I use it for displaying a 30 second preview of a video product which then allows the customer to checkout and buy the full version.
Bookmarks