Product Image Gallery Custom Skin Upgrade Instructions

PRESSERO > *Pressero FAQs

Contents

Overview

We strongly suggest creating a backup of your current custom skin before proceeding with these upgrade instructions.

The steps below are only for those Custom skins that have been provisioned before January 2018. Starting from January 2018, all Custom Skins support the Product Image Gallery.

Three Upgrade Paths

Depending on the base skin used for your custom skin, the upgrade is different. Utilize the list below and choose the base skin you started with. This will take you to the correct upgrade instructions.

Aleyant Managed Custom Skins

If Aleyant is responsible for adustments to your custom skin and you would like to take advantage of this new feature, please contact support and submit a ticket indicating that you need an upgrade to the new product image gallery feature.

Standard Skins Upgrade Instructions

These instructions are for all our non responsive skins.

  1. Backup custom skin before making any changes
  2. Download all product image gallery required files here
  3. Copy css/photoswipe folder and css/owl.carousel.min.css to your skin "css" folder
  4. Copy image/loading2.gif to you skin "images" folder
  5. If your custom skin does not have "productdetail.txt" or "productquickview.txt" then copy them to your custom skin folder. If they already exists there, then replace ###PRODUCTIMAGE, medium, false, large### with the new skin tags like we used in "productquickview.txt".
    quick view file diff here 
    ###PRODUCTSINGLEIMAGE_JSON, {
layout:'<div class="product-image-gallery desktop"><div class="product-gallery-primary"><a href="@@@IMAGEURL:xlarge@@@" data-width="@@@IMAGESIZE:xlarge:WIDTH@@@" data-height="@@@IMAGESIZE:xlarge:HEIGHT@@@"><img src="@@@IMAGEURL:large@@@" alt="@@@PRODUCTNAME@@@" title="@@@PRODUCTNAME@@@"/></a> <span class="gallery-intro"><i class="fa fa-search-plus" aria-hidden="true"></i>
@@@TEXT:clickToZoom@@@</span></div></div>',
}###

###PRODUCTMULTIPLEIMAGES_JSON, {
layout:'<div class="product-image-gallery desktop">@@@PRIMARYIMAGELAYOUT@@@<div class="product-gallery-carousel owl-carousel">@@@ITEMLAYOUT@@@</div></div>',
primaryImageLayout:'<div class="product-gallery-primary"><a href="@@@IMAGEURL:xlarge@@@"><img src="@@@IMAGEURL:large@@@" alt="@@@PRODUCTNAME@@@" title="@@@PRODUCTNAME@@@"/></a> <span class="gallery-intro"><i class="fa fa-search-plus" aria-hidden="true"></i>
@@@TEXT:clickToZoom@@@</span></div>',
itemLayout:'<div class="product-gallery-carousel-item"><a href="@@@IMAGEURL:xlarge@@@" class="owl-lazy" data-src="@@@IMAGEURL:large@@@" data-width="@@@IMAGESIZE:xlarge:WIDTH@@@" data-height="@@@IMAGESIZE:xlarge:HEIGHT@@@"></a></div>'
}###
  6. Copy js/owl.carousel.min.js, js/photoswipe.min.js and js/photoswipe-ui-default.min.js to your skin "js" folder.
  7. Copy code inside js/GalleryInitScripts.txt and insert it into jQuery ready function. Usually, the skin will have zskinXX.js under js folder, you can put it there.
  8. Modify the layout.css in your skin folder.
    1. Import required stylesheets at the top of layout.css 
      @import url("css/photoswipe/photoswipe.min.css");
@import url("css/photoswipe/default-skin/default-skin.min.css");
@import url("css/owl.carousel.min.css");
    2. Add the code below to the bottom of layout.css 
      /*
* === product gallery ===
*/
.product-gallery-carousel-item {
  background-image: url('images/loading2.gif');
}
.product-gallery-carousel-item.loaded{
  background-image:none;
}
.product-gallery-carousel-item > a.gallery-current{
  box-shadow: 0 0 0 3px @Shade3@ inset;
}
  9. Modify requirements.xml add <productGallery>true</productGallery> before <twitterFeed> tag
  10. Check your requirements.xml see if "<useDetaultCSS>" set to false, if so please copy css/productgallery.css to your skin css folder. Then import it in your skin layout.css with @import url("css/productgallery.css");

