fme extensions - magento...fme extensions media gallery & product videos 4 user guide getting...

FME Extensions

Media Gallery & Product Videos – Extension for Magento 2

User Guide - Version 1.0

http://www.fmeextensions.com

[email protected]

https://www.fmeextensions.com/media-gallery-product-videos-magento-2.html

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.


http://www.fmeextensions.com/magento-extension-installation.html

mailto:[email protected]

http://support.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



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



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



Category Media Settings:

Enable Category Media

Media View

Media Player

Product Media Settings:

Enable Product Media

Media View

Media Player



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



Thumb Overlay Reverse

Thumb Image Overlay Effect

Thumb Transition Duration



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



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



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



Slider Enable Text panel

Slider Text Panel Background Color

Slider Text Panel Background Opacity



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

https://fontawesome.com/icons



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



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.



Step 3 – Add Images:

You can attach multiple images with media. Along with this you can also give the label to an image.



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.



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.



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.



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



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


Compact Left

Compact right

Compact Top

Compact bottom

8) Grid

Grid Right

Grid Left

Grid Bottom

Grid Top



CMS Page

There are 10 Different Theme Of Cms page in which we can Arrange the media


Compact Left

Compact right

Compact Top

Compact bottom

12) Grid

Grid Right

Grid Left

Grid Bottom

Grid Top

Carousel



Slider



Grid Left:



Grid Right:



Grid Top:



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







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

[email protected]

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]



http://www.fmeextensions.com/quickrfq

http://www.fmeextensions.com/quickrfq


fme extensions - magento...fme extensions media gallery & product videos 4 user guide getting...

Documents