There has been a fairly big changelog for v1.3.2, new components, new features, a few bug fixes from previous components.
A changelog can be useful, but here are a few highlights with some more information about some of the changes and new features…
Mega Menu can be used in any Custom Headers
Up until now, the mega menu has been built more as an extension to the header builder, mainly to ensure consistency by always functioning inside the same structure.
We’ve now added support for being able to use inside any header. The mega menu component now appears inside the Extras component list as any other component. The only thing that is needed from the div or section that you are using to build your custom header is to ensure it has a ‘header’ tag (but you were doing that anyway, right?)
Carousel Builder Gallery improvements
The carousel gallery feature has had a few improvements. You now change the alignments of images inside of the cells. Up until now the cells would just be the same heights & widths of the images inside. This is useful for when you wish to specify both the width & heights, this gives a way to do so without stretching the images inside.
If you’re unsure of exactly how the height / widths and alignments for the gallery works. Take a quick read through cell dimensions explanation.
There’s also an improvement on the fullscreen mode for galleries, where you can now choose to preserve the aspect ratio. So instead of keeping the same widths as set in the carousel cell settings, when in the full screen mode, the actual cells will jump to 100% and 100% fullscreen, whilte the images inside will fit with their original aspect ratio.
ACF gallery source
The ACF gallery images can be now be used to fetch ACF galleries from other pages or options page by changing the ACF field source.
Lastly, regarding the carousel, full support has been added for using Carousels inside of repeaters. So if you have ACF galleries inside post types and are using the repeater to show the posts, you can use a carousel inside that CPT repeater as you would anywhere else on the page.
Lightbox & Read More
Some users were needing to use some components inside AJAX loaded content on the page. Namely inside repeaters that are inside of the Infinite Scroller component or by using a third-party plugin such as WPGridBuilder, FacetWP etc.
With AJAX loaded content, often you need to retrigger some of the JS when the new elements are added, as the elements didn’t exist on the page when the page first loaded.
The main two components where this was an issue, was the Lightbox & the Read More component. We’ve now adapted these components to work out of the box when inside the Infinite Scroller. For using them inside AJAX loaded content via WPGridBuilder see Using WPGridBuilder facets with OxyExtras components.
New Components – Hotspots & Popovers
Two new components are popovers & hotspots. These are two seperate components that can be used together to create image hotspots or the popover component can be used seperately by itself.
By adding the popovers inside of the hotspot container, they can be used as markers to highlight certain points on images, carousels or any elements with a fixed aspect ratio (still videos?)
The documentation will cover all the functionality & settings, we’ll write up a tutorial showing some of the use cases. For now, here are some highlights;
- Users can navigate between hotspots using custom prev/next buttons inside the popovers, for creating product tours.
- Build reveal animations using transforms visually inside Oxygen.
- Both positioning of the popovers and the placement of the popup can either be set manually in Oxygen or can be linked to dynamic data for easier client editing.
- Supports ACF: Image Hotspots Field to allow clients to visually apply the positioning on the image from the post edit screen.
- The popover component can be used by itself to add buttons or icons anywhere on the page for the user to click to reveal a popover.
- The popover component can also be used to add popovers/tooltips to multiple elements on the page. You can choose the selector & either add content by adding elements inside the popover, or use attributes. (Tutorial coming up to explain)
