What started out as a scheduled minor release, eventually turned into a massive X3 update. Many new features, interface improvements and bug fixes!
- 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.
Let's get started!
You asked for it, you got it: We have added a clean, unobtrusive HTML5 audio player. Simply visit the X3 demo, and find the audio player in bottom right corner. To use, simply upload mp3 track(s) into your /custom/audio/ folder, and enable the audio player from panel Settings › Plugins › Audio Player. The audio player supports playlist (multiple tracks), shuffle and autoplay (non-mobile devices only). There are no "controls" for the audio player, except start and stop. Tip! Double-click the audio player button to go to next track in the playlist.
You can now added any form elements (input fields, checkboxes, radiobuttons etc) to a contact form, and resulting data will be output in the sent email. Creating custom forms requires some knowledge of html so that you can include your own form elements, but there is a new sample template available from the content editor. See a custom form demo here.
New X3 Styler
This may not be of much interest to existing users who have already selected their style-combination. This is nevertheless a big update for the technically-advanced X3 Styler interface. You can preview the new X3 styler here.
- Improved design and performance.
- Improved responsive design on smaller devices.
- Fixed many bugs (especially for Internet Explorer).
- Styler toggle button is now moved to new plugin-buttons (bottom right corner).
- Styler interface can be toggled on/off without refreshing the website.
- "Reset" button does not reload page unless layout is changed.
- Better color picker support for all browsers that support Html5 color picker.
- Fixed so that 3D logo colors are inherited after color changes.
- Fixed so that "favorites" are correctly synchronized with fonts in font-selector.
- Simplified Styler settings in Settings › Style › Show X3 Styler (on/off).
Many of you may have noticed that the "justified" layout could be somewhat sluggish when there were many images, especially in some browsers and on mobile devices. Although I thought that the justified layout code was already "optimal", it turns out there were some major differences in how some browsers react to certain code. To sum it up:
- Expect 5-10 x faster rendering of layout in Safari and on mobile devices.
- Expect 2-3 x faster rendering on "other" desktop browsers.
- For reference, a demo gallery with 31 images renders in 21 ms (0.02 seconds) in Chrome and 12 ms (0.01 seconds) in Safari from my Macbook Pro.
- New setting to "disable justfied layout on small mobile devices" [screenshot]. This makes sense, since small mobile devices will often place each image on a new row anyway, so why incur expensive processing when the layout will look the same as when simply stacked vertically?
- You can now check "render speed" of the justified layout from browser developer tools -> console [screenshot].
If you already checked the new X3 demo, you may have noticed the new plugins toolbar bottom right corner of screen. With the increasing amount of plugins available in X3 (audio player, chat, fotomoto etc), we can't have different buttons floating around on screen without any order. As a solution, we have a new uniform plugins-toolbar, where optional plugins slot in neatly. See the new plugins-toolbar in effect from the Fotomoto demo, where four plugins are in effect:
- Neat and flexible design.
- Supports custom texts (can be changed with custom CSS, although this will be part of soon-to-come languages config).
We have added a new tabs setting for the carousel layout, which is available for both gallery and folders modules (click links to see demo's). This layout is very effective for creating an interactive timeline-effect for a small group of images, for example to display a workflow process. Tabs can be displayed at top or bottom.
It is [divbox=label label-warning]Important[/divbox] to understand that the carousel tabs layout has several conditions if it is to work nicely:
- When enabled, carousel amount will always be set to 1, since tabs only support a single active item visible on screen.
- Tabs work best with a small amount of images so that tabs fit on a single row.
- Tabs should normally be used with the Split View gallery setting as in the demo.
- Remember to add title and/or description to items when using split view.
- Tabs are populated by image name, not title. This is because image titles are often too long, and will display in the carousel anyway. Tab titles should be short and accurate.
- Unless all your images are the same aspect, you should use the Crop Images setting (for example 3:2) to achieve a uniform carousel layout. If images are at different size, the carousel will scale to the size of the tallest image in the carousel, which will leave a lot of empty space.
Many of you have noted how the file-actions were easily confused with folder-actions, and some of you have mistakingly clicked to delete a folder, instead of the selected range of files. Before, the file-action buttons were close to folder-actions [screenshot]. We have now moved folder-actions, so that are clearly separated from file-actions [screenshot]. Perhaps more importantly, when you now "select files", the file-action buttons change colors, clearly indicating where to click:
New Content Toggle Plugin
We have included a new content-toggle plugin, which allows you to expand collapse text (or any html). This feature is useful to hide long sections of text until the visitor chooses to "view more", and can also be used with a FAQ or as a simple accordion. See content example here, or when used with an image-caption here, or in popup mode here. Example of how to include basic html for content toggle has been added to content editor templates [screenshot].
Improved Slidemenu / Mobile Menu
I suggest trying new X3 from a mobile device to experience the new improved mobile menu.
- Improved UI design.
- Menu button is never hidden any more, as this was just annoying while scrolling.
- Fixed some bugs.
- Improved performance.
You can now "deep-link" to sections in your content, by simply appending a #hash to the URL. For example, linking to the our Alert Box section by appending #alert-box to URL. Some notes:
- Can also be used when linking from one page to another (eg. "/somepage/#deep-link").
- Hash anchor names are created from "slugified" title names. For example, if you have <h2>My Section Title</h2>, deep-link will be #my-section-title.
- May not always work when "refreshing" a page, because browsers often override scroll when trying to remember last scroll position before page was refreshed.
- Dynamic name attributes are only applied if there is a #hash in url.
- Checkout button is now visible when x3 popup is open.
- New option for buy-button "only show in popup": yes|mobile|true [forum]
- Removed style overflow-x:hidden on Fotomoto open, so it works "better" on mobile.
- Custom "buy" buttons are hidden on mobile if "hide for mobile" is checked.
- Fotomoto button moved to new plugin buttons, for better synch with other plugins (chat, audio player, styler etc).
- Nicer "buy" buttons and other interface improvements.
- Removed "Checkout text" setting in panel. The text is now set from CSS, and is part of forthcoming x3 languages.
- Fixed a bug where Fotomoto failed to display for Internet Explorer after loading.
It is unnecessary to let the X3 application process files not found, unless they are valid X3 page/json requests. This also prevents potential errors from appearing in your server error log, if X3 is trying to look for a template that corresponds with a file that doesn't exist. X3 still handles "file not found" for normal page/json requests.
- Although it should not happen any more, we have fixed the issue "PHP Fatal error: Uncaught Exception: './templates/page.ico' template not found. in /home/kogit/gallery/app/parsers/template-parser.inc.php:7" that could appear in your server error log for invalid requests. [forum]
- ErrorDocument 404 /404.html removed from .htaccess.
- X3 no longer routes requests for rss / rdf / txt, as X3 does not and should not manage requests to these files.
- Fixed so that routes to xml / atom does not break 404.
- You can now add multiple recipients to Settings › Mail › Recipients, by separating recipients by commas. For example [email protected], [email protected].
- Chat moved into plugin buttons, to better synch with other plugins.
- Chat automatically opens if chat was active last time page was visited.
- Improved positioning.
If you visit the sample page, you will see there are some pretty cool mouse hover styles on the text links. Previous release also had some cool styles, but unfortunately they could break advanced custom content, like inline galleries, image-links or any advanced custom html. We have therefore reverted so that extended link effects only apply on text-links inside <p> paragraphs. It is unlikely you will require any modifications, but if you do, the following helper classes are available:
- To include the extended link effects inside a non-paragraph element, simply include the "link-styles" CSS class on the container element.
- To include the extended link effects inside a non-paragraph element, without underline (appropriate for a <ul> list of links), simply include the "link-styles-no-underline" CSS class on the container element.
- To include the extended link effect on a single <a> anchor, which is not inside a paragraph, simply include the "link-style" CSS class on the anchor itself.
- To prevent the extended link effect from affecting links inside a <p> paragraph, simply include the "no-link-style" CSS class on the paragraph.
- To prevent the extended link effect from affecting a specific <a> anchor tags, simply include the "no-link-style" CSS class on the anchor itself.
- Many interface-, design- and code improvements.
- Removed some unnecessary code that slowed page scrolling.
- Less padding on buttons in general.
- Changed default primary-color of twilight skin from goldenrod to brown.
- Removed unnecessary margins below logo for sidebar layout.
- Article-nav (arrows on sides of pages) are now hidden for small mobile devices, as they are more annoying than they do good.
- Changed split layout so it only collapses to new ROW on SMALL screen devices. Two columns will remain intact now also on MEDIUM screens (typically iPads/tablets).
- Text align reverts to center on small screen devices when split layout collapses to new row.
- Removed [contact] shortcode from content templates. You can still use it, but now the basic contact form is simple anyway, and easier to understand than [contact] shortcode.
- Clicking the "success" icon (after sending from contact form), will now reset and show the contact form again without refreshing page.
- Disabled X3 popup "history" for iOS (iPhone/iPad), because it results in browser address bar showing on popup-close (because URL effectively changes). This effect is unfortunate and disruptive to the user-experience, so we have disabled popup-history for iOS. History deep-linking will still work, but you won't see the #hash in URL change on navigation between images.
- Fixed "jumpy" sidebar menu when scrolling in Internet Explorer.
- Fixed some more justified gallery layout bugs in Internet Explorer.
- Fixed colors in the 3D logo on hover to correctly be inherited by the skin-color combination [forum]
- Fixed missing Cloudflare-buttons in the panel, which were not appearing because Cloudflare changed their API.
- Some fixes for Win IIS Server. Now, the X3 menu should render properly, although there are still some issues.
- Fixed carousel timer and width so that it is inherited from parent gallery or folders module.
- Fixed so that carousel is properly destroyed when navigating away from a page with carousel.
- Fixed some issues with custom modal plugin widths when displaying on mobile devices.