Photo Gallery X3.25.0

X3.25.0 is essentially a massive core/code update, but with several new features like GPS map links, auto-cache and GDPR required consent.

Photo Gallery X3.25.0

New release X3.25.0 is essentially a massive core/code update, but with several new features like GPS map links, auto-cache and GDPR required consent. The feature list for this release is extensive and somewhat technical, but I have tried to list in order of interestingness. Happy updating!

How to update?

Navigate to Panel › Tools › X3 Updates See X3 Docs

GPS Map Links [X3 Pro]

Most modern cameras and smartphones will store GPS location data in photos, now used by X3 to create Google map links for your images. New map links are available for the X3 popup and can also be assigned to gallery layout captions.

Popup Demo Gallery Demo

Instructions

There are two ways to include map links from the X3 panel.

  1. Popup Map Link  [X3 Pro]
    Go to Settings › Popup › Caption and check the [Map button] option screen  You can also enable map button on a per-page basis from Page › Gallery › Popup settings.
  2. Gallery Caption Map Links
    Go to Page Settings › Gallery › Captions and add the [maplink] item to any caption screen
NB! X3 can only create map links from geotagged photos. If you want to check if your photos are geotagged, get the url for one of your images and diagnose it from metapicz.com.

GDPR "Required Consent" Checkbox.

Some of you have been waiting for a "required consent" checkbox for contact forms to comply with EU GDPR regulations. Below is a simple example of an X3 required checkbox inside a form. When a checkbox is set to "required", the form will only send if the checkbox is checked.

Instructions

To include a required checkbox in your contactform, simply include a checkbox with the "required" attribute alongside a label with text of your choice. You can find examples of a "required" checkbox in the content editor contact form templates screencode




Should I be adding this to my contact form?

We know some of you feel compelled to add a "required consent" checkbox, but in our professional opinion, it is not required for ordinary contact forms. We recommend reading this article and our post in the X3 forums for further details.

Preload Website Auto Cache Wow!

This feature is difficult to explain, but it is really cool so I will make an attempt: Have you visited our X3 Demo and navigated pages from the menu? Did you notice how fast pages display without any loading? This is thanks to the X3 preload website feature screen The difficulty with this feature is that A) it requires you to "create site object" after every change made from the panel and B) It is a heavy task that your server may not be able to process.

Solution: Preload Website Auto Cache

So, because we loved this unique X3 feature so much, we decided to make an automated option and enable it by default. X3 will now automatically build the "preload website" data file progressively as your pages are visited. Once the data file starts populating, it will load into the visitors browser, allowing other pages to display immediately without any loading. Essentially, your X3 website will seem extremely fast and satisfactory to all visitors! more technical info

  • Preload Website Auto Cache is enabled by default, but can be disabled or changed to manual [create] from Panel › Settings › Advanced › Preload Website screen
  • Preload website set to [auto] is entirely automatic and requires no management.
  • The auto-cache data file will populate progressively as your pages are navigated. Once the data is populated by some (eventually all) pages, navigating your website will seem incredibly fast.
  • The auto-cache data file will invalidate every time you make changes in the panel. Therefore, you will not see any benefit until at least a few pages are navigated after editing from the panel.
  • The auto-cache data file is loaded via Javascript (ajax) after initial page is loaded.
  • The auto-cache data file is highly compressed via gzip. By example, the entire data file for the X3 demo website with 50+ pages loads in at less than 42 kb screen
  • If you already had the "preload website" feature enabled before updating to X3.25.0, the option will remain on manual "create" unless you change it to "auto".

Javascript Update

X3.25.0 includes a massive Javascript update, resulting in faster loading, improved functionality and a more responsive X3 interface. We have removed, replaced and updated plugins, now mostly loaded on-demand from JSDelivr CDN, reducing the X3 Core Javascript to less than half size.

jQuery 3

While X3 previously used jQuery 2.x, we have now updated X3 to use latest jQuery 3.3.1. jQuery is used extensively in the X3 application, and updating to jQuery 3 required a lot of code re-factoring, with jQuery 3 being slimmer, faster and better optimized for modern browsers.

