Search…

X3 Photo Gallery Support Forums

Search…
 
User avatar
mjau-mjau
X3 Wizard
Topic Author
Posts: 12255
Joined: 30 Sep 2006, 03:37

New Release X3.29.0 :camel:

23 Jun 2020, 09:13

New Release X3.29.0 :camel:
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).
New scrollbar designs + UI
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:
Image

With new scrollbar styles, matching the skin:
Image

Scrollbar appears in sidebar menu only on mouse hover:
Image
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.
Pagenav
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.
Auth / protected pages
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.
Comparison slider [demo]
  • 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="...".
Revised image settings
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 correction
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).
Popup caption improvements
  • 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.
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 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.
Bugs / issues resolved
  • 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.
 
tbp
Experienced
Posts: 25
Joined: 12 Apr 2020, 09:19

Re: New Release X3.29.0 :camel:

23 Jun 2020, 12:22

Hi Karl,

Wow, that's impressive. Many thanks for this update!

Is this the final release or a beta version? I ask this question as I get the following in my admin panel:

New version X3.29.1 available!
New X3.29.1 BETA. More info coming shortly!

And you posted:

New Release X3.29.0
 
Boy am I excited about this release. Lots of improvements to design and functionality. I will keep notes short for now, until the official release in a weeks time:


Is it safe to update now or should I wait (until the final version)?

Thanks,
Tom
 
cedkey
Posts: 3
Joined: 06 Apr 2020, 13:10

Re: New Release X3.29.0 :camel:

23 Jun 2020, 13:11

Thank you very much for this new version. I can't wait to discover what's new. Thanks again
Cédric
 
User avatar
mjau-mjau
X3 Wizard
Topic Author
Posts: 12255
Joined: 30 Sep 2006, 03:37

Re: New Release X3.29.0 :camel:

24 Jun 2020, 00:24

tbp wrote:Is this the final release or a beta version? I ask this question as I get the following in my admin panel:

New version X3.29.1 available!
New X3.29.1 BETA. More info coming shortly!
Good question :) I am definitely hoping it is "final" release, but with so many changes, there could be patches. I have tested this version quite well, and it's already deployed on several websites (including my own). The reason it says "beta" in the panel is because I need to write a short text even before I can post anything (here or in the blog). If there are no issues reported today, I will probably remove "beta" update title in panel.
tbp wrote:Is it safe to update now or should I wait (until the final version)?
I would say go for it. Worst case scenario, there will be a patch X3.29.2, and optionally, it's easy to downgrade to X3.28.0. With "official release in a weeks time", I am basically referring to the forthcoming X3.29.0 blog post on our website.
 
tbp
Experienced
Posts: 25
Joined: 12 Apr 2020, 09:19

Re: New Release X3.29.0 :camel:

24 Jun 2020, 01:37

Thank you, Karl.

What is the best way to create a backup of my installation before updating to the new version? Just copy the entire X3 folder via FTP? Or only a subfolder - if so which one?
 
User avatar
mjau-mjau
X3 Wizard
Topic Author
Posts: 12255
Joined: 30 Sep 2006, 03:37

Re: New Release X3.29.0 :camel:

24 Jun 2020, 02:32

tbp wrote:What is the best way to create a backup of my installation before updating to the new version? Just copy the entire X3 folder via FTP? Or only a subfolder - if so which one?
It's not really necessary. When you update X3, it will ONLY update X3 application files/folders. It won't touch your /config/ or /content/ directories where you have your settings, pages and images. Even in something goes wrong, these folders will remain untouched.

If you do want to make a backup (for whatever reason), then yes you could simply make a copy of the entire dir where you have X3 installed. I personally don't see any point in this.
 
metallissimus
Experienced
Posts: 63
Joined: 17 Oct 2019, 06:54

Re: New Release X3.29.0 :camel:

24 Jun 2020, 04:21

mjau-mjau wrote:
New scrollbar designs + UI
I love it, thank you so much!
Is it possible to style them myself? Specifically I would like rounded corners (Mac style) on windows, too. Don't worry if it's not possible or too complicated, it would just be the "dot on the i", as we say in German – a last little detail making it perfect.
 
User avatar
mjau-mjau
X3 Wizard
Topic Author
Posts: 12255
Joined: 30 Sep 2006, 03:37

