Wow where to start? First new X3 release of 2017 is a massive overhaul to the existing X3 interface and design. No uniquely new features, but apart from that, this is possibly the biggest X3 update since official release. The list for this upgrade is very long, so I recommend browsing the headers below, and reading details for each section only if you want to.
* Complimentary X3 0.22.2 was released on Feb 26.
- Interface improvements for almost all core X3 layouts, plugins and elements.
- Lots of improvements for mobile devices.
- Lots of Panel improvements.
- Major design upgrade.
- Bug fixes.
Check the upgraded X3 Demo, including new default styles and some updated sample content.
- Download from same link as before, either x3.latest.zip or x3.latest.nocontent.zip. It is recommended to download the "nocontent" version if you are upgrading, as this does not contain all the sample content.
- Unpack the downloaded Zip file.
- Upload everything EXCEPT /content/ and /config/, overwriting existing files.
- Remember to update the root .htaccess file, as this is required for for the audio player and a few other things.
Default Design/Setting Changes
We have made the following changes (improvements) to default X3 settings and style. Although unlikely, you may need to amend some settings, unless you want to inherit new defaults. New defaults can be seen in the new X3 demo.
- New default primary skin color: green. Was tired of the orange (too strong). The new green is more "mellow", and synchronized with default X3 "green". You only need to edit the skin style if you previously had the default skin style "daylight orange" selected.
- New default font: "Lato Skinny". I must confess my love of modern "thin" font weights, as they (in my opinion) make the interface more clean and elegant without affecting legibility. You only need to edit this style if you previously had the default font style "Lato" selected.
- Disabled manual Refresh Menu setting in panel by default. This setting should no longer be necessary for most X3 websites after recent X3 updates. If you have a heavy content structure (say 100+ folders), and/or a slow server, we recommend re-enabling this feature from Settings -> settings -> Menu Processing -> Manual Refresh. For most users, this feature causes more confusion than benefits.
- Increased default text logo font-size from 2em to 2.125em (6%) to match page title headers. If you need to reduce the logo size, go to settings -> style -> logo -> logo style, and edit the font-size [screenshot].
- Removed default image-logo padding, and set new default logo width (to equalize removal of padding). If you are using an IMAGE logo, and wasn't using the default size, you may need to go to settings -> style -> logo -> logo style, and reduce the width if your logo feels too big [screenshot].
- New Gallery delegation, applies all gallery-related settings recursively (on demand).
- New Context delegation, applies all content/context related settings recursively.
- Globally cached DOM elements.
- Delegated click events closer to targets for improved click performance.
- All resize/mousemove/scroll events (X3 has MANY) are throttled, for less workload on browser.
- Improved body-class management on Ajax page navigation. May prevent browser-thrashing.
- Panel is now "responsive" and works acceptably on small mobile devices. This is only a "fix", not a final solution.
- 10x times faster SORTING when clicking the gallery sort button in panel.
- Fixed an issue when clicking SAVE could try to save twice.
- "Create website object" for "preload entire website" is now available directly from the setting [screenshot].
- Cleaned up panel plugin settings [screenshot].
- Page settings -> gallery -> "Video Embed" now moved under "Carousel" layout settings, as this feature is currently only available for the carousel.
- Fixed panel PHP 7.1 bug [forum].
- Fixed various critical bugs in new PHP 7.1 (PHP 7.1 is more strict).
- Fixed a bug where menu could fail to re-appear after an open folder was moved.
- Fixed a bug when copying- or moving folders.
- Fixed a bug when uploading images directly from the left menu (context menu).
- Fixed a bug when creating a new folder from the left menu (context menu).
- Fixed some bugs when using "search".
- Panel doesn't try to create new folder if folder already exists.
- Fixed some bugs with top menu in DB-version when creating/editing users.
- Some font adjustments.
- Improved GRID layout settings: Choose "Set Amount" or "Set Width", which toggles next option [screenshot1][screenshot2].
- Improved COLUMNS layout settings: Choose "Set Amount" or "Set Width", which toggles next option [screenshot1][screenshot2].
- "Split View" setting is now only visible for layouts "grid", "vertical" and "carousel" [screenshot]. It is hidden for "justified" and "columns", since "split view" cannot operate with those layouts.
- Cache-version validation for settings-schema.json and settings-page-schema.json, which are used for settings- and page-settings in the panel. Makes sure browser loads fresh versions of these files after X3 update.
- Panel session_destroy() on logout, to prevent issues when switching to panel DB-version.
* The X3 popup displays when clicking an image.
- Many code/performance improvements.
New default settings previous/next and next when CLICKING in the popup, instead of previously default zoom (does not affect mobile devices): Click left side of image navigates to previous image. Clicking right side of image navigates to next image. If single image in gallery, next/previous reverts to zoom, but only IF zoom button is enabled.
- Now, image can be scaled to maximum original size on pinch (touch). If you want to disable zoom, you will need to set "next", and disable zoom button
- Fixed bug with interface toggle. Now, the interface (arrows, buttons, caption) will auto-hide after a few seconds of mouse inactivity.
- Improved HELP in panel.
- Added option to choose popup background color.
- Plugin buttons (styler, audio, chat) are now hidden when x3 popup is open, with exceptions: Audio button will still display if audio is currently playing, and Chat button will still display if chat has been initiated (loaded).
- Fixed so slideshow intro-mode does not scale on mobile-device scroll, due to many mobile-browsers toggling browser interface on/off while scrolling. When slideshow set to 100%, this would cause the slideshow to resize up and down, scaling the image within (in cover mode), and causing "layout thrashing" for the content below.
- Slideshow module no longer animates on load, unless the page transition is already complete.
- When clicking slideshow fullscreen EXIT button from mobile devices, slidemenu button (below) does not mistakingly trigger immediately after.
- Fixed a bug where DOT-navigation elements were not displaying.
- Fixed interface toggle on mouse hover: does not trigger when hovering thumbs- or dots-navigation.
If slideshow is outside of scroll-view, window will scroll neatly to place slideshow in viewport on click/touch interaction.
- Re-organized slideshow panel settings, and improved help.
- Removed slideshow WIDTH setting, as this was misleading, and should always be set to 100%. The actual width of the slideshow canvas will be decided by the gallery module width.
- Changed default autoplay interval from 5000 to 4000 milliseconds (4 seconds).
- Fullscreen button always aligned LEFT when slidemenu toggle button is active (mobile devices, or when using slidemenu-layout).
- Toolbar buttons on left no longer crash with slideshow PREV navigation button.
- New smart interface controls toggle:
- Mouse devices: If slideshow is playing or has navigation elements (thumbs or dots), hide interface on load. It should be clear that the slideshow can be navigated, and interface will automatically display on mouse hover anyway. If slideshow is INTRO or START_FULLSCREEN, if the previous rule does not apply, interface will initially show, then hide after 2 seconds (if mouse inactive). In all other cases, interface will be VISIBLE, until interacted with by mouse.
- Mobile/Touch devices: If INTRO or START_FULLSCREEN, interface will start visible, and hide after 3 seconds. Else wise interface will always start visible, until touch interaction.
- New slideshow options:
- Arrow Buttons (Default ON): Enable or disable the arrow navigation buttons [screenshot].
- Play Button (Default ON): Enable or disable the slideshow toggle PLAY button.
- Click Navigation (default ON): Allows the visitor to navigate by clicking on the slideshow [screenshot].
- Fullscreen Button (Default AUTO): [screenshot] allows you to toggle the slideshow fullscreen button. Includes new default "Auto" mode, which hides the fullscreen button when slideshow is set to "Use as Intro" (read more). As most other settings, this option can be set on a per-page basis, or you can set global default from settings -> page -> gallery -> slideshow.
- Keyboard Controls (Default ON).
- Swipe (Default ON) [screenshot].
- Stop Autoplay on click (Default ON): Stops slideshow autoplay on any user action with the slideshow.
Scroll down button (Default OFF) available for "use as intro" mode. [read more].
- Force slide transition for mobile devices (Default ON) [screenshot][read more]
- Improved interface for mobile touch devices:
- Interface hides after 3 seconds.
- Fixed play toggle button.
- Interface is immediately hidden (500ms) when clicking PLAY.
- Mobile touch can click links in captions.
* Lazy loader is the mechanism that dynamically loads images in galleries on browser scroll.
- Re-written from scratch for much-improved performance. One should notice speedup on larger galleries and on mobile devices, on page load, and when scrolling.
- Lazy scroll event is throttled at 1 second.
- All 3 modules (gallery, folders, context) share the same lazy scroll event.
- Now, lazy loader makes sure at least one image beyond visible viewport is preloaded (useful for vertical layout, where "next" image might be outside of the lazy load threshold).
- Lazy load event is destroyed once all images on a page are loaded.
- Fixed bug where some images would not immediately load even if they are visible [forum].
- Improvements for touch devices (touchmove).
* The toolbar button displays on top-left of screen, and allows page-sharing to social media (and more).
- New default vertical position 65px, which is less likely to crash with slideshow controls and page nav.
- Toolbar does not autohide after a few seconds if mouse is over toolbar.
- Toolbar child links do not occupy click space when hidden, and will not crash with other interface items.
- Toolbar no longer displays on browser scroll, but only mouse move (although webkit browsers trigger mouse move event on scroll).
- Cleaned up toolbar settings (panel), and added new HELP [screenshot].
- Removed several useless and unused settings.
- Improved UI & animations.
- Lots of code optimizations.
- Improved UI for mobile devices, although we still recommend toolbar DISABLED for mobile devices [read more].
- Fixed vertical offset misalignment of icons in Explorer 11.
- Improved style and FX for share-popup [screenshot].
Fixes to the menu for the topbar layout:
- Fixed bug where dropdowns in topbar-float layout could appear incorrectly aligned [screenshot].
- Added throttle to scroll event for improved scroll-performance on "fixed" menu's.
- Image logos now scale-animate with fixed topbar menu to max-height: 50px (to keep fixed menu height reasonable).
- Image logos now scale better (width) on small mobile devices, leaving enough room for menu-toggle button.
- Menu dropdown overlays logo if they overlap, instead of going behind logo.
- Added spinner loading icon to preview images in list mega menu.
- Several code/performance optimizations.
Clicking empty area in fixed topbar now scrolls to top of page. This rule only applies when NOT clicking any link/logo in the topbar, which naturally creates a page-navigation event instead. You can test this feature by going to the demo (from a large screen device), scroll down, then scroll up a bit so that the fixed-topbar appears. Click the fixed topbar (not menu links), and page will scroll to top.
The slidemenu is the menu that appears on mobile devices when tapping the top right "menu" button. Althouigh the slidemenu always appears on mobile devices, it will also appear for large screens with layout "slidemenu".
- More robust. Menu can be toggled open/close frequently without creating any flaws, while resizing screen will "reset" the slidemenu.
New slidemenu style options Overlay/Push [screenshot] [Read more].
- Slidemenu does not corrupt on screen resize when state changes above/below 1024px.
- Plugins buttons (bottom right) are hidden when slidemenu is open.
- Slidemenu font rendering is no longer affected by transitions in webkit browsers (Safari + Chrome).
New scroll-down button available for page-intro, slideshow-intro and video-intro. Off by default, but options are available in panel for the three modules [screenshot]. This feature adds a "down" button at bottom of intro modules, which hints to the visitor that there is more content below. When the button is clicked, the page will scroll to the bottom of intro, effectively displaying the content below. This feature is useful for intro's set to 100% height, when it's crucial that the visitor is made aware that there is more content below the image. The button will appear one second after page intro loads, to make sure it catches the visitors attention.
Pagenav are the arrow-buttons on left and right side of screen (see demo), which appear when the current page has sibling pages that can be navigated to directly without using the main menu.
- Improved code and performance.
- Only displays when browser stage is 768+ width. Smaller screen than this, and these non-critical buttons are simply removed, as they get in the way of the interface.
- Improved positioning and display timeout synched with other X3 interface elements.
- Now works with ALL browsers (also Explorer).
- Now also appear in plugin INTRO modes, although the buttons will only appear from under the intro once scrolled down. Buttons will be positioned "center" vertically [forum].
- Now uses root-relative links, which resolves an issue if URL has double-slash ending [forum].
The X3 chat plugin can be seen in bottom right corner (plugin buttons) in the X3 demo.
- Moved chat settings from accounts to plugins [screenshot].
- Added new options, help and instructions (see screenshot above). new!
- Option to enable chat for mobile devices.
- Option to prevent X3 from controlling the Chatra interface.
New modal target for menu links [screenshot], which allows you to display text/content of a page directly in a modal window on menu link click [screenshot]. Useful to display content that does not require a full page, for example simple "about" info or a list of links.
X3 Image Cache "Garbage Collector"
Fixed garbage-collector for the X3 image-resizer cache. The garbage-collector will find resized images in /app/_cache/images/ that have not been accessed for more than 1 month, and delete them. The garbage collector will only run randomly (approximately once every 500th image request). This means that once in a while, unused cached resized images (which could be orphans from images/paths that no longer exist) will get deleted.
Improved Google Fonts
- Fixed so that BOLD font weight is redefined to boldest font included in the Google font set. This prevents browsers from displaying ugly fake (faux) font-weights, and makes the bold-font proportional with the non-bold font. This rule ONLY APPLIES if there are no font-weights included at 700 or higher (browser definition of bold), and only if there are minimum TWO font-weights included (If there is only a single font-weight included, it is necessary to allow the browser to create a faux-bold, so that bold looks different from normal text). This feature is useful for THIN font-combinations, like the new "Lato Skinny" demo, which uses "Lato:300,300i,400,400i", where we want the BOLD to be weight 400.
- Support for new Google syntax with "300i" instead of "300italic". If no italic fonts are included, <em> is forced to non-italic.
- Fixed bug when using custom Google fonts with multiple + or %20 (ex. "Source+Sans+Pro:300,300i,600,600i").
Added new logo LINK setting [screenshot] which allows you to include an alternate link for your logo [read more].
- Improved page-transitions.
- 3D Logo effect does not accidentally trigger on page transition (if logo appears below mouse pointer after transition is complete).
- Much-improved Scrollnav for vertical gallery layout [demo] (see up/down buttons right side of screen).
- Prevent html5 video from downloading before click play [forum]. This feature depends on browser [read more].
- <svg> support for page labels.
- Plugin button icons are now colored WHITE if primary color is set to black (or very dark) [forum].
- Several fixes to the STYLER interface.
- X3 Sitemap is now "valid" [See validator]. It was not really "invalid"before, but because of some attributes, it was reported invalid.
- X3 Diagnostics skips "session save path" check when server uses memcached [forum].
- Removed rule that center-aligns text in page content if there is only a single <p> paragraph. If you for some reason want to keep a paragraph center-aligned, use <p class="text-center">TEXT</p>.
- Fixed issue in INTROS (image intro, video intro, slideshow intro) where percentage height changes when visitor scrolls due to browser height changing (UI toggles on/off). mobile
- Scroll "UP" button in footer now scrolls animated to top also on mobile devices. mobile
- Improved "scrollbutton" (button to auto-scroll to gallery modules): Now also displays for mobile devices, better UI, and does not break anything when applied to "use as intro" slideshow.
- Removed "asterisk-icon" from sample "gallery" carousel menu on mouse hover. There seems to be some inconsistencies in some browsers.
- Body slug- and page- CSS classes are now always lowercase representations of URL, for consistency and best practice.
- Google Analytics tracking runs after page Meta data is set (on ajax page navigation).
- Much-improved tooltips performance on page-load.
- Fixed and improved "widowfix" [read about this feature], which makes sure your titles don't end up with "orphan" words on new lines.
- Improved modal plugin (data-reveal-open-once, data-reveal-open, footer, content, events).
- Removed "Disallow: /*.json" from robots.txt. Google webmaster tools reports about not having access to load .json files (dynamic x3 pages). This exception was originally added to prevent Google bot from indexing JSON files into search results, but it shouldn't be doing that anyway.
- Removed Fastclick.js, since this is no longer required in modern browsers to eliminate 300ms click delay, and by using CSS touch-action: manipulate.
- Fixed PHP 5.3 warning in menu.inc.php line 196.
- Fixed bug in Safari where panel DB-version user profile input fields were blocked when Safari auto-fill triggers.
- Improved HTML5 localstorage detection in Panel, so that panel does not break in Safari Private browsing mode [read more].
- Fixed a bug with \\backslashes on Windows Apache servers, that amongst other things, could break the audio player [forum].
- Fixed Android-Firefox bug with columns-layout.
Happy updating! :sunglasses: