FME Extensions. Photo Gallery & Product Image Gallery Extension for Magento 2. User Guide - Version

Transcription

1 FME Extensions Photo Gallery & Product Image Gallery Extension for Magento 2 User Guide - Version support@fmeextensions.com

2 Intended Audience The content of this document is designed to facilitate the users -managers, supervisors and others of Photo Gallery & Product Image Gallery Extension for Magento 2. A step by step instruction has been added to this document to help users to install the extension on Magento 2. This extension will only work on Magento 2. As a safe practice always backup your files and database before installing any extension on Magento. If you are looking for someone to install the extension we can do it for you as well. Just go to the following link and let support know the order id to expedite the installation process. Go to: Once you have installed please see the User Guide to help you understand on how to use the extension to its full capacity. If you still have questions feel free to contact us on our website. If you have any custom requirements feel free to touch base with. Just support@fmeextensions.com with the description of the requirements and they will get back to you with estimates. For further help or support, feel free to reach 2 User Guide

3 Table of contents Photo Gallery & Product Image Gallery - Extension for Magento 2... i Intended Audience... ii Table of contents... iii Getting Started!... iv Overview... iv Extension Features... iv Create Photo Albums... iv Attach To Specific Products... iv Attach To Category Pages... iv Separate Photo Gallery Page... iv Image Slider... iv Advance Thumbnail Settings... iv User Guide... v Disclaimer... vi Support... vi Customization... vi Need a New Custom Extension?... vi 3 User Guide

4 Getting Started! Overview Extension Features Photo Gallery extension for Magento 2 allows you to display images in galleries on your product pages and category pages. The standalone gallery page helps you display product images in albums which open in an attractive Lightbox. You can attach image galleries to products and categories and showcase them in an elegant image slider. This extension also allows you to configure thumbnails, slider options, and frame settings in a fully responsive Multi-Store. Create Photo Albums Attach To Specific Products Attach To Category Pages Separate Photo Gallery Page Image Slider Advance Thumbnail Settings Create Photo Albums and add unlimited images in them. Attach images to specific products by using Magento 2 gallery Extension. This allows you to promote products that need attention You can add images to category pages for increasing page rankings A separate Photo gallery page enables customers to browse all the Images on a single page You can display your images in attractive image slider on product pages and category pages Adjust the dimensions of the thumbnails according to the preferences of your website 4 User Guide

