Using Media Grid WordPress Plugin

by Jun 23, 2014Website Tips, Wordpress Plugins0 comments

Media Grid WordPress Plugin was designed by LCWeb, a developer for Code Canyon. Media Grid comes with masonry layout, is designed to adapt each portfolio to any situation and is mobile optimized for responsive themes.

 

This demonstration will explain how to set-up an installation where a selection of artists are displayed on a page using Media grid. The artists image then links to a page where their art is subsequently displayed using the same Media grid plugin.

The Media Grid Process

  1. Create a Media Grid Category called ‘Artists’
  2. Create a Media Grid Category for each artist ‘Artist Name
  3. Load the images you want to display into the Media Grid Menu item and assign a category. If the image is of the artist then assign it to the ‘Artists’ category.
  4. Build the grid and select the images you want displayed and the sizes you would like.
  5. Edit the page where you want the grid displayed by selecting the shortcode builder from the post menu bar .

1. New Artist

Start a New Page: Go to Pages and select Add New. Title it Artist Name.

In our example we are using the Divi Theme by Elegant Themes and we have set-up a page design called Artist.

  1. Select [Use Page Builder] button.
  2. Click [Load Layout] and Select [Artists Page]
  3. Click on the triple bar to the left of the Team Member section and a dialogue box will open

 

  1. Enter the artists name
  2. Use Artist as position
  3. Upload an image of the artist or use one you’ve already loaded into the Media library
  4. Add Social Media URL’s in the sections below
  5. Enter the artist bio in the paragraph area below the Social Media section
  6. Click [Save]

The next section called ‘Text’ is where you will select the artists media grid once you have built it. We will come back to that later. For the time being we just want to add the page, so choose a parent page [The Artists] and click [Publish].

Before you leave the page copy the permalink below the page title.

2. Media Grid for Artist

Now we need to add the Media Grid for the Artist.

  1. Find Media Grid in your Admin Menu and select [Add New Item]
  2. Use the artists name for a Title
  3. Check the category for Artists
  4. Under Item Options select Link
  5. In the Link URL enter the permalink from the Artists page you just created
  6. Go over to the Featured Image box and click on [Add Featured Image]
  7. Select an image for the artist from your Media or upload a new image
  8. If you are going to show a square image on the front end page of the website and your uploaded image isn’t square you can tell the software where it should focus when cropping to a square image. Do this in the Thumbnail center above your featured image.
  9. Click [Update] or [Publish]

 

3. Artists Grid

Find the Grid Builder in the Media Grid Menu

  1. Click on Artists Grid List
  2. Select the Artist you just built the Media Grid for in the Add Grid Items box
  3. Click [Add]. This will move the newly added item to the bottom of the grid
  4. Click and hold the item to move it anywhere in the grid you would like
  5. You can change the width and height on any item in the grid
  6. Click [Publish]

The Grid is responsive so it may not display the same on your screen as someone elses. Different devices have different sizes and this software is designed to show your images in all devices. So, for example, your device may not show four columns even if you have chosen the 1/4 width.

4. Artists Portfolio Grid

Now that we have an artists page and a link to the artists page from the Artists Media grid we can add the artists portfolio images.

  1. Add an Item Category for the Artist in the Media Grid sub menu
  2. Add a Media Grid item for each painting. For each Media grid item:
    1. Add a Title
    2. Select the Artists Name for the category
    3. Use Single Image for Item Options
    4. Add a Featured Image
    5. Decide on the focus in the Thumbnail Center
    6. Decide on the dimensions in Item Sizes (this can be adjusted later when you create the grid)
    7. Click [Publish]

 

5. Build the Grid for the Artists Portfolio

  1. Open the Grid Builder
  2. Select the Artists Name
  3. Filter on the Artist Category (works well if you have a lot of images)
  4. Select the image you want to add
  5. Click [Add]. This will move the newly added item to the bottom of the grid
  6. Click and hold the item to move it anywhere in the grid you would like
  7. You can change the width and height on any item in the grid if you would like
  8. Click [Publish]

Add Portfolio to Artists Page

Open the Page for the Artist and click on the triple bar in the text section

Delete the previous shortcode (shown in blue below)

Click on the Short code builder button for the Media Grid

  1. Select the Artists Grid you want to add
  2. Select whether you want the title to show below it
  3. Select [Insert Grid]
  4. Then Click [Save] to save the module
  5. Then Click [Update] or [Publish] to save the page changes

Congratulations!

Now Refresh your browser and take a look at your marvelous work. Congratulations!

If you already have an artists page and you are just adding paintings you don’t have to go to the Artists page at all. All you need to do is add Media Grid images (#2) for the new works and add them to the Artists Grid (#3).

This is a good video that will give you a quick overview of how it works.

 

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.