This question has been flagged
1 Reply
5480 Views

Hy,

How is it possible to add multiple images into a product page thanks to the website builder?

Regards

Avatar
Discard
Best Answer

I have created a (very quick and dirty) module that will allow you to store 22 product images inside the product form that can be pulled into your custom website template using by adding some logic to your website's product view page.

Just clone the following git repository here into your /addons directory:


https://github.com/lukebranch/website_multi-image

and install as you would a normal Odoo addon. In order to add the product images into your custom website template's product page you can just use the following logic inside whatever div (or other tag) you'd like to duplicate for images:

t-if="not product.x_product_image_1 == null"

for example:

<div t-if="not product.x_product_image_1 == null">
<!-- Add your image container here -->
<span itemprop="image" t-field="product.x_product_image_1" t-field-options="{&quot;widget&quot;: &quot;image&quot;, &quot;class&quot;: &quot;product_detail_img&quot;}" class="img-responsive img-rounded"/>
</div>

Just change the _1 in the t-if statement and t-field statement above each time you want to add an extra image to the template, for example the following code adds image field 2:


<div t-if="not product.x_product_image_2 == null">
<!-- Add your image container here -->
<span itemprop="image" t-field="product.x_product_image_2" t-field-options="{&quot;widget&quot;: &quot;image&quot;, &quot;class&quot;: &quot;product_detail_img&quot;}" class="img-responsive img-rounded"/>
</div>

The t-if statement is designed to check if a product image field contains an image, and if not, just hide what is contained inside that tag.

While this is certainly a quick and dirty method and is not by any means the ideal way to accomplish this, it does allow you to have multiple images on your product page and will allow you to import and export images using the field names (eg: x_product_image_2) to allow for mass import/export and mass updates by CSV.

Please comment back if you run into any issues and create an issue on the github repository for this module if you find a bug:

https://github.com/lukebranch/website_multi-image/issues

I hope it helps!


 

Avatar
Discard
Author

Great thanks to you Luke, I'll have a look to this ASAP

@Mind and Go, No problem. Please provide feedback if you have any suggestions for improvements, or feature requests. The module is still very basic, however i'll work on adding more features to it as soon as I can find time.

@Mind And Go, I've just implemented a 'Synced Slider' system for the product page. It is un-styled at this point in time to allow for theming according to your website's design, however it implements two sets of OwlCarousel2's sliders in a synced fashion to provide main image + thumbnail slider functionality. The development branch for this feature is: https://github.com/OdooCommunityWidgets/website_multi_image/tree/dev-image-carousel and the 8.0 branch is here: https://github.com/OdooCommunityWidgets/website_multi_image/tree/8.0