5 User Guide After installation of module, make sure the setup is upgraded and static-contents are deployed. Login to admin panel and flush you Magento cache storage. I. How to Configure the Extension: At the backend, go to STORES > Configurations. Here you will have access to the following configurations: General Settings: 1. Enable Module: Enable/Disable module. Image Settings On Upload: 1. Thumb Width: Set the gallery image thumbnail width. 2. Thumb Height: Set the gallery image thumbnail height. 3. Thumb Background Color if Keep Aspect Ratio (YES): Set the background color of the gallery image thumbnail. Default is set as White (#ffffff). 4. Keep Aspect Ratio of Thumb: Enable/Disable aspect ratio of thumbnail in gallery. 5. Keep Frame of Thumb: Enable/Disable the frame of thumbnail in gallery. 5 User Guide

6 Photogallery Settings: 1. Page Title: Title of the Photogallery page 2. SEO URL Identifier: Title for SEO URL Identifier. 3. SEO URL Suffix: SEO URL Suffix for FAQs main page and detail pages 4. META Keywords: META Keywords for the Photogallery page. 5. META Description: META Description for the Photogallery page. 6. Enable Thumbs: enable the thumbs images or not. 7. Images Per Page: Number of images per Photogallery page. 8. Load Ajex: if there is paginition then images are loaded manually or automatically. 9. Button Name: If There is manual Load then, User can Enter the Suitable name for button 10. Enable tabs: Enable or disable the tabs 11. Enable pagination on tabs: Enable or Disable the tabs 12. Enable Filter: If there is no tabs then on Photogallery page User can enable or disable the filter 13. Enable Pagination Without Filter: If User disable the filter then User can Enable or diable the pagination 14. Thumbs layout: User can Arrange the images according to two layouts : in columns or in final 15. Full Width Gallery: Enable /Disable Full Width gallery. By Enabling It, Gallery is 100% responsive so it can be used on a full screen page. 16. Pagination Button Text: Text on button that directs you to more images if the number of images in a gallery is more than the set Images Per Page. 17. Grid Size: Images can be vertically cropped to enhance the chance of being aligned on the bottom borders, which usually prevents the gallery from arranging in columns. So a higher value could improve the overall layout, but it will crop images. 18. Disable Grid Size below :If you have small images at low screen resolutions, then you could want to disable image cropping to avoid even smaller images. Use the disablegridsizebelow to avoid automatically set the gridsize to 0 and avoid image cropping when the screen is under the resolution pointed by this parameter. 6 User Guide

7 Photogallery Tile Settings: We can set the image tiles in photogallery page. 1. Enable Caption: We can enable and disable the caption 2. Caption Position: There are three different position of caption we can select 3. Caption Animation: We can select caption animation of 7 different types listed in configurations. 7 User Guide

8 4. Caption Alignment: We can align the caption in three different alignments 5. Caption Color Scheme: Two caption schemes are available, a user can select. 6. Enable Icons: This extension provide and additional features of adding the icons along with caption. We can enable or disable the icon. 7. Icons Font Awesome Clas: User just have select the icon class from the font awesome website For example: If we want to Show Heart as an icon we will use fa fa-heart. 8. Enable Zoom: We can enable or disable the zoom on each tile of photogallery page. 9. Zoom Effect: There are 4 zoom effects are available 10. Zoom Speed: User can select the zoom speed on tile. 11. Enable Margin: We can enable or disable the margin between the tile. 12. Margin Between Thumbs: We can add the margin between the tiles. Margin is in pixel 13. Enable Social Media Icons: Another feature that this extension provides is that we can share the picture of photogallery to social media Like Twitter, Facebook, Gmail and Pinterest. 14. Social Media Icons Position: We can place the icon of social media in two different positions. 15. Social Media Icons Style: We can style the icons in circle or bar shape. 16. Allow Enlargement: User can enable/disable enlargement of picture. 17. Minimum Tile Width: We can limit the width of tile. Width should be multiple of User Guide

9 9 User Guide

10 Gallery Page Pop Settings: 1. Magnifier: There are two magnifier that we user can select i.e. Light Box or Popup 2. Enable Gallery On Pop Up: We can enable the gallery on popup 3. Enable Navigation On Click: Enable or disable of navigation on click 4. Pop Up Time: Fade In and Fade Out time of popup. Time is in milliseconds Category Gallery Settings: 1. Enable Category Related Photogallery: Enable/Disable category related photogallery on product page. 2. Position: Position of category related photogallery on product page i.e. Top, Bottom. 10 User Guide

11 Product Gallery Settings: 1. Enable Product Related Photogallery: Enable/Disable product gallery on product pages. Carousel Settings: 1. Navigation Button: Enable or Disable carousel on product page, products page and CMS block 2. Auto Play: Enable or disable autoplay in carousel 3. Rotation Time: We can add the autoplay time or rotation time. Time is in milliseconds 4. Number of Items In Carousel: We can add the number of items on carousel. 11 User Guide

12 II. How to Add/Edit Product & Image Step 1 Add New Product: To add new product, go to Catalog. You can enter Catalog from Admin Menu > Products. Click on Add Product there to add New Product. Step 2 Add Product information: You can add the product information as par your requirement. For the purpose of this demo we have added the following information. 12 User Guide

13 Step 3 Upload Product Image/Video: You can add one or more images/video for each product. For the purpose of this demo we have added the following image. Step 4 Frontend: Now go to the frontend demo and you will find your product there as shown below. You can always go to the backend and edit this product. 13 User Guide

14 III. How to Add/Edit New Photogallery: Step 1 Add New Gallery: To add new gallery, go to Manage Photogallery. You can enter Manage Photogallery from Admin Menu > FME EXTENSIONS. Click on Add New Gallery there to add one. Step 2 Add Gallery Information: You can add the gallery information as par your requirement. For the purpose of this demo we have added the following information. PLEASE NOTE: The extension lets you chose where your gallery will be displays in the information section. The indicated dropdown highlighted below displays the options. You can also chose the Store View here. 14 User Guide

15 Step 3 Upload Gallery Image(s): You can add one or more images for each gallery. For the purpose of this demo we have added the following image. We can also give caption to any image in following way 15 User Guide

16 Step 4 Frontend: On Frontend We can add three galleries on: 1) Photogallery page 2) Product page 3) Category Page 4) CMS Content Photogallery Page: We can add a gallery on phoptogallery page. Setting of photogallery page is available in Configurations. On Photogallery page we select ghow gallery in different layout like: 1) Simple Gallery 2) Gallery with Scroll 3) Gallery with Filters 4) Simple Tabs 5) Tabs with Scroll 16 User Guide

