Boy am I excited about this release :star: Lots of improvements to design and functionality. Read all about it:
photo.gallery/blog/x3-29-image-resizer-and-more/
How to update?
See docs or simply navigate to X3 Panel > Tools > X3 Updates and click "update now".
New X3 image resizer
Most importantly in this release, we have re-created the X3 image resizer from scratch. The X3 resizer is the script that is responsible for resizing and caching all images in your X3 website as they get requested with url's like /render/w640/path/image.jpg. This script operates independently from the rest of the X3 website, but it is an extremely important part of X3 that gets called for all image requests.
- Direct /render cache (fast!)
Cached images will now get created directly in the path they are requested. For example, resize request /render/w640/path/image.jpg will now get created physically in that exact path in your X3 directory on server. The result is that following requests (after the image is resized and cached) will be served the image directly from server (Apache, Nginx etc) without having to pass through the PHP resizer script to check if the image is cached or not. I anticipate this could serve cached requests 0.1 seconds faster, which in itself is not a lot, but imagine you have a page with 100 images ... That's 10 seconds faster loading for the entire gallery. Then multiply that will all your galleries and all your visitors, and there is lots of time and resources saved! * The new direct-cache mechanism depends on a few changes in the .htaccess file. - Image cache management
With the above in place, it means image cache files will be located in paths that correspond to the path of the original source file. For example, resize cache paths /render/w640/path/image.jpg and /render/w320-c1.1/path/image.jpg will correspond to source file /content/path/image.jpg. This means we can now easily track when cache files expire, and then delete them, by checking if the corresponding source file exists and that the cache files are not older than the source file. * Before, cached resized images had encrypted names that did not link them to the original source, and we could only delete them in the case they were not requested (unused) for 3 months or more.- Panel will now automatically check and delete unused / expired / orphan image cache items every time it opens.
- New Tools > Cache > Image Cache Clean allows you to manually check for expired image cache items.
- New Tools > Cache > Image Cache Delete allows you to delete one or more resize cache items based on a full or partial path match. Can be used to delete cache for a specific image or delete all cache for a folder (including subfolders). Detailed reporting with simulate option.
- Debug / Errors
- Removed the unproductive errors that were written directly into image output when there were errors. Instead, if there is now extensive reporting in the output in native html format where there are errors.
- New ?debug method allows fully debugging an image resize resource without caching it.
- New image response headers which shows what the image was resized to and from, memory used and time taken. Example: x3-resizer: Rendered and cached [1600x1201 => 200x150, 9.9M, 112ms].
- Legacy Cache
If updating from a previous X3 version, your _cache/images/rendered dir will be used for converting resize cache to the new direct render path format. This dir can be kept for a few months (max) until it is empty or until the images inside are expired. - Single optimized PHP file
The X3 resizer, which was previously made up of 4-5 scripts, is now coded into a single PHP file. This script gets called once for every image in a gallery, so it's optimal to keep it as compact as possible for maximum performance. The code itself has also been optimized and compacted, with lots of junk removed. - New Settings > Advanced > Image Resizer > Smart crop, which attempts to crop based on "interesting" areas of an image (for example faces).
- New Settings > Advanced > Image Resizer > Sharpen images. This was always enabled before, and should probably remain enabled, but now you have the option to disable it.
- New Settings > Advanced > Image Resizer > Progressive images. This was always enabled before, but has now been DISABLED by default.
- New Settings > Advanced > Image Resizer > Allowed request widths. As a precaution, the X3 resizer now blocks all resize request widths that are not standard X3 resize widths. If you have custom resize width requests, you can add custom widths here.
- New Settings > Advanced > Image Resizer > Max memory limit. The X3 resizer has the capability of dynamically increasing memory limit on server, in the case an image resize operation requires more memory that assigned. Here you can set the max memory limit allowed to be assigned.
- Removed "use request cache" option, which was in any case inferior to new direct /render cache mechanism.
- Removed h (height) and q (quality) from render url request parameters. Height is not used in requests and quality is set globally.
- Directory _cache/images/* has been removed from X3 (although it will be kept for a while when updating existing X3 websites).
Scrollbars are tricky because they look and work differently across OS (Mac vs Windows) and across different browsers. They even work differently in the same OS depending on OS settings and input device (trackpad vs mouse). Luckily, in 2020 most modern browsers support some kind of scrollbar customization ... Firefox uses new CSS Scrollbars while webkit browsers (Chrome, Safari and Opera) support webkit-scrollbar and now even latest Microsoft Edge has migrated to webkit. I don't like messing around too much with native UI, but action was required.
Before, you could end up with something like this:
With new scrollbar styles, matching the skin:
Scrollbar appears in sidebar menu only on mouse hover:
scrollbars continued ...
To see actual results across all OS + browser combinations, you could check the X3 demo and use the styler (bottom right button) to check various layouts. Scrollbar design won't be identical across all browsers, but it will be similar, and definitely improved. New scrollbar designs mostly affect OS/browsers (mainly Windows) that use physical scrollbars (scrollbar that consumes width on the page). For example, most touch devices and Mac OS (depending on settings) will remain unaffected, because scrollbar only displays as an overlay when user scrolls. We don't want to (or need to) customize scrollbars on these devices, as it may cause unwanted scrollbar behavior. In X3 we initially use javascript to detect if the browsers scrollbar "has width" and then act accordingly.
- Mostly Windows OS desktop browsers affected.
- Mac OS affected only if scrollbars are set to show "always" or depending on input device.
- Touch devices remain mostly unaffected.
- Latest Microsoft Edge uses webkit (will look like Chrome).
- Earlier versions of MS Edge as well as Explorer 11, overflow scrollbars in sidebar and slidemenu layout will be hidden. It's quite intuitive that the vertical menu's can be scrolled, even without scrollbars appearing.
- For the main body (left) scrollbar, we apply minimal styling that matches the X3 skin.
- New overscroll behavior in mobile + slidemenu prevents main document from scrolling when scrolling the menu.
Many improvements to the "pagenav" plugin / buttons (see demo) on sides of screen that allow navigating between sibling pages. This plugin was earlier reserved only for desktop 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).
- Pagenav buttons now work on mobile / touch devices.
- Pagenav buttons re-designed and re-coded.
- Pagenav buttons now use page LABEL (if set) instead of folder name.
- Pagenav buttons display page TITLE (if set) on mouse hover.
- New Settings > Plugins > Pagenav > Position: Fixed / Fixed + Bottom / Bottom.
- New Settings > Plugins > Pagenav > Fixed position autohide.
Re-coded auth / password protected pages for a faster and better implementation. Improved support for basic authentication in X3 for servers running PHP as FastCGI (updated .htaccess).
X3 Mailer / contact form
- New Settings > Mail > Form response text, which allows you to display success text (html) after form is submitted. Form response text can now also be set on a per-form basis by using data-response="Thanks!" attribute in the <form> element.
- Added option "Verify SSL certificate" which can be disabled when using SMTP servers with self-signed or outdated certificate.
- Fixed so that you can select "none" for SMTP Secure without defaulting to "TLS".
- Removed debug option. Debug will apply automatically when the contact form fails. Short debug messages on page (if fail), with extended output in browser console.
- Improved design. Hover no longer creates a dark background.
- Click anywhere on slider to move.
- "Before" and "after" texts can be set from attributes data-before="..." and data-after="...".
Following my latest blog post about image size and quality, I have revised default settings for images:
- Default upload resize set to 2048 x 2048 (changed from 1600 x 1600).
- Default upload resize quality changed to 80 (from 95, which was way too high).
- Image resize quality changed to 85 (from 90). Smaller images require slightly higher quality than large (original) images, because compression is more visible when images are small and/or don't scale on screen.
EXIF image orientation is another complicated issue, even more so now that some browsers support EXIF orientation while some don't. The only current solution is to always make sure image orientation gets corrected on upload.
- Upload resizer will now always correct EXIF orientation value after automatically rotating images. Before, the original EXIF orientation value would remain, but would then be wrong after the image gets rotated. This could lead to issues now with modern browsers supporting exif image orientation values. See github issue.
- For images that don't get resized on upload, image orientation will get corrected on server (PHP) after upload.
- Disabled browser-based EXIF image orientation for images displaying in popup, which could cause incorrect orientation and/or squashed image aspect in browsers that support EXIf orientation.
- Settings > Panel > Uploader > Automatic orientation options removed. Now, EXIF orientation will always be corrected, either from the uploader (on resize) or after upload (on server by PHP).
- New Settings > Popup > Popup Caption > Caption Items > "Create title from filename if empty title". In the case image TITLE is not explicitly set, popup caption title will instead be populated by the filename (excluding extension). This was always default behavior, but you can now disable this option if you only want to display the title if image title is explicitly assigned (not replaced by file name).
- New Settings > Popup > Popup Caption > Caption Items > Filename. Display filename in popup caption, regardless of image title. Disabled by default.
- Above options are available in global settings > Popup > Popup Caption > Caption Items and page settings > gallery > popup > caption items.
- If popup caption is empty (no items), caption background will now be hidden.
- Fixed so that disabling popup title no longer disables the entire caption if there are other caption fields enabled.
Nothing new from a viewers perspective, but this technical change should be noted. You would be surprised how much technical plunder it is/was to assign the custom primary color to X3 skins, which involved looping through CSS stylesheets with Javascript and overwriting color values. With the emerging CSS variables feature supported by most browsers (above IE11), this process has become much easier and applies much faster. CSS variables is the future of custom styling, and will be used much more in future versions of X3. * We have added a polyfill so that primary skin color is backwards compatible with Internet Explorer 11.
CSS hover @media queries
Previously, many X3 mouse hover effects were set to trigger only on no-touch devices (eg. laptops/desktops with mouse or trackpad). However, this means that these hover effects were not triggering on modern dual-input devices with mouse and touchscreen. X3 now uses modern CSS hover @media queries, which means mouse hover effects will trigger correctly on all devices that have "mouse pointer" as primary input mechanism. Since we now use CSS to detect input mechanism, we have been able to remove "touch", "no-touch", and "mouse_used" CSS classes from the main HTML element.
More improvements
- New Page Settings > Page > Advanced > Page CSS. Add custom CSS for current page and current page only.
- New Page Settings > Page > Advanced > Page Javascript. Add custom Javascript for current page.
- New Page Settings > Page > SEO > Robots, allows you to set the page robots meta tag which decides how a page is indexed by search engines. For example, "noindex" will prevent the page from being indexed by search engines.
- Dozens of updated plugins in frontend and backend, including jQuery 3.5.
- Removed all settings and references to Google + as it is no longer relevant.
- Various X3 sidebar layout improvements.
- Slideshow captions re-styled, aligned left, with title in bold above description (on new line) [see demo]. Added new classes slideshow-title and slideshow-description for easier custom styling of slideshow caption.
- Improved transitions on page load and navigation between pages, depending on scrollbar.
- Improved and cleaned CSS stylesheets. X3 CSS skins have been reduced by ~ 10 kb.
- Fixed an issue with scrollbar always being visible (most notably on "intro" pages) even when there was no vertical scroll. * This was caused by a javascript miscalculation which caused the page height to always be at least 1 px taller than the window inner height.
- Fixed an issue with empty "ghost" scrollbar appearing in slideshow "intro" mode when there is no page scroll. This issue was caused by the slideshow rendering on screen in pixels before the browsers scrollbar is removed after page navigation. * This issue was slightly complicated to resolve (because of the browser scrollbar appearing or disappearing), but we have successfully patched it.
- CSS mouse "hover" styles now work on dual-input devices (devices with both mouse and touch screen), as long as "mouse pointer" is the primary input mechanism.
- Saving image data (title, description etc) into IPTC meta no longer invalidates image cache.
- Saving image data into IPTC meta no longer modifies image file date.
- Fixed bug with some mouse hover transitions in latest Firefox browser.
- Fixed bug in internet explorer contact form in pages with special /chäràctērs/.
- /chäracters/ + Fixed encoding in page url template.
- Fixed bug in custom popup on click "zoom".
- Fixed a bug on iOS with tabs plugin when refreshing page.
- Page Settings > Page > SEO > Description is now expandable text area.