Social Media Gallery Pro

Social Media Gallery Pro Documentation

This plugin allows you to pull content form popular social media streams like: facebook albums, flickr albums, pinterest boards, soundcloud playlists, youtube playlists.

Social Media Gallery Pro is fully responsive multimedia Social Gallery packed with an insane set of features that allows to create unlimited, filterable / sortable showcase, social galleries with unlimited possibilities. Plugin Support for 5 social networks (Facebook, Flickr, Soundcloud, Pinterest, Youtube). It includes two grid types (Classic and infinite) with vertical or horizontal layout variation. It runs on all major browsers with support for older browsers like IE8 and mobile devices like iPhone, iPad, IOS, Android or Windows mobile.

Plugin have long list of features few are as follows :

  • Support for 5 social networks from which can load and display playlists, albums, sets and more (Facebook,
    Flickr, Soundcloud, Pinterest, Youtube).
  • Two grid layouts included with vertical and horizontal variation (classic and infinite).
  • Beautiful hover effects.
  • Multiple shortcode on page or post.
  • Unique settings for each gallery.
  • 100% Responsive Design.
  • Super easy to use for beginners.
  • Quick and easy setup.
  • Developer friendly.
  • Mobile optimized.
  • SEO optimized.
  • Single or multiple categories selection.
  • Filterable categories.
  • Total count on categories.
  • Optional menu.
  • Customizable menu position with variation based on layout.
  • Optional search box.
  • Optional lazy loading with load more button or scroll.
  • Multiple thumbnails hide / show animation types.
  • Thumbnails multimedia icons.
  • Adjustable thumbnails number to display / load per set.
  • Adjustable thumbnail spacings / size and much more.
  • Adjustable thumbnail geometry and styling.
  • social networks sharing.
  • Light Box View.
  • Two Light box skins included (classic and modern).
  • Unlimited color scheme.
  • 500+ Google fonts.
  • Fully customizable Lightbox.
  • Custom CSS Option.
  • Translation ready.
  • Updates and support.
  • Extensive documentation.
  • And many more..

Plugin Demo: Gallery Demo

Index:

  1.  Plugin Installation
  2.  Add New Gallery
  3.  Publish Gallery in Page
  4.  Gallery Settings
    1. Classic Gird Type
    2. Infinite Gird Type
  5.  Get Albums/Playlists/Boards URL
    1. Sound Cloud Playlist URL
    2. Flickr Album URL
    3. YouTube Playlist URL
    4. Pintrest Board URL
    5. Facebook Album URL
  6.  Frequently asked questions (FAQ)
    1. Having an ‘unknown error’ in console?
    2. What is “Container Dimension”?

Here we explaining how you can installation, configuration and publishing various galleries using Social Media Gallery Pro plugin.

Follow below steps to publish gallery :

1. Plugin Installation:

After download plugin. Upload & Activate plugin into WordPress site.

Plugin installation

Now Plugin is successfully installed

Goto Top


Go to Social Media Gallery Pro plugin menu, then click on Add New Gallery button.

add new gallery

Now Enter your Gallery Title, Select Album Type and click on add new album.

Note:- If you want to create YouTube gallery select album type as YouTube gallery.

add new album

When you click on Add New Album button, a box Layout with two text boxes added or display. Like Below Image

album box details

Album name show as menu in top bar of gallery and gallery is loaded by album URL. You can add unlimited album by clicking add new album.

Note:- Menu is optional, you can hide/show menu using setting area of gallery.

Goto Top


When you create gallery you can publish gallery in any Page/Post.

Go to All Galleries menu page. Here you get all your saved galleries. Now Click on Edit Button of the gallery you want to publish. Like Below Image

all galleries

Copy the gallery shortcode :- [SMGP id=156]

copy shortcode

Now Go to Add New Page using Pages menu. Give Title to page and paste your copied [SMGP id=190] shortcode into page content editor. Click on Publish button to publish your gallery into page.

add gallery into page

Gallery Preview into Page:

front view 2

front view 1

Goto Top