Updated Scripts and Plugins

Most plugins have been updated and are now loaded independently from the X3 Core Javascript. Some plugins will load Asynchronously after X3 load, while most plugins are served On-demand, meaning they will only load if and when required. Furthermore, all Javascripts and CSS are now loaded from the super-fast JSDelivr CDN Show updated plugins

  • Fotorama slideshow plugin updated to 4.6.4 On-demandCDN
  • Font Awesome icon fonts updated to 4.7 AsyncCDN
  • Cookie consent plugin updated to 3.0.6 On-demandCDN
  • CodeMirror syntax highlighter plugin updated to 5.38.0 On-demandCDN
  • Waypoints vertical scrollnav plugin updated On-demand
  • Velocity JS animation engine updated to 1.0.1 CDN
  • String.js methods updated to 3.3.3 CDN
  • Twentytwenty comparison slider plugin updated to 1.0.0 On-demandCDN
  • NProgress JS loading indicator updated to 0.2.0 AsyncCDN
  • Autosize JS textarea expander updated to 4.0.2 On-demandCDN
  • Timeago relative time plugin updated to 1.6.3 On-demandCDN
  • Screenfull.js fullscreen plugin updated to 3.3.2 On-demandCDN
  • LoadCSS and hoverintent.js updated to latest versions.
  • The following plugins have been removed or replaced by native X3 Javascript: TaffyDB, purl.js, dropdown.js, interchange.js, joyride.js, orbit.js, dotdotdot.js, cssrelpreload.js, css_browser_selector.js.

CSS Stylesheet Optimization

Alongside the Javascript update, we have also cleaned up and optimized X3 Core CSS stylesheets, resulting in more efficient CSS and file size reduced by 25%. Furthermore, several stylesheets have been removed from the X3 Core and are now loaded "on-demand" from CDN.

More Interesting Features

X3 Popup Auto-Open

New X3 popup auto-open setting, allowing first image in a gallery to immediately open and display on page load. This option is available from page › gallery settings screen as well as global popup settings  screenDemo

X3 Popup Design and Function

Loads of design- and functionality improvements to the X3 Popup see all

  • Improved popup caption design with increased font size, wider captions, less transparent background, emphasized date and clearer EXIF items screenscreen
  • Popup image EXIF items can now be set from Panel › Settings › Popup screen
  • Image landing pages will now inherit EXIF settings from the page's popup settings screen
  • Popup topbar no longer blocks buttons in embedded sources like Maps / Youtube screen
  • Added [allowfullscreen] attribute so that fullscreen is available for Youtube/Vimeo screen
  • Popup UI padding on large screens screen disappears on small screens screen
  • Custom X3 popup links can now be used in image captions, and will now work from within an existing X3 popup. Existing popup will first close before opening the new popup.

Timeago JS Auto-Language

Timeago relative time-formatter will now automatically load language translation based on visitors browser language. For example, this means a visitor from Germany will see "vor 5 Tagen", while a visitor from US will see "5 days ago" screenscreen

Embed Modal Popup

New X3 embed modal popup, similar to the X3 popup, but dedicated to embedding sources like Google maps, Youtube and Vimeo. We use this method internally for the new image maps feature, but it is also available to be used in custom content democode

Click

Syntax Highlighter

New syntax highlighter design with copy code button, available from content templates screen


var googoo = 'gaga';
console.log(googoo); // returns 'gaga'