Pre V6 Responsive Skins

These instructions are for all our responsive skins that were created befor Pressero version 6.

  1. Backup custom skin before making any changes
  2. Download all product image gallery required files here
  3. Copy css/photoswipe folder and css/owl.carousel.min.css to your skin "css" folder
  4. Copy image/loading2.gif to you skin "images" folder
  5. Replace ###PRODIMAGENEW,large …… ### tag inside productdetail.txt and productquickview.txt with new skin tags inside "new-product-gallery-skin-tags.txt".
  6. Copy js/owl.carousel.min.js, js/photoswipe.min.js and js/photoswipe-ui-default.min.js to your skin "js" folder.
  7. Copy code inside js/GalleryInitScripts.txt and insert it into jQuery ready function. Usually, the skin will have zskinXX.js under js folder, you can put it there.
  8. Modify the layout.css in your skin folder.
    1. Import required stylesheets at the top of layout.css 
      @import url("css/photoswipe/photoswipe.min.css");
@import url("css/photoswipe/default-skin/default-skin.min.css");
@import url("css/owl.carousel.min.css");
    2. Add the code below to the bottom of layout.css 
      /*
* === product gallery ===
*/
.product-gallery-carousel-item {
background-image: url('images/loading2.gif');
}
.product-gallery-carousel-item.loaded{
background-image:none;
}
.product-gallery-carousel-item > a.gallery-current{
box-shadow: 0 0 0 3px @Shade3@ inset;
}
  9. Modify requirements.xml add <productGallery>true</productGallery> before <twitterFeed> tag
  10. If your skin css/init.min.css is not up to date or product gallery not work as expected, copy css/productgallery.css to your skin css folder.And import it in your skin layout.css with @import url("css/productgallery.css");

Post V6 Responsive Skins

These instructions are for all our responsive skins created after Pressero version 6.

  1. Backup custom skin before making any changes
  2. Download all product image gallery required files here
  3. Copy css/photoswipe folder to your skin "css" folder.
  4. Copy image/loading2.gif to you skin "image" folder.
  5. Replace ###PRODIMAGENEW,large …… ### tag inside productdetail.txt and productquickview.txt with new skin tags inside "new-product-gallery-skin-tags.txt". Your skin productdetail.txt or productquickview.txt may have tow ###PRODIMAGENEW,large …… ### , then you can replace the one you want to show for mobile with <div class="hidden-md hidden-lg">....</div> , and the one for desktop with <div class="hidden-xs hidden-sm"> ….</div>.
  6. Copy js/owl.carousel.min.js, js/photoswipe.min.js and js/photoswipe-ui-default.min.js to your skin "js" folder.
  7. Copy code inside js/GalleryInitScripts.txt and insert it into jQuery ready function. Usually, the skin will have zskinXX.js under js folder, you can put it there.
  8. Modify the layout.css in your skin folder.
    1. Import required stylesheets at the top of layout.css 
      @import url("css/photoswipe/photoswipe.min.css");
@import url("css/photoswipe/default-skin/default-skin.min.css");
    2. Add the bellow code at the bottom of layout.css 
      /*
* === product gallery ===
*/
.product-gallery-carousel-item {
 background-image: url('images/loading2.gif');
}
.product-gallery-carousel-item.loaded{
 background-image:none;
}
.product-gallery-carousel-item > a.gallery-current{
 box-shadow: 0 0 0 3px @Shade3@ inset;
}
  9. Modify requirements.xml add <productGallery>true</productGallery> before <twitterFeed> tag
  10. If your skin does not use base skin stylesheet (check requirements.xml see if your skin have skin base style sheets like ) 
    <cssLibraryURLs>
  <string>/layout/skins/library/lib/css/library.min.css</string>
  <string>/layout/skins/library/base_skin/responsive6/base_skin.min.css</string>
</cssLibraryURLs>
    If not, then copy css/owlcarousel.min.css and css/productgallery.css to your skin css folder and import them in your layout.css with 
    @import url("css/owl.carousel.min.css");@import url("css/productgallery.css");
Article ID: 1195, , Modified: 6/4/2021 at 12:11 PM

Was this article helpful?

Share this article