Through gallery settings you can configure GRID & EFFECT SETTINGS, IMAGE THUMBNAIL SETTINGS, MENU SETTINGS, LOAD THUMBNAIL SETTING, FONT SETTINGS, LIGHT BOX SETTINGS and CUSTOM CSS .

Gallery Setting are Changed according to Grid Layout and Grid Orientation option you selected. Classic grid setting and display style is different from infinite grid. So we describe gallery settings into two part. First we talk about Classic Gird Layout settings than Infinite Grid Layout settings.

Note :- Both Grid layout have differet functionality to preview your gallery. One give you thumbnail gallery with beautiful effects and other give you infinite scroll effect. So don’t use both grid layout on same page or post.

A. Classic Gird Layout:

Settings preview of classic grid layout

Explaining the each settings one by one.

4.A.1.  Grid Layout:

This can be Classic or Infinite. First we are discus about Classic Grid Layout.

grid layout

4.A.2.  Grid Orientation:

This can be vertical or horizontal. Like name describe gallery display in vertically or horizontally.

gird orientation

4.A.3.  Thumbnail Styles:

This can be used to change Thumbnail Hover effect. List of effects that are works when you mouse hover on thumbnails.

thumbnail style 2

4.A.4.  Max Width:

This option can be used to set gallery max width. This option show when you set Gird Orientation as Horizontal.

max width

4.A.5.  Max Height:

This option can be used to set gallery max height. This option show when you set Gird Orientation as Horizontal.

max height

4.A.6.  Image Section Background color:

This can be used to change background color of Gallery Image Section.

image section background color

4.A.7.  Hide and Show Transition Type:

This can be scale, rotation or opacity. The thumbnail animation type when they are hiding or showing.

hide and show transaction type

4.A.8.  Thumbnail Max Width:

Use this option to set max possible width of thumbnail image.

Note:- this option available with grid type classic and infinite.

thumbnail max width

4.A.9.  Thumbnail Max Height:

Use this option to set max possible Height of thumbnail image.

Note:- this option available with grid type classic and infinite.

thumbnail max height

4.A.10.  Disable Hover Effect:

This can be yes or no, disable or enable thumbnails interactivity.

disable hover effect

4.A.11. Image Hover Color:

This can be used to change Image Hover Color.

image hover color

4.A.12.  Image Hover Color Opacity:

This can be used to change Hover Color Opacity.

image hover color opacity

4.A.13.  Use Icon Button:

This can be used to show icon button on image over.

show icon button

4.A.14.  Icon Style:

This can be used to change icon style Light or Dark.

icon style

4.A.15.  Show Full Screen Button:

This can be yes or no. It hides or shows the full screen button. When you click on Full Screen button of gallery, gallery will display in full Screen.

Note :- This option available with Horizontal Gird Orientation.

show full screen button

4.A.16. Thumbnail Border Size:

Use this option to set thumbnail border.

Thumbnail Border Size

4.A.17. Thumbnail Border Color:

Use this option to set color of the Thumbnail border.

Thumbnail Border Color

4.A.18.  Space Between Thumbnails:

Think this option as spacing between Thumbnails.

space between thumbnail

4.A.19. Thumbnails Horizontal Offset Spacing:

Think of this as horizontal margin for Gallery Section.

Thumbnails Horizontal Offset Spacing

4.A.20. Thumbnails Vertical Offset Spacing:

Think of this as vertical margin for Gallery Section.

Thumbnails Vertical Offset Spacing

4.A.21.  Show TopBar:

This can be yes or no, it shows or not the TopBar above the gallery having menu and search box.

show topbar

4.A.22.  TopBar Background Color:

This can used to change top bar background color.

topbar background color

4.A.23. Show Search Box:

This can be yes or no, use this option to show or hide search box from topbar.

show search box

4.A.24.  Menu Position:

The menu position can be left, right or center.

menu position

4.A.25.  Menu Type:

The menu type, this can be list or combo box.

menu type

4.A.26.  Menu Button Normal Color:

Use this option to change menu button normal color.

menu button normal color

4.A.27. Menu Button Selected Color:

This color apply when you hover or select menu tab.