Re: New Release X3.29.0 :camel:

24 Jun 2020, 04:57

metallissimus wrote:Is it possible to style them myself? Specifically I would like rounded corners (Mac style) on windows, too. Don't worry if it's not possible or too complicated, it would just be the "dot on the i", as we say in German – a last little detail making it perfect.
Yes it is possible, and the CSS is not too complicated. However, it's not as straight-forward as you might think:
  • Firefox
    Firefox uses new CSS scrollbars spec and allows two values color and width (normal, thin, none) ... nothing more. You can't add rounded corners, as this will be inherited from the OS. It's just a single color (no track background) and "thin" width. On Mac, scrollbars will be rounded, and on Windows they will be square. I was considering rounding the corners in webkit-browsers to make them look like Mac, but why assume users who are used to square scrollbars want rounded corners? I think this is the best solution ... basic coloring and width, with minimal interference on the OS own scrollbars. It could be that all browsers will start to use this new CSS scrollbars spec, because it makes sense, and it doesn't mess up the users scrollbars.
  • Webkit
    Webkit now covers most browsers (Chrome, Safari, Opera), and yes you can create rounded corners. As mentioned above, I was thinking about making them rounded until I discovered it was not possible in Firefox and that Windows users are used to square scrollbars. Furthermore, when you make the scrollbars "rounded" on Windows, for some reason the scroll thumb doesn't align completely to top and bottom of screen on scroll.
  • MS Edge / Explorer
    Latest MS Edge now uses webkit, but it seems like a while until all Windows will update the browser to this version. Earlier Edge versions and Explorer 11 don't allow styling of scrollbars.
If you do want to style the scrollbar for webkit, you can take a look at this page:
https://developer.mozilla.org/en-US/doc ... -scrollbar

To simply add rounded corners:
Code
.root-scrollbar::-webkit-scrollbar-thumb {
  border-radius: 4px;
}
* You must assign these styles to .root-scrollbar class in X3, because we only add this class when the OS has physical scrollbars.
 
User avatar
mjau-mjau
X3 Wizard
Topic Author
Posts: 12255
Joined: 30 Sep 2006, 03:37

Re: New Release X3.29.0 :camel:

25 Jun 2020, 05:40

X3.29.3 was released with a fix for a bug that appears in justified gallery layout when navigating from a page without scrollbar to a page with scrollbar.
viewtopic.php?f=54&t=9998
 
User avatar
voyezvousca
Experienced
Posts: 83
Joined: 27 Mar 2011, 11:21

Re: New Release X3.29.0 :camel:

25 Jun 2020, 14:39

Hi !!

Very good news, and all is fine with your update. Thank you !!

I have one question : You will not include the popup improvement (viewtopic.php?f=51&t=9981) ?
My website using x3 : https://bit.ly/2EMEmNq
« La photographie est une brève complicité entre la prévoyance et le hasard. »
 
User avatar
mjau-mjau
X3 Wizard
Topic Author
Posts: 12255
Joined: 30 Sep 2006, 03:37

Re: New Release X3.29.0 :camel:

26 Jun 2020, 00:45

voyezvousca wrote:I have one question : You will not include the popup improvement (viewtopic.php?f=51&t=9981) ?
The idea was to keep X3 releases compact and focused on specific features. In X3.29, I wanted to emphasize only image resizer / image sizes, but this release snowballed into other directions also. Next release X3.30 should focus on the X3 POPUP and the popup only (apart from a few fixes of course). I'm hoping it won't be long!
 
jrileystewart
Posts: 4
Joined: 22 Nov 2019, 08:16

Re: New Release X3.29.0 :camel:

26 Jun 2020, 09:48

Up to now, I've avoided the X3 resizer, but perhaps it's time to use it. I've always used LR to resize / upload my images in jpg format, and didn't want X3 to manipulate the files further thinking I'd just get incremental image degradation. If I deploy X3 resizer (which only acts on jpg files I presume), should I send the file to X3 in full-size jpg (or can I send a lossless .tif?) and let X3 do all my resizing-caching management on the larger, full-size image? 
 
User avatar
mjau-mjau
X3 Wizard
Topic Author
Posts: 12255
Joined: 30 Sep 2006, 03:37

