Web Development & Execution
Justin Colangelo
by Justin Colangelo
share this
?fl
« Back to the Blog

Dynamic Media Module

12/08/2016
Dynamic Media Module

Coming up with user friendly promotional modules and various ways for a client to customize their content has been a challenge over the years. Our custom CMS allows us to build schemata for content making the client's editing process much more simple. It's fairly similar to an interface in a programming language. The client has to fill in the fields that are provided, but doesn't have to worry about what the HTML looks like.

 

In the example of a media page, a client could have videos, articles, and photographs. Here is the result of creating a schema that allows a user to enter a list of grid items in different sized grid rows. They choose the type of grid item (Photo, Video, Article) and then choose to have it pulled dynamically or not.


photovideogridschemaentry

HandlebarsJS is responsible for binding this data in the HTML. Here is a sample of that structure.

photovideogridhtml

 

 

There are three handlebars templates in this example. Each one applies to a specific grid item type.

 

 

The logic in the HTML is basically checking to see if the Is Dynamic option is checked for that iteration of the grid item, and if it is checked, a placeholder is added to allow for the Javascript to get content. If it is not checked, the content entered for that grid item is used.

 

 

This next code assumes an Instagram API key has been generated and jQuery is being used.

 

 

 


if ($('.photo-video-grid .grid-item-Photo .placeholder').length) {
            var imageCount = $('.photo-video-grid .grid-item-Photo .placeholder').length;

            // You can change these options
            var endpoint = 'users',
                options = {
                    query: '',
                    count: imageCount
                };

            var ajax,
                accessToken = '',
                feedUrl = 'https://api.instagram.com/v1/' + endpoint + '/' + options.query + '/media/recent/?access_token=' + accessToken + '&count=' + options.count;

            ajax = $.ajax({
                url: feedUrl,
                dataType: 'jsonp'
            }).done(function (json) {
                var $photos = $('.photo-video-grid .grid-item-Photo .placeholder'),
                    template = Handlebars.compile($('#instagramTemplate').html()),
                    data = json.data,
                    html,
                    $currentImage;

                $(data).each(function (index) {

                    if (imageCount > index) {

                        html = template({ photos: [this.images.standard_resolution.url] });

                        $currentImage = $photos.eq(index);
                        $currentImage.html(html);
                        $currentImage.closest('.grid-item').attr('href', this.link).attr('target', '_blank');
                    }
                });

            });
        }

 

 

 

 

This code will fetch as many Instagram images from the API as it needs to fill the placeholders with a grid item type of Photo.

 

 

 

The result, assuming the content is styled already, is something like this:

 


photovideogridpage

 

 

 

The code for other types of grid items is similar. The article type pulls a list of articles from the CMS by date descending and fills the placeholders. The YouTube API is being used for items of type Video, though it could easily be written to select different sources.

 

 

 

The Dynamic Media Grid makes it much easier for clients to display content. They can either enter the grid item data themselves, or choose to have each item pulled dynamically.

 

 

 

Thanks!

Thank you for contacting us!

We'll be in touch!

Back Home ×