menu button selected color

4.A.28.  Menu Button Normal Text:

Change menu button text color from here.

menu button normal text

4.A.29.  Menu Button Selected Text:

This can be apply on hover or selected menu text.

menu button selected text

4.A.30.  Multi Category Selection:

This can be yes or no. you can allow user to select multiple category to view gallery by set this option ‘yes’ or set it ‘no’ to single category selection.

multi category selection

4.A.31.  Show All Category:

This can be yes or no, if you have more then one category and you want an extra category with all other categories mixed in then set this to yes otherwise set it to no.

Note:- Atleast two categories require to show All Category Tab.

show all category tab

4.A.32.  All Category Label:

If you set ‘yes’ above you can change label (tab) name from here.

all category label

4.A.33.  Total Per Category:

This can be yes or no, it shows or not the total number of items per category in the menu buttons.

total per category

4.A.34.  Loading Type:

This can be Load With Button or Load With Scroll. This option loads the thumbnail using the load more button or when the browser is scrolled..

loading type

4.A.35.  Thumbnail Per Set:

How many thumbnails to display per set in a category before the load more thumbnails button appears or the load more on scroll occurs.

thubnail per set

4.A.36.  Load More Button Label:

This can be used to change load more button label.

load more button label

4.A.37.  Load Button Normal Color:

Use this option to change Load button normal color.

load button normal color

4.A.38.  Load Button Selected Color:

This color apply when you hover or click on load button.

load button selected color

4.A.39.  Load Button Normal Text:

This can be used to change load button text color.

load button normal text

4.A.40.  Load Button Selected Text:

This color shows when you hover mouse or click on load button.

load button selected text

4.A.41.  Font Style:

This option can be used to change gallery font style, option have 500+ font styles you can select any of them.

font style

4.A.42.  Image Overlay Text Color:

This option can be used to change image thumbnail text color, like: image label.

image overlay text color

4.A.43. Lightbox Skin:

Plugin have two beautiful Lightbox skin Classic or Modern. Use any of them to preview your social content.

Lightbox Skin

4.A.44. Video Auto Play:

This can be yes or no. If you set this option “yes” video will auto play when video slide comes in lightbox.

video auto play

4.A.45. Show Slide Show Button:

this can be yes or no. Hide or show the slideshow button.

show slide show button

4.A.46.  Show Share Button:

This can be yes or no. Hide or show the Share Button with lightbox.

show share button

4.A.47.  Show Zoom Button:

This can be yes or no. Hide or show the image zoom in and out button with lightbox.

show zoom button

4.A.48.  Show Description Button:

This can be yes or no, hide or show the description button with lightbox.

show discription button

4.A.49.  Description By Default:

This can be yes or no, shows or not the description window by default.

discription by default

4.A.50.  Description Position:

This can be Up or Bottom, shows description on top or bottom of lightbox

discription position

4.A.51. Custom CSS:

This text field is used to apply custom CSS on this plugin. Custom CSS must be enter without using style tag. Simply write a custom css without < style > tag into below textarea field.

custom-css

Goto Top

B. Infinite Gird Type:

Explaining the each settings one by one.

5.B.1.  Grid Layout:

This can be Classic and Infinite. Here  we are talking about Infinite grid type.

Note:- Infinite gird type require atleast two categories and each category contain atlease 9 images. This is require to generate infinite scrolling effect.

grid type 2

5.B.2. Drag Direction:

This option represents the grid drag direction, it can both, horizontal, vertical or none.

drag direction

5.B.3. Auto Scroll:

This option can be used to enable or disable grid auto scroll.

auto scroll

5.B.4. Auto Scroll Direction:

This represents the grid auto scrolling direction, it can be down, up, left or right.

Note:- This option work when auto scroll set “yes”.

auto scroll direction

5.B.5. Thumbnail Transition Type:

This option represents the thumbnail image transition type when it first appears, it can be opacity or motion.

thumbnail transection type

5.B.6.  Max Width:

This option can be used to set gallery max width.

max width

5.B.7.  Max Height:

This option can be used to set gallery max height.

