FME Extensions Media Gallery & Product Videos Extension for Magento 2 User Guide - Version 1.0 http://www.fmeextensions.com support@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 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 us @ http://support.fmeextensions.com. 2 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 3 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 Videos on CMS Pages Dedicated Media Gallery Page Upload / Embed Videos Featured Video Slider Show attractive videos and attach them with your products and categories You can also show videos on CMS pages such as Home Page, About Us and Services pages A dedicated media page shows all the videos of your online store in one single page Upload videos from your devices or embed them from video channels such as YouTube and Vimeo 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 4 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 5 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 6 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 7 User Guide www.fmeextensions.com
Thumb Overlay Reverse Thumb Image Overlay Effect Thumb Transition Duration 8 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 9 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 10 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 11 User Guide www.fmeextensions.com
Slider Enable Text panel Slider Text Panel Background Color Slider Text Panel Background Opacity 12 User Guide www.fmeextensions.com
13 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 14 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 15 User Guide www.fmeextensions.com
16 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. 17 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. 18 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. 19 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. 20 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. 21 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 22 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 23 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 24 User Guide www.fmeextensions.com
Slider 25 User Guide www.fmeextensions.com
Grid Left: 26 User Guide www.fmeextensions.com
Grid Right: 27 User Guide www.fmeextensions.com
Grid Top: 28 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 29 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 support@fmeextensions.com 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 support@fmeextensions.com 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 info@fmeextensions.com 30 User Guide www.fmeextensions.com