FME Extensions · 2019-12-04 · Photo Gallery extension for Magento 2 allows you to display images in galleries on your product pages and category pages. The standalone gallery page

FME Extensions

Photo Gallery & Product Image Gallery – Extension for Magento 2

User Guide - Version 1.0

FME Extensions Photo Gallery & Product Gallery

2 User Guide

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. 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.


3 User Guide

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


4 User Guide

Getting Started!

Overview

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.

Extension Features

Create Photo Albums

✓ Create Photo Albums and add unlimited images in them.

Attach To Specific Products

✓ Attach images to specific products by using Magento 2 gallery Extension. This allows you to promote products that need attention

Attach To Category Pages

✓ You can add images to category pages for increasing page rankings

Separate Photo Gallery Page

✓ A separate Photo gallery page enables customers to browse all the Images on a single page

Image Slider

✓ You can display your images in attractive image slider on product pages and category pages

Advance Thumbnail Settings

✓ Adjust the dimensions of the thumbnails according to the preferences of your website


5 User Guide

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.


6 User Guide

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.


7 User Guide

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.


8 User Guide

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

https://fontawesome.com/icons.

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 200.

https://fontawesome.com/icons


9 User Guide


10 User Guide

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.


11 User Guide

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.


12 User Guide

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.


13 User Guide

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.


14 User Guide

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.


15 User Guide

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


16 User Guide

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


17 User Guide

Simple Gallery:


18 User Guide

Simple with Scroll:


19 User Guide

Gallery with Filters:


20 User Guide

Simple Tabs:

T

A


21 User Guide

BS With Scroll:


22 User Guide

Product Page:

On Product page there is a carousel. Setting of the carousel is available in configurations


23 User Guide

Category Page:

On the category page we can also add a carousel on the top and bottom.

Top:


24 User Guide

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-slide-

from-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.


25 User Guide

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



26 User Guide

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

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.

Documents

FME Extensions · 2019-12-04 · Photo Gallery extension for Magento 2 allows you to display images in galleries on your product pages and category pages. The standalone gallery page