Notable Features

  • Added extensive support for special characters [SPACE"'”’,().;:] in file/folder namesmore
    This required comprehensive encoding of names and paths in PHP and Javascript. We strongly recommend avoiding special characters in folder and file names because it creates ugly url's, may cause other issues and is a bad habit. Use TITLES and LABELS for extensive captions.
  • Restore vertical scroll position on browser history() navigation moreforum
    X3 will now attempt to restore vertical scroll position when clicking the browser's [back] history() button. This is how websites normally work, but it is more complicated in Html5/Ajax apps like X3 because navigation happens dynamically without reloading the website.
  • Upgraded custom scrollbar styles for sidebar and slidemenu layouts moreforum
    About custom scrollbar styling
    Styling scrollbars is complicated, because scrollbars look and work differently across all browsers and operating systems. Furthermore, custom styling is implemented differently for all browsers, and some browsers don't support scrollbar styling at all. X3 only styles the internal overflow scrollbars for sidebar and slidemenu layouts, because they render inside the page. X3 does not attempt to style the main page scrollbar, which should remain same as visitors default OS/browser settings.
    Browser/OS specific modifications
    • No styling on Mac browsers because scrollbars appear on-demand and are already subtly styled by the OS and consistent across all browsers.
    • Microsoft Explorer / Edge added -ms-autohiding-scrollbar which allows scrollbars to autohide and appear on-demand.
    • Removed outdated scrollbar styling for Explorer (10-11) because we now have autohide.
    • Only Windows Webkit browsers (Chrome, Safari, Opera) now have subtle scrollbar styling to compliment the X3 design.
  • X3 now uses the newer Google Tag Manager for Google Analytics more
    Google Tag Manager has more features for advanced usage, and the script is now included directly in the document so the tracker ID can be used to verify other Google services like G Suite, Search Console and Google Ads.
  • Updated PHPMailer to latest version 6 with fallback to version 5 for servers with PHP < 5.5.
  • New SMTP email debugger outputs in browser console for easier troubleshooting screen
  • Updated robots.txt to prevent Google bot from crawling parent folders of images forum
  • Added [X3-Page: [type] X seconds] response headers to page requests screenscreen
  • New option to disable [fade text on scroll] for the intro image plugin screenforum
  • Added toolbar copy-link option screenforum
  • Image caption is now included in content editor insert image popup link option screen
  • Preview images are now assigned from first image in first child folder screenforum
  • X3 sample folders are now un-numbered as we emphasize drag-and-drop sorting screen
  • Added [controlsList="nodownload"] to videos when "block image" enabled forum
  • New panel guest login mechanism (used in X3 demo) that prevents all save operations.

Bugs / Warnings / Errors

  • Updated TWIG to support PHP 7.2 with strict countable() Forum
  • Fixed Asian characters when storing title and description in image Exif forum
  • Fixed panel DB installer "from" email when sending initial email.
  • Fixed bug when attempting to "double-click" an image to open in X3 popup.
  • Fixed pagenav order when sorting by date and using custom dates screenforum
  • Panel left MENU drag-and-drop is now disabled on small touch-devices (mobile).
  • Empty spaces in file names are now encoded to %20 in og:image meta tag forum
  • Fixed a bug with incorrect slidemenu toggle width if browser is ZOOMED in.
  • Mailer SMTP does not try to set username/password if SMTP AUTH is disabled.
  • Added new IP-to-location service provider for cookie consent plugin screen

Notes

Upgrade to X3 PRO?

You can upgrade from X3 Private to X3 PRO for $65.00 from the X3 purchase page. Click the "upgrade" tab, enter your order ID or email and follow on-screen instructions.

X3.26.0 Panorama

We will be adding Panorama VR support to next X3 release. If you want to help, comment or read more, please check this post in the X3 forums.

Audio Autoplay is now blocked

All audio autoplay is now blocked by browser since Chrome version 66, and I expect other browsers to follow suit. This is part of Google's effort to prevent unwanted website effects on behalf of their users, and website-owners will simply need to come to terms with this. Read more at Google Developers and Techcrunch.

Font Awesome 5?

We wanted to implement new Font Awesome 5 into X3, but this has to wait. FA5 is not backwards compatible with FA4 and would not work with X3 websites using FA4 icons. Furthermore, FA5 uses a different implementation technique, so we need to spend time upgrading the X3 design. FA5 will be part of a larger X3 update coming later. For now, X3 uses Font Awesome 4.7.

Updated X3 Updater

Although not a part of the actual update, we have also improved the X3 PHP updater script. To keep your X3 installation clean and free from junk, the X3 updater will now attempt to delete /app/ and /panel/ directories before replacing them. Furthermore, you can now easily downgrade to earlier X3 versions by using x3_updater.php?v=X3.24.3.

X3 Panorama PluginNew X3 Home