max height

5.B.8.  Image Section Background color:

This can be used to change background color of Gallery Image Section.

image section background color

5.B.9.  Thumbnail Max Width:

Use this option to set max possible width of thumbnail image.

Note:- this option available with grid type classic and infinite.

thumbnail max width

5.B.10.  Thumbnail Max Height:

Use this option to set max possible Height of thumbnail image.

Note:- this option available with grid type classic and infinite.

thumbnail max height

5.B.11.  Various Image Hover Color:

Use this option to set multi hover color scheme on image hover.

various image hover effect

5.B.12. Image Hover Color:

This can be used to change Image Hover Color.

Note:-  this option is show when Various Image Hover Color set ‘no

image hover color

5.B.13.  Image Hover Color Opacity:

This can be used to change Hover Color Opacity.

image hover color opacity

5.B.14.  Use Icon Button:

This can be used to show icon button on image over.

show icon button

5.B.15.  Icon Style:

This can be used to change icon style Light or Dark.

icon style

5.B.16.  Show TopBar:

This can be yes or no, it show or hide TopBar above the gallery having menu and search box.

show topbar

5.B.17.  TopBar Background Color:

This can used to change top bar background color.

topbar background color

5.B.18.  Menu Type:

The menu type, this can be list or combo box.

menu type

5.B.19.  Menu Button Normal Color:

Use this option to change menu button normal color.

menu button normal color

5.B.20. Menu Button Selected Color:

This color apply when you hover or select menu tab.

menu button selected color

5.B.21.  Menu Button Normal Text:

Change menu button text color from here.

menu button normal text

5.B.22.  Menu Button Selected Text:

This can be apply on hover or selected menu text.

menu button selected text

5.B.23.  Show All Category:

This can be yes or no, if you have more then one category and you want an extra category with all other categories mixed in then set this to yes otherwise set it to no.

Note:- Atleast two categories require to show All Category Tab.

show all category tab

5.B.24.  All Category Label:

If you set ‘yes’ above you can change label (tab) name from here.

all category label

5.B.25.  Total Per Category:

This can be yes or no, it shows or not the total number of items per category in the menu buttons.

total per category

5.B.26.  Font Style:

This option can be used to change gallery font style, option have 500+ font styles you can select any of them.

font style

5.B.27. Lightbox Skin:

Plugin have two beautiful Lightbox skin Classic or Modern. Use any of them to preview your social content.

Lightbox Skin

5.B.28 Video Auto Play:

This can be yes or no. If you set this option “yes” video will auto play when video slide comes in lightbox.

video auto play

5.B.29. Show Slide Show Button:

this can be yes or no. Hide or show the slideshow button.

show slide show button

5.B.30.  Show Share Button:

This can be yes or no. Hide or show the Share Button with lightbox.

show share button

5.B.31.  Show Zoom Button:

This can be yes or no. Hide or show the image zoom in and out button with lightbox.

show zoom button

5.B.32.  Show Description Button:

This can be yes or no, hide or show the description button with lightbox.

show discription button

5.B.33.  Description By Default:

This can be yes or no, shows or not the description window by default.

discription by default

5.B.34.  Description Position:

This can be Up or Bottom, shows description on top or bottom of lightbox

discription position

5.B.35. Custom CSS:

This text field is used to apply custom CSS on this plugin. Custom CSS must be enter without using style tag. Simply write a custom css without < style > tag into below textarea field.

custom-css


5. Get Album URL:

Social media gallery plugin generate gallery using your social media album or playlist url. Below we describe  how you get your album or playlist url.

5.1. Sound Cloud Playlist URL:

To get SoundCloud playlist URL, go to SoundCloud gallery. Click on share button of the playlist and copy the URL.

Now go to plugin, click on add new album. A new box appear with album name and album url.

Give album name and past copied playlist url in album URL text field.

You can add more playlist using same process. Now publish or update gallery.

SoundCloud

SoundCloud

Copy SoundCloud URL

Goto Top


5.2. flickr URL:

To get Flickr Album URL you just have to open the album and copy album url.

