In October 2018, when I released jAlbum Bridge I had no idea WordPress would replace its post editor (TinyMCE) with a completely new one (Gutenberg, later Block Editor) in two months. Unfortunately, the new editor was not backward compatible, and even more unfortunately they failed to provide comprehensive documentation at that time.
I must admit the new editor is lightyears better in terms of user-friendliness and its WYSIWYG (“what you see is what you get”) nature. Nevertheless, I finally failed to turn the plugin Gutenberg-compatible. It was frustrating; I’ve spent so much time on developing a deprecated piece of software. The plugin has received negative reviews for being “abandoned” deservedly, and even WordPress warned us they would close the plugin if we failed to update it. Finally, Anders gave me a hand by kickstarting the development, which was a big help.
In the new plugin, it’s not only the user interface changed but under the hood, all the transitions were rewritten too to make them smoother, and some new features were added as well. For instance, there’s a new transition – zoom – and a few new sort options too. Editing the raw HTML title and image caption templates got removed – which was a bit techy anyway –, so you can only choose from the predefined designs now.
The new WordPress also allows the blocks to be wider than texts, which looks great with galleries – so jAlbum bridge 2+ allows this option too. Use the alignment button above the block! (Works only in themes that support it.)
Usage
The first step is installing the plugin through the Admin panel of your WordPress site.
Naturally, you can also download and place the plugin right into the /wp-content/plugins folder of your WordPress directory.
Search for “jalbum-bridge” …
… install …
… and “Activate”.
Back in the post editor when you click the (+) (add block) button “jAlbum Bridge” will be listed under the “Embeds” category. You can also start typing its name to find it quicker.
In the Inspector Panel enter the URL of the album’s top-level page and the projector will immediately appear. You can use site root relative (e.g. /albums/2020) and absolute address.
If you want to show only a specific folder, enter the relative path to the folder in the Settings / Initial Folder box below (e.g. path/to/folder).
Most settings are self-explanatory – I hope –, and the behavior is immediately reflected in the editor, making it much easier to get the desired look than before.
One setting is not applied in the editor: no links to the real album are generated. I just wanted to avoid driving users crazy who want to select a block ending up in the album instead, effectively leaving the editor.
By default, the projector will use the Slideshow / Slide transition, but I encourage you to experiment with different transitions. Once ready press Preview to check out the final look!
Note to existing users
As WordPress’s new Block Editor has a fundamentally different way of storing the projector settings, the projectors created with earlier versions are not automatically converted to blocks. They will still appear as shortcodes – but no settings window is available like before. This way your old projectors will continue to work, but it is probably worth adding them again as blocks.
If only the jAlbum bridge held you back from the new Block Editor, now it’s time to move on and enable the new interface – you won’t regret it.
If you still want to keep with the short-code version here’s a small cheat sheet for the parameters:
| Attribute | Meaning | Default |
|---|---|---|
| albumurl | The absolute or site-root relative path to the album (mandatory). | |
| align | The projector width: center|wide|full, where “center” has the same width as the text content. | center |
| ar | Aspect ratio – width/height – as a percentage, e.g. 80 | (depends on type) |
| captiontemplate | The template for the image caption – in HTML format. Available variables: ${label} – File name without extension${name} – File name${fileDate} – File modified date${comment} – Comment added in jAlbum${title} – Title${fileSize} – File size${category} – Category: image|audio|video|other${keywords} – Keywords added in jAlbum${rating} – Rating added in jAlbum${location} – GPS location | (empty) |
| captionplacement | The horizontal/vertical placement of the image caption, e.g. right middle | center bottom |
| captionstyle | The color of the image caption: white|light|transparent|dark|black | dark |
| depth | By default, the projector will have links to images in the real album. By setting this attribute to true you can avoid generating these links. | 2 |
| disablelinks | By default, the projector will have links to images in the real album. By setting this attribute true you can avoid generating these links. | false |
| folder | In the case of “slideshow” types this is the maximum number of images to gather. In the case of “carousel” this can’t be bigger than 15. With grid-like layouts:
| (empty) |
| gap | Taken into account with grid type layouts: grid, masonry, mosaic, strip. Possible values: none|thin|small|medium|large|xlarge | none |
| include | The type and order of items to gather: images|folders,images|images,folders|folders | images |
| layout | In the case of “slideshow” types this is the maximum number of images to gather. In the case of “carousel” this can’t be bigger than 15. With grid-like layouts:
| (depends on type) |
| ordering | Ordering of the images gathered original|date|date-reverse|name|name-reverse|size|size-reverse|random | original |
| slideshowdelay | The length of time between transitions (= pause time) in milliseconds | (depends on transition) |
| skipduplicates | The projector can skip duplicate images (e.g. if the same is used as folder thumbnail). You can disable this behavior by setting this attribute to | true |
| titletemplate | The horizontal/vertical placement of the title, e.g. left middle | (empty) |
| titleplacement | The horizontal / vertical placement of the title, e.g. left middle | center top |
| titlestyle | The color of the album title: white|light|transparent|dark|black | white |
| type | Projector type: slideshow|grid|masonry|mosaic|strip | slideshow |
| transitionspeed | Length of transition in milliseconds (type = slideshow only): 0–10000 | (depends on transition, typically 1000) |
| transition | Transition type (type = slideshow only): crossfade|zoom|kenburns|stack|slide|swap|carousel|flip| book|cube|coverflow | slide |
Here is how such a short code looks like:
[jalbum_bridge albumurl="/album/Lucid%20development" include="images" /]
Add the necessary parameters and you are good to go.
I hope you’ll find this tool a useful addition to your WordPress site. If you liked it please honor my efforts by giving a somewhat better rating than today on the plugin’s page. 🙂
If you happen to get stuck we are here to help in the jAlbum Bridge forum.
Leave a Reply
You must be logged in to post a comment.