Syntax highlighting and the new Multi Maker
jAlbum 22 is here and comes with 17 improvements and bug fixes. Here are 3 improvements I think are especially welcome:
The new Multi maker
Ever wanted to be able to continue using jAlbum while making albums in the background? Ever wanted to make and upload several albums in one go? This has actually been possible via the rather hidden “Batch make album” external tool, but with jAlbum 22, this functionality is now improved and added as an integral part of jAlbum. Just open it via Tools → Multi maker and select the projects to make and possibly upload too, then hit the “Make selected” button. You can now minimize this window while jAlbum is working and continue using jAlbum.
The album- and image descriptions you enter don’t need to be plain text. They can be formatted in html to get the styling you want, or perhaps add a link? jAlbum 22 now assists you getting the html syntax right by colouring various elements for you as you type. If you don’t know any html, just use the new embedded visual html editor (click the eye button in the top-right corner of description fields).
Updated html editor
Talking about the embedded html editor. With v21 we added visual html editor to assist styling your description texts. This editor did however not play well with existing html text, so with v22 we’ve listened to critisism and replaced the underlying code library with one that respects whatever html formatting you’ve already added (Squire). Enjoy
Latest postsjAlbum 22 highlightsProjector 2.0Group images by calendar eventsjAlbum Bridge reborn for WordPress’ new Block EditorTell your story
with the new Story skinPresenting jAlbum 20Meet the new rating widget and play with photo data!Online jAlbum is now 100% Flash free!jAlbum interviewed in WebsitePlanetIntroducing Lucid skin
We've released Projector 2.0 a few days ago. The big news is the interactive preview on the User Interface which makes customizing the skin a lot easier; you don't have to Make Album and Preview every time to test a color or a particular setting.
Naturally, this preview cannot reflect the effect of each and every setting, still it'll save you from a lot of guesswork, hopefully.
Under the hood
Perhaps not the most spectacular change, but all picture transitions were rewritten to avoid lags and choppiness. By the way, this code was originally made for our wordpress plugin - jAlbum bridge 2.0 - which has also been updated recently to work with WordPress' interactive Block Editor.
Even more goodies...
- Separate background image controls for all three components: the side bar, the cover and the lightbox.
- Redesigned sleeker icons both for the user interface and the album too.
- You can now use Google fonts for the small texts too, not only for the headlines.
- Automatic switch to full screen on mobiles upon slideshow start.
- New full screen button to control screen mode manually (on desktops).
- Folder thumbnails can be "rounded" (see above!) and "square" too besides the classic "circle".
Comments are welcome – please post bug reports in the skin’s own forum.
If you're a heavy user of your computer's calendar and have loads of unorganized images, then you'll love jAlbum 20.2's new "Organize by calendar" feature that can tag and group (move into folders) images by matching calendar events, judging by the camera date. Here I have set up a "Seasons" calendar within Apple's Calendar app representing the four seasons Winter, Spring, Summer and Autumn.
These events are set up as yearly recurring events (inspecting the "Summer entry here"), but you might have weekly or daily recurring events for a school or work curriculum or simply ordinary single events, like "Summer vacation in Mallorca", "Visit to grandma" etc :
The next step now is to export your calendar as an ".ics" file:
Now it's time to move to jAlbum. Here I happen to have a bunch of unorganized images from various seasons:
I now right-click between them and select "Organize->Group by Calendar". I'm now presented with a dialog that prompts me to point out the .ics calendar file I just exported. You can either drag and drop .ics files or specify a URL to the .ics file. Once done, I verify that I wish jAlbum to match both single and recurring events and also have the images tagged with matching events. I finally hit the Process button.
Done! The matched images have now been grouped under folders representing each matched event. If you have nested events, that is events within events, then jAlbum will create a nested folder structure too. Great isn't it? If not, just hit undo.
Remember to check out jAlbum's other flexible organizing options, for instance "Group by Date" and "Group by Place".
All at jAlbum 20.2!
In October 2018, when I released jAlbum Bridge I had no idea WordPress will replace its post editor (TinyMCE) with a completely new one (Gutenberg, later Block Editor) in two months. Unfortunately, the new editor was not backwards compatible, and even more unfortunately they failed to provide comprehensive documentation at that time.
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.)
One setting though is not applied in the editor: no links to the real album is generated. I just wanted to avoid driving users crazy who just want to select a block and they end 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’ 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 short codes – but no settings window is available like before. This way your old projectors will continue to work, but it probably worth adding them again as blocks.
If it’s 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.
If you still want to keep with the short-code version here’s a small cheat sheet for the parameters:
|albumurl||The absolute or site-root relative path to the album (mandatory).|
|align||The projector width:
|ar||Aspect ratio – width / height – as percentage, e.g.
||(depends on type)|
The template for the image caption in HTML format. Available variables:
|captionplacement||The horizontal / vertical placement of the image caption, e.g.
|captionstyle||The color of the image caption:
|depth||The depth of album folder levels to gather images from.
|disablelinks||By default the projector will have links to images in the real album. By setting this attribute to
|folder||The initial folder the gathering of images should start. Leave empty for the top level album page!||(empty)|
|gap||Taken into account with grid type layouts: grid, masonry, mosaic, strip. Possible values:
|include||The type and order of items to gather:
In case of “slideshow” types this is the maximum number of images to gather. In case of “carousel” this can’t be bigger than 15. With grid-like layouts:
|(depends on type)|
|ordering||Ordering of the images gathered
|slideshowdelay||The length of time between transitions (= pause time) in milliseconds||(depends on transition)|
|skipduplicates||The projector is capable of skipping duplicate images (e.g. if the same is used as folder thumbnail). You can disable this behavior by setting this attribute to
The template for the album caption in HTML format. Available variables:
|titleplacement||The horizontal / vertical placement of the title, e.g.
|titlestyle||The color of the album title:
|transitionspeed||Length of transition in milliseconds (type = slideshow only):
||(depends on transition, typically 1000)|
|transition||Transition type (type = slideshow only):
Here’s how such a short code looks like:
[jalbum_bridge albumurl="/album/Lucid%20development" include="images" /] – just add the necessary parameters and you are good to go.
I hope you’ll find this litle tool a nice and 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.
Half a year ago one user called our attention on a gallery made with Adobe Spark. Besides the stunning photos, the page design was also modern and sexy. It went beyond the confines of a traditional web album, with lengthy texts between photos and stylish animations. This type of use has escaped our attention so far, although many of our users would have appreciated it, I take. This is how Story skin was born.
You can simply drop a handful of photos onto Story – they will look decent –, still this skin excels in its ability creating crafted text-heavy stories. Not only the text, but the presentation of the thumbnails is unique here. They come in 3 flavors making the layout much more exciting. Check out below!
Beyond the new look Story skin has received all the bells and whistles of Tiger or Photoblogger skins; the search, shopping cart, feedback, background music, Google maps just to name a few.
The opening view is a full screen "hero" image, which you can overlay with a semi-transparent color. If you press "Enter" the page scrolls down.
The control buttons are fixed to the top left corner so all the functions remain visible.
This page starts with a custom section. You can add one by New page → Custom.htt. Add "Title" used for headline, add content through the "Comment" field.
The images can be displayed in 3 different modes: as thumbnails, as single images and as full-width images. The skin automatically sorts them out by their aspect ratio.
The widest images are treated as full-width, the images with aspect ratio less than 3 : 2 as thumbnails. The rest in between are treated as single (column-width) images. To control these thresholds visit the Story → Design → Images panel.
If you want to override this automatic treatment for a specific image go to Edit mode → Image data → Treat image as.
These full width images might act as chapter separators. Their title is set in larger font so they stand out.
Blocks of thumbnails in masonry layout look the best if you supply the skin with images of variable orientation / aspect ratio. It pays playing with their order too for the best look.
Folders can be inserted at any place in this skin. The larger thumbnail on the left is the image selected as "Folder thumbnail", the other 3 are randonly picked from the folder on every "Make".
The folders have an alternative background color here, which can also be used for custom sections, thumbnails or simply in an alternating manner.
This skin also novel in the way it handles custom pages. You can leave them as separate pages – just like before –, but in Story you can embed them into the index page too. This results in a single-page layout, which saves visitors from unnecessary navigation.
Here you can play with this album: Tell your story