GalleryPlus gallery in Architect
In this tutorial, we will look at how to use GalleryPlus galleries in Architect. GalleryPlus was an add-on for the Headway theme framework.
It should be noted that Architect does not include layouts for the horizontal accordion or the rotating carousel.
Of course, you can do grids, sliders, sliding carousels, masonry, tabbed, vertical accordion and tabular layouts with Architect.
In this tutorial we will recreate a slideshow layout but you display your GalleryPlus galleries in any of Architect’s layouts.
This document can be viewed online at: https://architect4wp.com/codex/galleryplus-gallery-in-architect/
The GalleryPlus gallery
In WordPress, you will have GalleryPlus galleries which are just another post type that contains a stand WP gallery which GalleryPlus was then using.
GalleryPlus example
And you would display a gallery in one of the available layouts, such as the slideshow.
Create a new Blueprint from the Image Slideshow preset
The Image slideshow preset is pretty much exactly what we want, so go ahead and use it. As we don't have Architect styling enabled, we can use either styled or unstyled, and we will style it in the Headway Visual Editor
Add a title and short name
Give your new Blueprint a relevant Title and Short name
Set the Blueprint width
In the Blueprint Design tab, set the Blueprint max width.
In this example, we will match it to our image maximum width.
Set the Content source
Under the Content Selection tab,
- Set the Content Source to Galleries
- Set the Gallery Source to GalleryPlus
- Select your gallery
Set the maximum image dimensions
in the Content Layout tab, go to the Featured Images/Videos tab an set Limit image dimensions as required.
This is the maximum size the images will display. On smaller screens they will scale or trim accordingly.
Publish/Update
Publish/update the Blueprint.
Setup the Architect block
In the Headway Visual Editor, draw you Architect block on the required layout and assign the default Blueprint as the one you just created, and Save.
Note: You can of course display the Blueprint with any of Architect's methods - shortcode, widget etc
Initial review
Refresh the page the Architect block is displayed on to see how it looks.
It should just require a little styling to finish.
Style the Architect block
In the Headway Visual Editor Design Mode, we have styled the Box Shadow, Margins, and Padding to give us a similar appearance to our GalleryPlus slider
Style the Components group background
The get the title to appear on the semi-opaque black background, set the Background colour transparent black of your choice. We have used 60% transparency.
You will also need to set some padding here. We have used 10px.
Set the image title colour
Lastly, we will set the colour of the Architect Entry title to white.
Save.
View the results
Refresh the page with the Architect block on it and you should have a similar looking slideshow as you previously had with GalleryPlus.
