FME Extensions
Media Gallery & Product Videos – Extension for Magento 2
User Guide - Version 1.0
http://www.fmeextensions.com
FME Extensions Media Gallery & Product Videos
2 User Guide www.fmeextensions.com
Intended Audience The content of this document is designed to facilitate the users -managers, supervisors and others of FME Media Gallery & Product Videos 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: http://www.fmeextensions.com/magento-extension-installation.html 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 email [email protected] with the description of the requirements and they will get back to you with estimates. For further help or support, feel free to reach us @ http://support.fmeextensions.com.
FME Extensions Media Gallery & Product Videos
3 User Guide www.fmeextensions.com
Contents Intended Audience .............................................................................................................................. 2
Overview ............................................................................................................................................. 4
Extension Features .............................................................................................................................. 4
Product Categories & Videos............................................................................................................ 4
Videos on CMS Pages ....................................................................................................................... 4
Dedicated Media Gallery Page ......................................................................................................... 4
Upload / Embed Videos ................................................................................................................... 4
Featured Video Slider ................................................................................................................... 4
Media Block ..................................................................................................................................... 4
User Guide .......................................................................................................................................... 5
Disclaimer.......................................................................................................................................... 29
Support ............................................................................................................................................. 29
Customization ................................................................................................................................. 30
Need a New Custom Extension? ................................................................................................... 30
FME Extensions Media Gallery & Product Videos
4 User Guide www.fmeextensions.com
Getting Started!
Overview
Media Gallery extension for Magento 2 allows you to display videos
of your products on any page of your Website. It creates a separate
media gallery page where you can upload videos in FLV, MPEG,
MP4, PNG, GIF, and SWF formats or embed them from popular video
streams such as YouTube and Vimeo. This Magento 2 video extension
helps you add video block on the left/right column of the page while
customization options allow you to change thumbnail size and
configure slider settings.
Extension Features
Product Categories & Videos
✓ Show attractive videos and attach them with your products and categories
Videos on CMS Pages
✓ You can also show videos on CMS pages such as Home Page, About Us and Services pages
Dedicated Media Gallery Page
✓ A dedicated media page shows all the videos of your online store in one single page
Upload / Embed Videos
✓ Upload videos from your devices or embed them from video channels such as YouTube and Vimeo
Featured Video Slider
✓ An elegant video slider allows you to display featured videos of your products
Media Block
✓ You can edit title and description of the block and change its position at right/left column
FME Extensions Media Gallery & Product Videos
5 User Guide www.fmeextensions.com
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 FME EXTENSIONS > Configurations. Here you will have access to the following
configurations:
Configuration
General Settings:
Enable/Disable Media Gallery
Product Media Settings:
Enable CMS Media
Media View
Media Player
FME Extensions Media Gallery & Product Videos
6 User Guide www.fmeextensions.com
Category Media Settings:
Enable Category Media
Media View
Media Player
Product Media Settings:
Enable Product Media
Media View
Media Player
FME Extensions Media Gallery & Product Videos
7 User Guide www.fmeextensions.com
Thumbs Settings (Compact and Grid):
Thumb Width
Thumb Height
Thumb Border Effect
Thumb Border Width
Thumb Border Color
Thumb Over Border Width
Thumb Over Border Color
Thumb Selected Border Width
Thumb Selected Border Color
Thumb Round Corners Radius
Thumb Color Overlay Effect
Thumb Overlay Color
Thumb Overlay Opacity
FME Extensions Media Gallery & Product Videos
8 User Guide www.fmeextensions.com
Thumb Overlay Reverse
Thumb Image Overlay Effect
Thumb Transition Duration
FME Extensions Media Gallery & Product Videos
9 User Guide www.fmeextensions.com
Stripe Thumbs Panel Options:
Strip Panel Padding Top
Strip Panel Padding Bottom
Strip Panel Padding Left
Strip Panel Padding Right
Strip Panel Background Color
Strip Thumbs Align: Top, bottom and center for left and right while left, right, middle for top and bottom
Strip Space Between thumbs
Strip Scroll to Thumb Duration
FME Extensions Media Gallery & Product Videos
10 User Guide www.fmeextensions.com
Grid Panel Options:
Grid Panel Vertical Scroll
Grid panel Grid Align: Top, bottom and center for left and right while left, right, middle for top and bottom
Grid Panel Background Color
Grid Num Columns: For Left and Right Gird
Grid Space Between Columns
Grid Space Between Rows
Grid Transition Duration
Grid Carousel
Slider Settings:
Slider Transition
FME Extensions Media Gallery & Product Videos
11 User Guide www.fmeextensions.com
Slider Transition Speed
Slider Control Swipe
Slider Enable Bullets
Slider Bullets Align Horizontal
Slider Bullets Align Vertical
Slider Enable Arrows
Slider Enable Progress Indicator
Slider Progress Indicator Type
Slider Progress Indicator Align Vertical
Progress Bar Color
Progress Bar Opacity
Progress Bar Line Width
Progress Pie Type Fill
Progress Pie Color 1
Progress Pie Color 2
Progress Pie Width
Progress Pie Height
Slider Enable Play button
Slider Play button Align Horizontal
Slider Play button Align Vertical
Slider Enable Full Screen button
Full Screen button Align Horizontal
Full Screen button Align Vertical
Slider Controls Always On
Slider Controls Appear Duration
FME Extensions Media Gallery & Product Videos
12 User Guide www.fmeextensions.com
Slider Enable Text panel
Slider Text Panel Background Color
Slider Text Panel Background Opacity
FME Extensions Media Gallery & Product Videos
13 User Guide www.fmeextensions.com
FME Extensions Media Gallery & Product Videos
14 User Guide www.fmeextensions.com
Media List Settings:
Page Title
META Keywords
META Description
Media Gallery Tile Settings:
Enable Caption
Caption Position
Caption Animation
Caption Alignment
Caption Color Scheme
Enable Icons
Icons Font Awesome Class: Like (fa fa-heart) Link : https://fontawesome.com/icons
Enable Zoom
Zoom Effect
Zoom Speed
Enable margin
FME Extensions Media Gallery & Product Videos
15 User Guide www.fmeextensions.com
Margin Between Thumbs: Margin is in Pixel (i-e 20,40)
Enable Social Media Icons
Social Media Icons Position
Social Media Icons Style
Thumbs Layout
FME Extensions Media Gallery & Product Videos
16 User Guide www.fmeextensions.com
FME Extensions Media Gallery & Product Videos
17 User Guide www.fmeextensions.com
Gallery Page Popup Settings:
Enable Gallery On Pop Up?
Enable Navigation On Click
Pop Up Time: Time is in millisecond
Search Engine Optimizations:
SEO URL Identifier
SEO URL Suffix
II. How to assign a Media to a media galley
Step 1 – Add New Media:
To add new file go to the “Manage Media”. You can enter “Manage Media” from Admin Menu > FME Extensions. Click on “Add New Media” on the top left to add a new media Gallery.
Step 2 – Add Media Information:
You can submit the basic fields related to media.
FME Extensions Media Gallery & Product Videos
18 User Guide www.fmeextensions.com
Step 3 – Add Images:
You can attach multiple images with media. Along with this you can also give the label to an image.
FME Extensions Media Gallery & Product Videos
19 User Guide www.fmeextensions.com
Step 4 – Add Videos:
You can attach multiple videos with media. What you have to do simple click on ad video an empty row will open .You can add 3 types of videos like vimeo, YouTube and MP4. You can make the video as “Featured Video”. Similarly can enable and disable the videos.
FME Extensions Media Gallery & Product Videos
20 User Guide www.fmeextensions.com
Step 5 – Attached Product:
You can simply add the desire product. What you have to do is select the product where you show this media.
FME Extensions Media Gallery & Product Videos
21 User Guide www.fmeextensions.com
Step 6 – Attached Category:
You can simply add the desire category. What you have to do is select the category where you show this media.
Step 7 – Attached CMS:
You can simply add the desire CMS pages. What you have to do is select the CMS Page where you show this media.
FME Extensions Media Gallery & Product Videos
22 User Guide www.fmeextensions.com
Step 8 – Frontend:
On frontend you can see the media on following pages Media Gallery Page
1) Product Page 2) Category Page 3) CMS Page 4) CMS Block
Media Gallery Page
On Media gallery Pages There are Tiles with Filter on Galleries. We can Also Filter the Media with Respect to Images and Videos as Shown below
On Select a Pop of Images and video will be shown
FME Extensions Media Gallery & Product Videos
23 User Guide www.fmeextensions.com
Product Page
There are 10 Different Theme Of Product page in which we can Arrange the media
1) Carousel 2) Slider 3) Compact
Compact Left
Compact right
Compact Top
Compact bottom
4) Grid
Grid Right
Grid Left
Grid Bottom
Grid Top
Category Page
There are 10 Different Theme Of Category page in which we can Arrange the media
5) Carousel 6) Slider 7) Compact
Compact Left
Compact right
Compact Top
Compact bottom
8) Grid
Grid Right
Grid Left
Grid Bottom
Grid Top
FME Extensions Media Gallery & Product Videos
24 User Guide www.fmeextensions.com
CMS Page
There are 10 Different Theme Of Cms page in which we can Arrange the media
9) Carousel 10) Slider 11) Compact
Compact Left
Compact right
Compact Top
Compact bottom
12) Grid
Grid Right
Grid Left
Grid Bottom
Grid Top
Carousel
FME Extensions Media Gallery & Product Videos
25 User Guide www.fmeextensions.com
Slider
FME Extensions Media Gallery & Product Videos
26 User Guide www.fmeextensions.com
Grid Left:
FME Extensions Media Gallery & Product Videos
27 User Guide www.fmeextensions.com
Grid Right:
FME Extensions Media Gallery & Product Videos
28 User Guide www.fmeextensions.com
Grid Top:
FME Extensions Media Gallery & Product Videos
29 User Guide www.fmeextensions.com
CMS Content
In content of CMS pages , we add code in order to Show media , there are 15 different Theme are available . Below is the Code with example …
Simple/column Gallery {{block class="FME\Mediaappearance\Block\Mediablock" block_id="2" gallery_id="1,2" layout_type="simpleTiles" gallery_background_color="#254370" featured_videos="0" tiles_col_width="250"
tile_enable_border="1" tile_border_width="3" tile_border_color="#1a456d" tile_border_radius="50" tile_enable_outline="1"
tile_outline_color="#3d060c" tile_enable_shadow="1" tile_shadow_blur="23" tile_shadow_color="#3d060c"
tile_enable_overlay="1" tile_overlay_opacity="0.4" tile_overlay_color="#3d060c" lightbox_type="compact"
lightbox_slider_image_border_width="15"
lightbox_slider_image_border_color="#3d060c"}}
In Simple/Column gallery we can add multiple galleries, Alog with This there are two Light Box
i-e compact and wide. the above code is use to display the following Style
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.
Support
You can also find Step by Step guide on this extension by visiting FME
Media Gallery & Product Videos product page on our website. If you
need more information or have any questions or problems, please
refer to our support helpdesk:
http://support.fmeextensions.com
FME Extensions Media Gallery & Product Videos
30 User Guide www.fmeextensions.com
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
Customization
If you have requirements that are not covered by our extension and
you need to have our extension customized, feel free to email us with
detailed requirements at [email protected]
You can also fill out a Request for Quote from here and we can get back
to you with a quote: http://www.fmeextensions.com/quickrfq
Need a New Custom Extension?
We can build a new extension based on your custom requirements if
needed. Feel free to email us at [email protected]