Slide & Gallery Demo

half width slide-show

< Slide >

This macro creates a figure element containing an image with controls to step through the .jpg images in a specifed folder. Like my other image macros it creates optimized versions in the /_images folder to improve performance and clicking on an image will open the full size original in a separate folder.

This demo explored images and galleries over multiple columns in the Big Angry Dog (bad) theme. I decided you have to keep galleries out of multi column containers. I also couldn't prevent the image caption being qwrapped to the column unless I put it right on top of the image... so, that's why it's there on the BAD theme.

two folders and a stray picture concatenated in one gallery

By way of experiment I've put 6 original selfies into this demo folder, but disabled internet access to the whole thing. As you can see, the php scripts can access these files anyway and even create optimized versions of my selfies in a gallery. However, you will get forbidden (403) when clicking to see the original selfies and not when you click on the plant slides. I've also explicitly tagged on a .jpeg image to this display (the one that shows the code I had write to create this gallery). See below for an explanation of the significance.

Changing to the "bad" theme that has multi-column display the effect of the gallery spliting over the multiple columns is a distraction that might not be wanted, however the theme only applies multi-column to "article" elements. Putting the gallery outside of the article sections

The independent script gallery.php is intended for load on demand viewing of a gallery folder. The Big Angry Dog theme does not define a loading zone and so the load-on-demand doesn't know where to put it, but in other themes one can in fact specify any folder on my site and it will still show the reduced versions for all the .jpg images that reside there, even if the folder it self has public access denied because the optimized images are not stored there.

This may be undesirable and so it was most expedient for the ap_gallery macro to only do .jpg (lower case) files. Naming some images with a different file extension (e.g. .jpeg) has the convenient potential to exclude images from a gallery, yet their reduced versions can be automatically generated and remain perfectly usable explicitly on my web pages.

row_count attribute

HTML allows me to define my own attribute tags. So I specify row_count="3" as the attribute of the aside gallery here. In the Big Angry Dog theme that should be down the side, but in the Angelica theme an activator button is substituted.

row_height attribute

Web design consideration

The presentation in any theme is associated with semantic entities, however when the multiple columns attribute is applied as I chose to do in the article sections of the Big Angry Dog theme, it does make a big difference if you place galleries inside or outside such sections. Splitting a gallery over multiple columns tends to make a big mess of it and even for individuakl images and videos too there will be a big difference when they are placed withing the multi column scope. This is an area where content and theme creation can benefit from a convention.

Back in multi-column mode, but next to a aside section the columns are narrower as the column count is determined based on the window display width, but there is not a lot I can do about that.

I also implemented row_height as an attribute and set it to 180 pixels in the following gallery which I deliberately take out of multi-column article section... maybe the only concession to theme consideration in my page definitions and that too is not something that could be automated.

In both the above I specified class ap_justify, which means they get tweaked after the page has loaded to make the rows flush with the gallery width, but leaving the final incomplete row (if any) with it's target height and some empty space.