GalleryPlus gallery in Architect

  • Contents

  • 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.

    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

    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

    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

    Add a title and short name

    Give your new Blueprint a relevant Title and Short name

    Set the Blueprint width

    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

    Set the Content source

    Under the Content Selection tab,

    1. Set the Content Source to Galleries 
    2. Set the Gallery Source to GalleryPlus 
    3. Select your gallery
    Set the maximum image dimensions

    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

    Publish/update the Blueprint.

    Setup the Architect block

    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

    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

    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

    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

    Set the image title colour

    Lastly, we will set the colour of the Architect Entry title to white. 

    Save.

    View the results

    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.