Table des matières
  1. Introduction
    1. About this page
    2. Why ?
    3. Under the hood
  2. Updates, development, integration
  3. Carousels and exhibitions
    1. Default carousel
    2. Carousel options
      1. Carousel with no captions
      2. Carousel with hover title and captions
      3. Half-size floating carousel
    3. Exhibitions
      1. Default look (Modern)
      2. Classic look
      3. Box look
      4. Plain look
    4. Standard galleries
      1. Columns with captions
      2. Columns with no captions

GitHub code size in bytes WordPress Plugin Downloads WordPress Plugin Rating

All pictures © Aurélien PIERRE - Do not use without permission.

#Introduction

#About this page

This page uses always the latest version of Photographers Galleries and the latest WordPress version. This website uses WP Rocket plugin with JS, CSS and HTML caching, minification. These are some « real life » examples of uses of the plugin Photographers Galeries, intended to be lightweight, responsive and minimalist. For further instructions of use, please refer to the WordPress plugin page.

#Why ?

I have been an user of WordPress for the past decade. Back in 2009, fancy sliders and carousels were all the rage. Their nifty effects didn’t age well, and as soon as you installed their plugins, your website took a large performance penalty (not to mention a Google Page Speed one too). Plus, abusing external libraries like jQuery, they all got abandoned at some point, because jQuery had moved on and they stalled. That’s called bad design, or toys for kids.

If you are a visual artist, images are your content, the thing that holds your meaning. Unfortunately, in webdesign (therefore, in most themes and plugins), images are merely decoration that get cropped and squized to fit in the layout. That’s not possible for us : we need each pixel, our composition is not an accident. But computers suck, and the web sucks, because it is all built around the idea that the content width is bounded to the display width, while content height is fluid and will be adjusted. If you ever looked at a 16⁄9 or 16⁄10 screen, you understand why this is stupid : the adjustment variable is the smallest dimension of the screen. It would have made more sense to bound content to the smallest dimension, and to use the largest one as the adjustment variable.

For all these reasons, I needed a pretty and uniform way to display images in full (no cropping, and little resizing), simple, stable, lightweight and using width as much as possible. I came up with this plugin.

#Under the hood

Photographers galleries loads minified CSS and JS, only on the pages where a gallery is detected. It only uses default WordPress features, like shortcodes to wrap content, built-in galleries, and custom taxonomies. This is why, since 2016, it has needed close to no maintenance. The Javascript is native javascript, free from jQuery and any other bloatware dependency.

#Updates, development, integration

This plugin is mainly designed for my needs on this website. As of today, it is pretty much stable and feature-frozen. It will be if some bugs arise with newer WordPress updates. I will be the first to know because this website is in production.

As of today, most of the problems users have had with this plugin are related to the stylesheet of their WordPress template. In fact, Photographers Galleries rewrite some of the WP galleries styles, but depending on how your template handle them (some are very opinionated on galleries look), the rewriting could be partial and you could have to add some CSS rules yourself. As of today, I have always answered support questions on WP plugins forum, so don’t hesitate to ask.

This plugin hasn’t been tested with the latest x major releases of WordPress. It may no longer be maintained or supported and may have compatibility issues when used with more recent versions of WordPress.

That’s what the WP Plugins says. This plugin is tested everyday here since 2016 and has not needed maintenance since then.

#Carousels and exhibitions

Carousels and exhibitions are built on top of WordPress default galleries, meaning you can write your posts as usual, using default WordPress gallery shortcode, then add the carousel and exhibitions shortcodes wrappers around them just before posting. Those shortcodes only wrap galleries within a <div class="pg-carousel-wrapper"></div>, and everything is done through CSS and Javascript styling. This has the advantage of being super simple and robust, but the drawback is that the styling we add might conflict with some themes and plugins CSS rules.

Carousels support the following interactions :

  • horizontal continuous scrolling with mouse wheel, touchpad, trackpad on desktop,
  • keyboard incremental navigation with arrow keys (left/right) on desktop,
  • click/tap incremental navigation with previous/next buttons (desktop and touch screens),
  • horizontal continuous scrolling with swiping touch gesture (touch screens).

Exhibitions support the following interactions :

  • click/tap incremental navigation with previous/next buttons (desktop and touch screens),
  • keyboard incremental navigations with arrow keys (left/right) on desktop,
  • horizontal incremental navigation with mouse wheel, touchpad, trackpad on desktop.

Incremental navigation means the next/previous image is centered in the view upon user interaction.

Notice these carousels are designed with full-width pages in mind. They work for smaller widths, but it’s not the same.

Don’t hesitate to upload high-res images and to use the full size in the WordPress gallery. Since 4.4, WordPress uses responsive images and puts all available sizes into them, like :

<img src="some-pic-853x1280.jpg" sizes="344px" srcset="https://d1ehq6mh87pjr.cloudfront.net/some-pic-160x240.jpg 160w, https://d1ehq6mh87pjr.cloudfront.net/some-pic-910x1366.jpg 910w, https://d1ehq6mh87pjr.cloudfront.net/some-pic-1100x1650.jpg 1100w, https://d1ehq6mh87pjr.cloudfront.net/some-pic-1200x1800.jpg 1200w, https://d1ehq6mh87pjr.cloudfront.net/some-pic-1333x2000.jpg 1333w, https://d1ehq6mh87pjr.cloudfront.net/some-pic.jpg 1365w" width="853" height="1280" />

