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!

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 Tools › Cache › Image Cache Cleanscreen
  Automatically deletes all expired image resize cache items.
• New Tools › Cache › Image Cache Deletescreen
  Allows you to delete 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). Includes detailed reporting and [simulate] option.

New image resizer options

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

• Smart crop
  Attempts to crop images based on "interesting" areas (for examples faces).
• Sharpen images
  Sharpens resized images slightly to prevent images from becoming blurry when they are resized. This was always enabled, but now you have the option to disable it.
• Progressive images
  This was always enabled before, but has now been disabled by default.
• Allowed request widths
  As a precaution, the X3 resizer will now block all resize request widths that are not used by X3. You can add custom request widths here.
• Max memory limit
  The X3 resizer has the capability of dynamically increasing the PHP memory limit on server if an image resize operation requires more memory than assigned by default.

Debug and errors

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

• Removed resizer errors from image output and replaced with extensive reporting in HTML.
• New ?debug method allows debugging an image resize request without caching it.
• New image response headers show what the image was resized to and from, memory usage and output time: x3-resizer: Rendered and cached [1600x1201 => 200x150, 9.9M, 112ms]

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.

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

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.

• Mostly affects browsers on Windows OS.
• 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).
• Sidebar and slidemenu overflow scrollbars hidden in Explorer 11 and earlier versions of Edge.
• For the main body (right) scrollbar, we apply minimal styling that matches the X3 skin.
• New overscroll behavior in mobile and slidemenu prevents main document from scrolling when scrolling the menu.

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.

• 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 › Positionscreen
• New Settings › Plugins › Pagenav › Fixed position autohide.

More Features

• 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 want to display the title only if image title is explicitly assigned forum
• New Settings › Popup › Popup Caption › Caption Items › Filename
  Display filename in popup caption regardless of image title. Disabled by default.
• New Settings › Mail › Form response text
  Allows you to display text after contact form is sent. Response text can also be set on a per-form basis by using data-response="..." in the form.
• 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.
• New Page Settings › Page › Advanced › Page CSS
  Include custom CSS for current page and current page only.
• New Page Settings › Page › Advanced › Page Javascript
  Include custom Javascript for current page and current page only.
• EXIF image orientation correction
  Images that have image orientation (rotation) value stored in EXIF can cause problems, especially now that some browsers support EXIF orientation directly in the browser. For correct display across all browsers and for resized images, it's critical that all images are correctly rotated on upload. The X3 upload-resizer will now always rotate images based on EXIF orientation and will also update the image's EXIF orientation value after rotation (see github issue). For images that don't get resized on upload, image orientation will get corrected on server (PHP) after upload if required. Furthermore, we have disabled browser-based EXIF orientation, which could cause incorrect orientation and/or squashed image aspect in some browsers. Since EXIF orientation correction is now automatic, we have removed Settings › Panel › Uploader › Automatic orientation options.
• Primary skin color from CSS variables
  Nothing new from a viewers perspective, but this technical change should be noted. You would be surprised how much technical plunder it 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.
• 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 meant that hover effects were not working on dual-input devices with mouse AND touchscreen. X3 now uses CSS hover @media queries so that effects will trigger correctly on all devices that have "mouse pointer" as primary input mechanism. Furthermore, since we now use CSS for input events, we have been able to remove "touch", "no-touch", and "mouse_used" CSS classes from the main HTML element.
• Authentication / protected pages
  Re-factored X3 authentication (password protected pages) for a faster and better implementation. Improved support for basic authentication in X3 for servers running PHP as FastCGI (updated .htaccess file).
• Comparison sliderdemo
  Improved design for comparison slider plugin. Hover no longer creates dark background. Click anywhere on slider to move. Hover texts "before" and "after" can be set from data-attributes data-before="..." and data-after="...".
• Revised image settings
  Following my image size and quality post, I have revised default size and quality settings for images. Default upload resize changed to 2048 x 2048 (from 1600 x 1600) and quality changed to 80 (from 95). Image resize quality changed to 85 (from 90).
• 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 sidebar layout improvements.
• Slideshow captions re-styled, with title in bold above description on new line demo Added new classes "slideshow-title" and "slideshow-description" for easier custom styling.
• Improved and cleaned CSS stylesheets (skins), reducing file size by ~ 10 kb.
• New Settings › Mail › Verify SSL certificate, allows you to disable SMTP SSL verification.
• Removed Settings › Mail › SMTP Debug. Debugging is now automatically enabled if contact form fails, with short message on page and extended output in browser console.

Bugs and issues

• 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 1 px Javascript miscalculation.
• 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.
• 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.
• Fixed bug with some mouse hover transitions in latest Firefox release.
• 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 in internet explorer contact form in pages with special /chäràctērs/.
• 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 forum
• If popup caption is empty (no caption items), caption background will now remain hidden.
• Disabling popup title no longer disables popup caption if there are other caption items.
• Fixed so that you can select "none" for Mail › SMTP Secure without defaulting to "TLS".

Happy updating 😎

Recommended

Optimizing Images for Photo Websites

A fresh look at optimal size and quality settings for high-quality images in modern photo gallery websites.