17 Simple Gallery: 17 User Guide

18 Simple with Scroll: 18 User Guide

19 Gallery with Filters: 19 User Guide

20 Simple Tabs: T A 20 User Guide

21 BS With Scroll: 21 User Guide

22 Product Page: On Product page there is a carousel. Setting of the carousel is available in configurations 22 User Guide

23 Category Page: On the category page we can also add a carousel on the top and bottom. Top: 23 User Guide

24 Bottom: CMS CONTENT Code: {{block class="fme\photogallery\block\photogalleryblock" block_id="5" gallery_type="simple" block_title="my Block" gallery_id="16,17" enable_caption="1" caption_position="caption-middle" caption_animation="caption-slidefrom-bottom" caption_alignment="caption-center" caption_color="caption-color-dark" enable_icon="1" icon_class="fa fa-heart" enable_zoom="1" zoom_effect="effect-zoom-in" zoom_speed="effect-speed-medium" layout_type="final" enable_sm="1" smicons_position="social-icons-bottom" smicons_style="social-icons-circle" }} block_id : Block id is Unique Identifier, User have to Select Different Id for Multiple Blocks. Gallery_type : There are Two mainly Type of gallery I-e Simple or carousel. 24 User Guide

25 Block_title: If we want to giove the title to Carousel\ We can Add By Defing the block title. gallery_id : We can Add More than 1 Gallery in the block.if there aare more than 1 then gallery will be shown in the form of filter. enable_caption : We can Enable or Diable the caption on tile in Block. Other caption vaiable can Be set. You Follow our Demo page. Enable_icon: We can Enable the icon With Caption. icon_class: Icon can Added From Font Awesome Website enable_zoom: Zoom Effect Can be Added on Tiles. Other classes of Zoom Is also Available on our Demo page 25 User Guide

26 layout_type: There are Two Layout of gallery I-e final and columns. enable_sm: We can Add Social media icon On Tiles by Enabling it Other classes of Social Media Icon Is also Available In Demo. Note: One thing that user must know if user don t add the any variable in block then it automatically will get the settings from configurations. Disclaimer Support It is highly recommended to backup your server files and database before installing this module. No responsibility will be taken for any adverse effects occurring during installation. It is recommended you install on a test server initially to carry out your own testing. You can also find Step by Step guide on this extension by visiting Photo Gallery & Product Image Gallery product page on our website. If you need more information or have any questions or problems, please refer to our support helpdesk: You can log a ticket and a support technician can assist you further. If you are still struggling with your extension, submit a request via support@fmeextensions.com 26 User Guide

27 Customization If you have requirements that are not covered by our extension and you need to have our extension customized, feel free to us with detailed requirements at You can also fill out a Request for Quote form here and we can get back to you with a quote: Need a New Custom Extension? We can build a new extension based on your custom requirements if needed. Feel free to us at info@fmeextensions.com 27 User Guide