Photo Gallery X3.29.0

New improved image resizer, new scrollbar designs, updated page navigation plugin and many more features and improvements.

Photo Gallery X3.29.0

In this update, we present to you a brand new image resizer with several new features, new pleasing scrollbar designs, improved page navigation plugin and much more.

How to update?

Navigate to Panel › Tools › X3 Updates See X3 Docs


New image resizer

In this release we have re-created the X3 image resizer with several new features, all packed into a single PHP file for optimal performance. The X3 resizer is responsible for resizing and caching all images in your X3 galleries as they get requested. Although the X3 resizer is independent from the rest of the X3 app, it is an extremely crucial part of X3 which gets called for all image requests.

Direct render cache ⚡

Cached resized images will now get created directly in the path matching the request. For example, resize request /render/w640/path/image.jpg will now create the resized image in that exact path in your X3 dir on server. Following requests will then be served the image directly from server without having to pass through PHP to check if the image is cached or not. This could serve cached requests 0.1 seconds faster, which in itself is not a lot, but imagine you have a gallery with 100 images ... That's 10 seconds faster loading for all images in a single gallery. Multiply that with all your galleries and all your visitors and there is loads of time and resources saved!

When updating from a previous X3 version, the obsolete _cache/images/rendered directory will be kept while converting resize cache to the new direct render path format.

Image resize cache management

With the new render cache, resized images will now get stored in paths that correspond with the original source image path. This means that the X3 panel can now automatically check and delete unused, expired and orphan image resize cache items every time it opens.

New image resizer options

Several new image resize options under Settings › Advanced › Image resizerscreen

Debug and errors

New debug and error reporting makes it much easier to diagnose resizer issues.

New scrollbar designs

Scrollbars are tricky because they look and work differently across browsers and operating systems (Mac vs Win). They even work differently in the same OS depending on settings and input device (trackpad vs mouse). Luckily, in 2020 most modern browsers support some form of scrollbar customization. Firefox uses new CSS Scrollbars while webkit-browsers (Chrome, Safari, Opera and latest MS Edge) support webkit-scrollbar. I don't like messing too much with native UI, but after extensive testing, I found that changes were required, especially for sidebar and slidemenu layouts.

Under some circumstances you could end up with scrollbars displaying like this.scrollbars before

X3.29 includes scrollbar styling that matches the skin, with scrollbar only appearing in sidebar on mouse hover.scrollbars before

To see results across various browsers and skins, you could check the X3 demo and use the styler (bottom right button) to check various layouts. Scrollbar behavior won't be identical across all browsers, but it will be similar and definitely improved. New designs mostly affect OS/browsers that have scrollbars which consume width on the page. Most touch devices and Mac OS (depending on settings) will remain unaffected, because scrollbars only displays as overlay on user scroll. We don't want to customize the scrollbar on these devices, as the design is already non-invasive and minimal. X3 uses javascript to detect if scrollbars consume width.

Pagenav

Many improvements to the page navigation plugin / buttons [demo] on sides of screen that allow navigating between sibling pages. This plugin was previously reserved only for devices that supported mouse hover. Now, pagenav buttons will display at bottom of screen for devices that don't support mouse hover (most touch / mobile devices).

Page navigation buttons now appear at the bottom of page on mobile / touch devices.Page navigation plugin on mobile

More Features

Bugs and issues

Happy updating 😎



Comments