Now go to plugin, click on add new album. A new box appear with album name and album url.

Give album name and past copied album url in album URL text field.

You can add more album using same process. Now publish or update gallery.

image_3


5.3. YouTube Playlist:

You just need YouTube Playlist URL to create youtube gallery with social media gallery pro. You can add multiple playlist in gallery and show it very beautifully using gallery settings. Follow below instruction:-

Create a playlist or open existing youtube playlist. Copy the url of the playlist.

Now go to plugin, click on add new album. A new box appear with album name and album url.

Give album name and past copied album url in album URL text field.

You can add more Playlist using same process. Now publish or update gallery.

youtube_url


5.4. Pintrest Board url:

Show your Pintrest Board using social media gallery pro. Follow below steps to create social media gallery using Printrest:-

Open Pintrest Board and copy the URL.

Now go to plugin, click on add new album. A new box appear with album name and album url.

Give album name and past copied Pintrest Board url in album URL text field.

Like this you can add more Pintrest Board. Now publish or update gallery.

pinterest_board_url


5.5. Facebook url:

In order to display a Facebook album a Facebook app key is required, this key is obtained by setting up a Facebook app as follows:

Login into your Facebook account.

Open the following link https://developers.facebook.com/apps

Click on Create a New App button to Go to top bar menu select My Apps – > Add New App.

smgp-1

then select Website

smgp-2

Set the App Name. Like :-  UGMP. Click on Create a New Facebook App ID button. See Below Image

smgp-3

Now enter your Contact Email and select category Photo from the drop down.

smgp-4

Now click on Skip Quick Start button.

smgp-5

Now click on Settings menu on left hand side.

Enter Name Space (without any space), App Domains (Enter Your Site URL) and Click on Add New Platform Button.

smgp-6

When you click on Add Platform Button, a Popup will appear. Select website from the popup.

smgp-7

Enter your Site URL must be identical to you App Domains and Save changes. See Below Images

smgp-8

Now Click on App Review Menu on the left hand side. There is a option of make your app public set it Yes. A confirmation popup will display, confirm it.

smgp-9

After these set up Click on Tools & Support Menu from the top bar to get user access to token.

When you click on Tools & Support Menu a new page will open. Now click on Graph API Explorer Link from the give option. See below image

smgp-10

A page will Open Now Click on Get Token Drop down and select Get_User_Access_Token.

smgp-11

A popup will appear, checked user_photo  checkbox and click to Get Access Token button.

smgp-12

Now click to Get Token Button to generate user_token. Now copy the Token.

Now you app is setup and you have to change Facebook Access Token and App ID in your plugin directory.

So Go to content folder in your plugin core directory and open facebook_access_token.txt file in any text editor and replace your access_token using all ready placed token and save the changes.

Now open dcmpage.php and ipage.php file from core plugin directory and finding the Text facebookAppId in light box settings. There you have to replace your App ID with default  App ID and save changes.

Now Go to Facebook Profile Create a Album and make your Album Public.

Note:- Make sure your first image of your album must have some text in description. See Below Image.

smgp-13

Now Copy the Facebook Album URL and past in your plugin gallery and publish your gallery.


6. Frequently Asked Questions(FAQ):

1. Having an ‘unknown error’ in console?

If you have a plugin or browser extension, such as Privacy Badger, it will block Facebook or other social media tracking, which will prevent gallery from loading correctly, throwing error message ‘unknown’. See below image

before

So in order to resolved this issue disable privacy plugins that may block social media tracking on the website or white listed you domain.

Goto Top


2. What is “Container Dimension”?

Container Dimension represent the area in which image thumbs will display. Check below image for better understand.

Gallery is auto responsive so you can set max width and height of container and after this gallery will auto adjust according to screen.

Goto Top


IMPORTANT: If you found a bug in Social Media Gallery Pro plugin or have any problem/question concerning the plugin, please post your query into Social Media Gallery Pro Support Forum here in our Forum. If you do not find a solution here, do not hesitate to contact us at webhuntinfotech(at) gmail (dot) com.Thanks For Reading This Document.
WebHunt Infotech