So at the end, the browser will chose the best size fit for the current screen size and DPI, and everyone will get served the right image. That limits interpolation issues and saves bandwidth for everybody.

Add the shortcode wrapper around the standard WordPress gallery, like :

[carousel]
[gallery size="full" ids="3942,3720,3659,3717,3886,1517"]
[/carousel]
[carousel caption="hide"]
[gallery ids="3942,3720,3659,3717,3886,1517" size="full"]
[/carousel]

The title and the captions are hidden when the cursor hovers them since there are good chances in full screen that the hovered image will be the point of interest. On mobile devices and on screens narrower than 800 px, the caption style will fallback to default and the title will be displayed above to avoid hovering issues due to touchscreen interfaces and to prevent captions to cover entirely the pictures on small screns.

[carousel caption="hover" title="My portraits"]
[gallery size="full" ids="3942,3720,3659,3717,3886,1517"]
[/carousel]

Every carousel gets its own id like #pg-carousel-1, #pg-carousel-2 etc. You could use them to make internal links (anchors) or to customize each one. When you style them through the shortcode, the custom style is applied on the id so each one gets its own style without interfering with the others.

[carousel w="50%" h="50vh" align="left"]
[gallery ids="3942,3720,3659,3717,3886,1517" size="full"]
[/carousel]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vestibulum, magna at laoreet eleifend, velit nibh interdum orci, sed bibendum justo metus ac nunc. Fusce imperdiet, eros in feugiat elementum, enim nibh fermentum justo, ac sagittis sapien metus sit amet lacus. Aliquam et viverra purus, sed pellentesque odio. Sed lacinia vehicula elit vel lacinia. Donec at arcu sodales, semper elit eu, fringilla justo. Nunc tortor leo, fringilla et mi in, finibus facilisis odio. Proin iaculis nisi at quam feugiat varius non ac erat. Etiam quam lectus, finibus quis aliquet sed, maximus ut neque. Nulla eu vestibulum erat. Nullam congue augue ut augue lobortis laoreet. Suspendisse eu libero justo. Proin vel arcu augue. Morbi ut neque vitae nulla imperdiet ultricies quis et purus. Nullam quis erat viverra, ornare dui non, porta justo. Ut posuere eros orci, at egestas elit dignissim quis. Cras felis diam, convallis laoreet aliquam vel, dapibus a elit. Suspendisse turpis magna, vestibulum ac odio id, fermentum efficitur ex. Curabitur pellentesque tellus vel sollicitudin efficitur. Quisque dignissim orci velit, sed auctor libero lacinia quis. Ut vitae dolor a ex auctor molestie eget vel sem. Aliquam metus dolor, venenatis nec ipsum non, congue fermentum elit. Nulla rutrum mattis ligula, eu aliquam felis pulvinar eu. Fusce sed felis vitae nulla pharetra efficitur non sed neque. Proin maximus malesuada enim eget elementum. In at pharetra leo. Fusce tempor nunc non mattis accumsan. Aenean pulvinar enim in enim viverra imperdiet sed eu dolor. Donec ultrices erat posuere tortor ornare, et tempor sem semper. Mauris dolor metus, luctus eget enim vulputate, bibendum porta arcu. Sed at mollis orci. Aliquam gravida vulputate justo, eget consequat est scelerisque eget. Donec leo enim, molestie et tristique quis, ultrices a enim. Nam vel est ut tortor maximus commodo. Integer eu convallis mi. Sed condimentum enim velit, vel feugiat orci malesuada a. Mauris vitae tortor a felis tempor tristique non eget augue.

#Exhibitions

Exhibitions are a new feature of the version 1.0. They are meant to provide a museum-like experience, full-width and full-height. They have 4 looks :

plain
basically just white,
modern
(default) minimalist look, similar to alu-dibond mounting
classic :
tradition mounting and framing with a passe-partout
box
modern « american » shadow box, available in 3 colors because my wife nagged me : box-bright, box-dark, and just box which is the average one.
*
you can create your own custom looks in CSS, the HTML wrapper will get a class named look-xxx where xxx is whatever name you give as an argument

#Default look (Modern)

[exhibition]
[gallery size="full" ids="3942,3720,3659,3717,3886,1517"]
[/exhibition]

#Classic look

[exhibition look="classic"]
[gallery size="full" ids="3942,3720,3659,3717,3886,1517"]
[/exhibition]

#Box look

[exhibition look="box-dark"]
[gallery size="full" ids="3942,3720,3659,3717,3886,1517"]
[/exhibition]

#Plain look

[exhibition look="plain"]
[gallery size="full" ids="3942,3720,3659,3717,3886,1517"]
[/exhibition]

#Standard galleries

Photographers Galleries styles the default galleries of thumbnails to use fluid columns.

#Columns with captions

No extra shortcode required, just the regular WordPress gallery. Notice lightboxes and links will continue to work as usual.

[gallery size = "full" columns="3" link="file" ids="3942,3720,3659,3717,3886,1517" columns="3"]

#Columns with no captions

[nocaption]

[gallery size="full" link="file" ids="3942,3720,3659,3717,3886,1517" columns="3"]

[/nocaption]