How to load image and video list from a JSON web service in WordPress Grid Gallery

Product:

Wonder Portfolio Grid Gallery

This tutorial will show you how to load image and video list from a json service in the plugin Wonder Portfolio Grid Gallery.

Step 1: Setup a JSON web service

In this tutorial, we will use PHP to create the JSON web service

In the web service, you need to create an array of images and videos, then use json_encode to output the result to client side. A demo is as following:

<?php
// The play list can be dynamically created from database or whatever you like. 
$playlist = array(
	array(
		"thumbnail" => "https://www.wonderplugin.com/wp-content/uploads/2015/06/wordpress-portfolio-video.jpg",
		"link" => "https://www.youtube.com/embed/pChmieCDWpo",
		"title" => "Big Buck Bunny - YouTube",
		"description" => "This is a YouTube video",
		"alt" => "YouTube video",
		"lightbox" => 1,
		"category" => "video"
	),
	array(
		"thumbnail" => "https://www.wonderplugin.com/wp-content/uploads/2013/12/Elephant_Dreams_954.jpg",
		"link" => "https://player.vimeo.com/video/1132937?title=0&byline=0&portrait=0",
		"title" => "Big Buck Bunny - Vimeo",
		"lightbox" => 1,
		"category" => "video"
	),
	array(
		"thumbnail" => "https://www.wonderplugin.com/wp-content/uploads/2013/12/Wilderness_1024-300x225.jpg",
		"link" => "https://www.wonderplugin.com/wp-content/uploads/2013/12/Wilderness_1024.jpg",
		"title" => "Wilderness",
		"lightbox" => 1,
		"category" => "image"
	),
	array(
		"thumbnail" => "https://www.wonderplugin.com/wp-content/uploads/2013/12/Big_Buck_Bunny_2_1024-300x225.jpg",
		"link" => "https://www.wonderplugin.com/wp-content/uploads/2013/12/BigBuckBunny_1.mp4",
		"title" => "Big Buck Bunny",
		"lightbox" => 1,
		"category" => "video"
	),
	array(
		"thumbnail" => "https://www.wonderplugin.com/wp-content/uploads/2013/12/Desert_1024-300x225.jpg",
		"link" => "https://www.wonderplugin.com",
		"title" => "Desert",
		"lightbox" => 0,
		"linktarget" => "_blank",
		"category" => "image"
	)
);
echo json_encode($playlist);
?>

There are five items in the list. The first four items will open the specified link in a lightbox on clicking. The last item will open the link in a new tab on clicking.

Step 2 - Connect WonderPlugin Portfolio to the web service

In the plugin, step 3, Options tab, Advanced Options, add the following text to the Data Options input box:

data-remote="https://www.wonderplugin.com/gridgallery-jsonservice.php"

Please note, due to cross-domain issue, the domain of the web service must be the same as the gallery.

A demo is as following:

The available keys are as follows:

Key Description
thumbnail thumbnail image URL
title title of the item
description description of the item
alt alt attribute of the thumbnail image. If the key is not specified, the plugin will use the title as the alt attribute.
link the link on clicking the thumbnail
linktarget target of the link
lightbox whether to open the link in lightbox popup
lightboxwidth width of the lightbox
lightboxheight height of the lightbox
category category slug of the item. The category must be defined for the gallery in the plugin. If the item belongs to multiple categories, seperate the category with colon, for example, "category" => "image:landscape".
For how to define categories and show the category buttons, please view the tutorials: How to create a WordPress gallery with categories