A Fieldmanager extension to render dynamic content in modal boxes/overlays on a site.
Requires Fieldmanager to be installed and activated.
fm-overlays currently supports two types of content; either a single Image or Rich Text.
Image overlays utilize both the srcset
attribute and the js window.resize
event to ensure both proper resolution and aspect ratios are maintained regardless of device. When creating an image overlay the user can also add a custom Image Link
URL to wrap the image with a <a>
tag, the target
of this link can be customized as well.
Rich Text overlays are created using the classic WYSIWYG editor.
Overlay conditionals allow the user to target where on the site the overlay will display. The following conditionals are currently supported:
Conditional | Supports Targeting | WP Function |
---|---|---|
is_home | n/a | is_home() |
is_front_page | n/a | is_front_page() |
is_page | ✓ | is_page() |
is_single | n/a | is_single() |
is_tag | ✓ | is_tag() |
has_tag | ✓ | has_tag() |
is_category | ✓ | is_category() |
has_category | ✓ | has_category() |
Targeting allows the user to target an overlay to a specific page, taxonomy or tag. Targeting an overlay drastically increases its priority, explained in detail within [priority systems](### Priority Sytems).
Each overlay has a display priority point value calculated from its conditional settings and menu order. Each Overlay Priorities are used to determine what overlay should display when more than one is found targeting the current screen. Each overlay's priority is tallied up and the one with the highest value is then displayed.
Condition | Description | Operator | Value | Frequency |
---|---|---|---|---|
targeted conditional | If an overlay is targeting a specific page, taxonomy or tag | + | 200 | per conditional |
matched conditional | If an overlay conditional positively matches current screen | + | 50 | per conditional |
menu order | used for manual overrides and additional specificity | + | X | per overlay |
Conditionals that target specific posts and terms operate on a higher priority than those that target generally. This is why whenver a targeted conditional is found its priority is bumped by 200 points.
The menu_order
attribute is utilized in two common scenarios. The first is to determine priority when a targeted conditional can't be found. The second is to provide additional specificity and override capabilities to non-targeted overlays. If no priorities or conditionals have been set on the overlay the published date is used as a fallback.
Given that these values will likely need to be changed at some point in time, there are a few filters available to make this easy.
Used to override the default targeted conditional value of 200
Used to override the default matched conditional value of 50
This filter allows you to completely override the priority of any overlay, ignoring all previous values and conditionals. It passes two arguments; the current priority $value
and the instance of the $overlay
.
fm-overlays determines how frequently to show each overlay through the use of cookies. The cookies are set via javascript using the attr data-cookiename
with an expiration time of 2 hours.
Cookie names will appear like fm-overlay-2357
using the overlay ID as a unique identifier.
Important: When implementing on a site visitors must be notified cookies are being set per EU Guidelines. This plugin does not handle any such notifications.
fm-overlays feature a number of classes that designers can use to customize the look and feel of each overlay.
You can style the popup via the .fm-overlay-wrapper
overlay class. Each overlay will display different classes depending on its configuration.
.fm-overlay-content
wraps your content.fm-overlay-title
is the overlay's title.fm-overlay-richtext
is the rich text wrapper class.fm-overlay-image
is the image wrapper class.fm-image-link
is the anchor tag wrapping the image.fm-image
is the div that immediately wraps the<img>
tag
Target styles to a specific overlay by using its dynamic class. The class is generated using the overlay ID and will look something like: .fm-overlay-2357
.