Managing Galleries

As gal­leries are at the core func­tion­al­i­ty of our Bor­der theme, we’ve pre­pared a straight­for­ward man­age­ment sys­tem, which will empow­er you to man­age and enhance your work through gal­leries, in no time. You can add new gal­leries from Gal­leries → Add New page.

All you have to do in order to enrich your gallery with images is to click on Add Image and a modal win­dow will show up (the Media Uploader). Here you can Drag & Drop images from your com­put­er or add already uploaded images to the gallery.

*Note: In the same modal win­dow, after adding images you can drag & drop them to change their order.

The gal­leries have a set of spe­cif­ic options that will allow you to con­trol the lay­out & style.

The Tem­plate Style option will allow you to spec­i­fy whether your gallery will be a Grid Lay­out or a Slideshow (slid­er).

  •  Grid Lay­out — can be either a square grid (equal­ly sized grid items) or a mason­ry lay­out (each image will be dis­played with its orig­i­nal aspect ratio).
    • Grid Thumb­nails — Square or Mason­ry options to choose from, in order to dis­play your gallery as we’ve men­tioned above;
    • Show gallery title — The title of the gallery will be dis­played in the first block, near your images;
    • Social Share But­tons — Dis­play your social shar­ing but­tons;
    • Exclude From Archives — Exclude the gallery from the gal­leries archives (main, cat­e­gories, etc).
  • Slideshow — will dis­play your images in a fullscreen slideshow with bor­der (with the pos­si­bil­i­ty of extend­ing it to a true fullscreen set­ting via the top right but­ton). Videos will be also shown direct­ly in the slid­er.
    • Image Scal­ing — Allows you to con­trol how we will lay­out the images in the giv­en screen space of the slid­er. The Fill set­ting will stretch and crop your images to com­plete­ly fill the space. The Fit option will shrink your images the com­plete­ly fit in space with­out any crop­ping, but with emp­ty spaces;
    • Show Near­by Images — Allows you to show the pre­vi­ous and the next image left and right of the main cen­ter image (50% of the hor­i­zon­tal screen space will be occu­pied by the cen­ter image and the remain­ing 25%+25% by the next and pre­vi­ous);
    • Slid­er Tran­si­tion — Allows you choose whether the slides will move or fade when going to the next or pre­vi­ous slide;
    • Slid­er Auto­play — Allows you to set the slid­er to auto­mat­i­cal­ly start when load­ing the page. Once acti­vat­ed you have the option of set­ting the Auto­play Delay Between Slides (in mil­lisec­onds);
    • Full-Screen But­ton — Allows you to hide or show the top right but­ton that allows your vis­i­tors to enter the slideshow in full-screen mode for a more dis­trac­tion-free expe­ri­ence;
    • Social Share But­tons;
    • Exclude From Archives.

When cre­at­ing a gallery with the Slideshow tem­plate you can choose to dis­play an ani­mat­ed cov­er over the first slide image.

You can choose from the three dif­fer­ent cov­er styles and set the title and sub­ti­tles for each, along with the Text Col­or. All the set­tings regard­ing the fontsfont sizes for these two text types (depend­ing on the cov­er style) are con­trolled from Cus­tomiz­er.

You can com­bine all of the above with the option to Use the first gallery image as a cov­er.

Every image from a gallery can behave as a hold­er of a YouTube or Vimeo video.

From the edit gallery modal win­dow, when select­ing an image, an option­al Video URL input field will appear in the right side­bar. There you can paste a YouTube/Vimeo URL along with choos­ing if you want to Enable Video Auto­play option.

Note that image will open the video in a modal if is in a Gallery Grid or Mason­ry Tem­plate. If it’s in a slid­er, the video will be shown as a slide.

While you are still in the edit gallery modal, you should know that an image can also act as an exter­nal link. Which means that when you’ll click on the image it will open a new tab with the attached URL.

Well, this was a long one, right? Nonethe­less, this is the back­bone of Bor­der so we have put most of our effort into it. We hope you enjoy the tools we have devised to help you beau­ti­ful­ly show­case your awe­some cre­ations.

Addi­tion­al Read­ing:

This article applies to Border, and Lens as they share the same underlying structure.

Updated on May 3, 2017

Was this article helpful?