Codex Tag: images

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.

Architect v1.4 introduced an Alternating Feature option that swaps the featured image (or video) left/right with each successive post.   Single column Single columnAt the moment, the single column alternating feature is very popular, and not surprisingly, as it adds interest and energy where previously there was rigid repetition. Two column Two columnAnother nice grid…

What is a Focal Point? In any image, the photographer intends one point in that image to be the most important. Therefore, when you crop an image, you want to be sure you retain that point in the image. WordPress has a set of arbitrary focal points built-in, but these are often ineffective especially with…