Setup your first album
The Gallery block for Headway is pretty straight forward, but this guide goes over the specific steps required to setup the block.
Step 1: Install the block
If this is the first time that you are installing a third-party Headway block, we highly recommend you watch our Installing a Headway block video.
Step 2: Create your first album
Once the block is successfully installed and activated, you will see the Gallery section in the left WordPress admin menu. Click on the “Add new Album” link, where you will add your Album content and images.
Step 3: Add the Gallery block to the Gallery Post Type Single-View
Now that you have created your first album, pop-over to the Headway Grid and add a new block instance to the Single > Album page, selecting Gallery from the available block types. This is essentially adding a default layout for all your future albums.
When you add an instance of the Gallery block to the Album Single page, the “Mode” option will automatically be set to the Album view.
Saves your changes, then go back to your newly created album in the WordPress admin, then click on the View Album link, near the post type input.
4.) Configure your layout
By now you will have a functional Album, using the default settings. At this point you can start playing with the block’s options. To access the options, simply right click on the block instance in Headway.
5.) Style your album using Headways Design Inspector
The last step is where you make any styling changes, using Headways point-and-click Design Inspector. We’ve added styling hooks for all the elements in the block, but if you want to create an album layout that is a bit more advanced, custom css might be needed. This is due to Headway not having support for all the available css properties.
Congrats! You’ve just created your very first album! Now go add a couple more and where you’re done, move onto the “How to setup a page list your albums“.
Setup your album index
The Gallery block has to main views. The first is the Albums View, which is used to display a list of the albums you have created. We’ll be using this view to setup the album index.
Create a new page to display your albums on
For the purposes of this example, we are going to create a new page called “My Photos”, so you can head over to your WordPress Pages Manager, then proceed to add a new page. You can name this page anything except for Gallery, as that is reserved for the Gallery custom-post-type slug. We will be adding an option to change this in the near future.
Once you have saved your page, you can click on the “Open with Visual Editor” button that is displayed below the page title and slug. This will open up Headway, with the page you just created preselected.
Add a new instance of the Gallery block
On the new page you created, drag a new block instance and select the Gallery block type.
Select the albums view
Once the block’s options are displayed, on of the first options you will see is to select which view you would like to display. Go ahead and select the “Albums” view.
Configure the albums layout
The block includes many options to customise the layout of your Albums. Make sure you are in the Headway Visual Editors Design mode, so that you can see your changes take place live in the Headway site preview.
Customise the styling
Every element that is loaded in the Gallery can be edited using the Visual Editor. We’ve added extensive hooks so that it’s super easy to create your desired layout. It’s important to not that, while we have added many design hooks in the block, there is still only so much you can do, without reverting to some custom css.
Save your changes and then click on the View Site link on the top right of the Visual Editor. This will open the page you just created, so that you can see how it looks. You should have a fully functional Albums Index page by now.
Setup your single image layout
In the previous two tutorials, you would have created your first album and setup the relevant album view, as well as setup your Albums List view. In this tutorial, we’re going to show you how to setup the layout to display individual images from your album.
The Media layout refers to the page which is used to display a single image in your album. Since we’re using the core WordPress Media manager to store your images, this guide will refer to the single image as the Media View.
Add a new instance of the gallery block
To begin, you’ll need to pop back into the Headway Visual Editor, then select the Single > Media page, which is listed in the Headway pages menu and drag a new instance of the Gallery block.
Select the media view
Once you’ve selected the Gallery as the block type and the block options are displayed, you can proceed to set the View to Media. The block should automatically detect that you are on the media view.
Configure the media layout
The single image layout has a few additional features, which can be enabled from the block options. You will only see the Media View options if the Media View is selected.
That’s it! You have now successfully setup a fully functional image gallery using the Gallery block!