Creating Photo Galleries In Live Composer

Custom Post Types in Live Composer

Live Composer page builder includes a few custom post types predefined out of the box. 
  • Downloads – for any free downloadable materials. It can be e-books, case studies, business reports, free songs or sermons. 
  • Partners – used to create profiles for your clients, partners or sponsors. This post type includes fields for logo and description.
  • Projects – are good for promoting your job. Use this post type for projects, portfolio items or case studies.
  • Staff – designed to manage information about people. It includes a photo, description, job title and links to the social profiles.
  • Testimonials – used to share what other people are saying about your product or brand. Unlike other custom post types, testimonials will not create separate posts. You can use it only to output a listing of quotes as a grid or a slider.
  • Galleries – are great for websites that share lots of photos grouped by event or type. For example, you can have one gallery per wedding if you are a wedding photographer.
Every custom post type creates separate pages. You can all also list all the posts as a grid or slider on any page. Grids come with a filtering feature as shown below.

What we will create in this tutorial

In this tutorial, I'll show you how to create Photo Galleries on your website. I will create one gallery per service: product photos, corporate portraits, and food pictures as shown below.

Every gallery will have a separate page with photo slider and description as on a screenshot below.

Please remember, you can customize any gallery or page element in Live Composer. You are not limited to use a particular layout or styling. Grab a cup of coffee and come with an idea of the gallery design that is unique for your website.

Firstly, create a few galleries and fill it with content

It will be much easier to customize and understand how to display galleries if your fill it with data first.
Go to WP Admin > Galleries > Add Gallery and fill with image and descriptive content.

Here is how this data shows on the single gallery page:

Here is how this data shows on the gallery listing:

Create template for a single gallery page

Once you filled the gallery posts with data, you need to tell the Live Composer how to display this content on the page. Let's go to WP Admin > Galleries and click on Add Gallery button.

Create a new template with the next parameters: Post Type > Galleries, Base > Plugin Template  and Type > Default.

Publish template (1) and click on the permalink (2) to open it in Live Composer.

Since you are just creating a new template, you will see a blank page. Click on " Create Template" button to start designing.

Create the template layout by placing elements/modules on the page. 

It's important to understand that only elements from the " For Templates" category fetch the data from the WP Admin part of the post (in our case Gallery Post). For example, Title element will get a text from the title field of the post you are visiting.

I created a very simple layout with Gallery Slider on the left and Title followed by The Content module on the right.

After saved, the gallery should look like this.

Want to show images in a grid instead of a slider?

There is a possibility to display the gallery images in a grid using  Gallery Images Grid extension. This extension is coming as WordPress plugin. Once installed it will add a new "Gallery Images Grid" element in Live Composer.

You can place the Gallery Images Grid element on any page. For example, you can have a page describing a real estate property. One of the page sections can have a gallery grid with images of the property.

Creating galleries listing

You can display all the website galleries on any page, using Galleries element. Let's create a simple page advertising photo services and listing our galleries in a grid.

Join our  Live Composer Facebook community and share with other site developers your designs created in Live Composer.

We want to improve this article

If you have unanswered questions or found a mistake in our docs, please let us know using the contact us link below.