Re: New Release X3.29.0 :camel:

26 Jun 2020, 11:50

jrileystewart wrote:Up to now, I've avoided the X3 resizer, but perhaps it's time to use it. I've always used LR to resize / upload my images in jpg format, and didn't want X3 to manipulate the files further thinking I'd just get incremental image degradation. If I deploy X3 resizer (which only acts on jpg files I presume), should I send the file to X3 in full-size jpg (or can I send a lossless .tif?) and let X3 do all my resizing-caching management on the larger, full-size image? 
I think perhaps there is some confusion, and I can't blame you for that. There are TWO different aspects of X3 where we use the term "resizer":

1. X3 image resizer
One of the main updates in this release is the "X3 resizer" script. This script is responsible for creating and caching smaller resized versions of your original images, which are used in various gallery layouts. However, this script itself does not affect the original uploaded image (no matter how you upload it). This script will always do it's thing regardless of if you resize images by Lightroom or use the X3 uploader-resizer:

2. X3 upload-resizer
I see how this can be confusing, but this has actually nothing to do with the above "image resizer". The upload-resizer is the OPTIONAL feature of resizing original images as they are uploaded from the X3 panel. The advantage is that you might have original images from a camera 5000 px / 5MB, and you can then just upload + resize them in the same process. Optionally, if you want to resize and compress images from Lightroom instead, there is absolutely nothing wrong with that ... I wrote a blog post about this recently. Regardless of using this option (or not), the above "X3 image resizer" will always have a crucial role in creating and caching smaller resized versions of your images.

Am I being clear?

The remaining question might still be, should you use the X3 upload-resizer instead of Lightroom? I can answer that as a separate question, but I think it's important that the above is clarified first. The X3 image resizer will do it's thing no matter if you upload with Lightroom or from the X3 panel with X3 upload-resizer enabled.
 
jrileystewart
Posts: 4
Joined: 22 Nov 2019, 08:16

Re: New Release X3.29.0 :camel:

27 Jun 2020, 07:29

mjau-mjau wrote:
jrileystewart wrote:Up to now, I've avoided the X3 resizer, but perhaps it's time to use it. I've always used LR to resize / upload my images in jpg format, and didn't want X3 to manipulate the files further thinking I'd just get incremental image degradation. If I deploy X3 resizer (which only acts on jpg files I presume), should I send the file to X3 in full-size jpg (or can I send a lossless .tif?) and let X3 do all my resizing-caching management on the larger, full-size image? 
I think perhaps there is some confusion, and I can't blame you for that. There are TWO different aspects of X3 where we use the term "resizer":

1. X3 image resizer
One of the main updates in this release is the "X3 resizer" script. This script is responsible for creating and caching smaller resized versions of your original images, which are used in various gallery layouts. However, this script itself does not affect the original uploaded image (no matter how you upload it). This script will always do it's thing regardless of if you resize images by Lightroom or use the X3 uploader-resizer:

2. X3 upload-resizer
I see how this can be confusing, but this has actually nothing to do with the above "image resizer". The upload-resizer is the OPTIONAL feature of resizing original images as they are uploaded from the X3 panel. The advantage is that you might have original images from a camera 5000 px / 5MB, and you can then just upload + resize them in the same process. Optionally, if you want to resize and compress images from Lightroom instead, there is absolutely nothing wrong with that ... I wrote a blog post about this recently. Regardless of using this option (or not), the above "X3 image resizer" will always have a crucial role in creating and caching smaller resized versions of your images.

Am I being clear?

The remaining question might still be, should you use the X3 upload-resizer instead of Lightroom? I can answer that as a separate question, but I think it's important that the above is clarified first. The X3 image resizer will do it's thing no matter if you upload with Lightroom or from the X3 panel with X3 upload-resizer enabled.
Yes, I'm clear. I'm referring only to the X3 upload-resizer function. Thanks.
 
User avatar
mjau-mjau
X3 Wizard
Topic Author
Posts: 12255
Joined: 30 Sep 2006, 03:37

Re: New Release X3.29.0 :camel:

28 Jun 2020, 03:12

X3.29.4
  • Fixed inverted pagenav for "image landing pages".
  • Updated summernote wysiwig editor.