Introduction

In this video we'll take a look at all the settings available in Modals and how they change the behaviour and functionality of Modals.

In the previous videos we have already seen how to install Modals and what the basic features are for the free and pro version.

But that is just scratching the surface of what Modals can do and how you can use it.

Modals is a plugin. Well, actually - as you can see here - 2 plugins. The main System Plugin, and an Editor Button.
All the settings, including those to control the editor button are in the System Plugin.
So let's open that one.

In this video we will be working with the latest version of Modals, which at the moment is version 11.2.0.
And what you see here is a Joomla 3.9.5 setup.
If you are using newer versions, things might look a bit different.

And, as you can see, we have the Pro version installed.
Some features and settings are only available in the Pro version. I will mention that when discussing those settings.

All we see here is just a short description of the extension. And on the right here, we have the general plugin settings each plugin has.

The Modals specific settings are in these different tabs.

All settings have a short description you can see when hovering over the title. That should give you enough information to know what a setting does.

Now, the default settings are fine for most setups. So you probably don't need to change any. But in some cases you will want to change the default behaviour of Modals.

Only change settings if you understand what they are for and how they affect the behaviour of the extension.

Styling

We'll start with the 'Styling' tab.

These settings all affect how the modal windows look on the frontend.

Modals needs a stylesheet for its styling. If you are loading a different stylesheet that contains all the styling necessary for Modals, you could switch this off. But in nearly all cases, leave this set to 'Yes'.

Modals comes with a few differen t styles. The default being a styling based on Bootstrap.
You can try out the others to see if they match your websites styling better.

The transition has 2 alternatives: it can be either Elastic or None. This can only be changed in the Pro version. This influences the effect you see when the modal opens and closes. And also how it transitions between different contents when using modal groups or galleries.

And this is the setting for the speed of the transition in milliseconds.

These next 2 settings are pretty advanced. Check out the tooltip description to find out what they do.

Then, we have settings pertaining to the Overlay.

As you can see here, there is a dark overlay over your website behind the modal window. And if we click on that overlay, the modal closes.

As we have seen, the modal popups have a close button that allows us to close the modal at anytime.

But you might want to set up the modal so that the visitor can't close it.

So we'll switch off the Close Button. The "Overlay Close" option. And we'll also switch off the "Enable ESC Key" option.

So we now have a real annoying screen that visitors can't close and they will hate us for it!

So let's turn those option back on.

In the last video covering the Pro version features, we also showed the auto-close feature.

When using it, there is a countdown bar showing when the modal will close.

If you don't like or don't want that countdown bar, you can remove it with this option.

When you have a gallery or a custom group of modals, you can switch between them using the onscreen arrows, or simply using the keyboard arrows.

If you don't want to enable the usage of keyboard arrows, you can switch this setting off.

These Dimension settings all influence how large the modal window should be. You can set the default width and height here. But as we have seen in previous videos, you can also override the dimensions via the {modal} tag.

The Positioning settings are only available in the Pro version.

By default, the modal will scroll along with the website, meaning that it will disappear out of view if you scroll down enough.

However, you might want the modal to remain in the same position, even when scrolling down the website. You can do this by turning on the "Fixed" positioning setting.

What could also be interesting is to change the position of the modal, which by default in centered in the middle of the screen.

Like we saw in the video about the Pro version, we can set a modal to - for instance - the bottom right via the {modal} tag.

But if we want that to be the default behaviour of all modals on the website, we can set it up here. So let's set the right and bottom values to '20' pixels.
And we'll switch off the overlay completely.

Now we have that same non-intrusive modal, without needing to add the attributes to the {modal} tag.

Media

Let's check out the 'Media' settings. These settings apply to image modals.

By default Modals will convert the image filename to a Title, and show it on top of the modal popup.

If we don't want that to happen, we can disable this feature here.

But if the feature is enabled, then we can also select how the automatic title should be generated.
We can set it to be lowercase, UPPERCASE, Uppercase only the first letter, Uppercase All Words or set it Smart Titlecase.

The latter allows us to input a list of words that should remain lowercase.

The "Scale Images" setting determines whether an image should fit the full width of the modal or not. By default it's set to Yes.
With the "Retina" settings we can make Modals show images at different resolutions depending on the pixel density of the device of the visitor.

The Pro version of Modals has the ability to automatically create thumbnail images. Those are used as clickable links to open modal popups for Images and Galleries.

The options here control if and how the resizing is done.

In the previous video we have seen how to control the dimensions of the thumbnails in each modal tag. But here, we can set a default width and height to be used when no specific dimensions are given in the modal tag.

We can choose to Crop images to a fixed width and height. Or set it to proportionally resize based on either the width... or the height.

Thumbnails will only get generated for on gif, jpeg and png images.
Any other image formats will not get resized and simply use the original image.
The same will happen if we deselect any format here.

And we also have an option to set the quality level of the jpeg thumbnails.
Medium should be fine for most setups.
If you want smaller file sizes, set it to Low. But that will cause visible jpeg artifacts in most images. Set it to High if you feel the quality is too low when set to Medium. But this does result in bigger file sizes, which means a slightly slower webpage.

All thumbnails are saved to a "resized" folder, inside the directory of the respective original image. If you want to use a different folder name, you can change it here.

Now, this "Create Thumbnails" feature is enabled by default.
If you disable it, Modals will fallback to displaying the large original image as clickable link.

Unless... Well, unless you manually upload a thumbnail for the image yourself.

So you could potentially turn off the automatic creation of thumbnails, and only rely on your custom thumbnails. The folder where to upload them would be the same.

Check out the full documentation for all the details on the thumbnail creation system.

And the final setting we have here is "Legacy Suffix Support". This could only apply for people that have been using Modals for several years, when the thumbnail system was using a suffix instead. If you want, you can switch to the legacy method here.

Then, we have settings related to Galleries and Slideshows. These are exclusive to the Pro version as well.

In the previous video, we have seen how, by default, only the first image will be displayed as a thumbnail for the gallery.
We can change the number of thumbnails in each modal tag, but here we can set the default behavior to show thumbnails for all images instead of just one.

We can even set a custom separator to show between the thumbnails of the gallery.

And we can set the filter used to find the image files from the given gallery folder, such as file types.

The "Auto Group" option allows us to automatically group certain modals with arrow navigation.
For example, if we had various image modals in different areas of the page, it would be possible to navigate between them with arrow navigation.

If the "Preloading" setting is enabled, the 'Next' and 'Previous' modal in a group will be prepared in advance, so that it's immediately visible when switching to it, without waiting for loading times.

The "Loop" option enables the ability to loop back to the beginning of the group when on the last element.

And with the Slideshow setting, we can set an Image Gallery to act as a Slideshow, meaning it will automatically cycle through the images.

Here is how the Slideshow looks.

We can also customise the speed of the slideshow, in milliseconds. And select whether we want the slideshow to automatically start or not.

Auto-Convert

In the previous videos we have seen how Modals can also automatically convert certain links to modal popups.

The Free version only allows to convert links by class names.

By enabling this option, all links with one of the given class names will be converted to modal popups.
The default class here is set to "modal". We can change it or add more, separated via comma.

With the Pro version of Modals we can also set to convert all external links...
all links that have a target="_blank" attribute...
as well as links pointing to the defined file types...
or to specific URLs.

We can enter part of an URL or complete URLs that you want to be converted to a modal.
When the Regular Expressions setting is enabled, URL parts will be matched using Regular Expressions. So make sure the string uses valid regex syntax.

Conversely, with the "Exclude URLs" setting, you can give a comma separated list of URLs that you do not want to be converted to a modal.

We can also automatically convert to modal popups all images with a given class name.

The default class name is set to "modal" here as well.

When images are automatically converted, we can set Modals to use the "title" or "alt" HTML attributes from image tag. We can decide to use them for either the Title or the Description of the modal.

Editor Button Options

Modals comes with an editor button, as we have seen in the previous videos. These options control how this editor button functions.

Depending on what editor you use, the Modals button will either show up here or as a separate button under the editor.

The button shows the word 'Modal'. If, for whatever reason, you want to have this show a different word, then you can change that in the settings.

Let's rename it to 'Insert Modal' instead.

And after a refresh we now have the new button name showing.

We can also decide whether we want the Editor Button to be available in the frontend editor or not.

Tag Syntax

These settings determine what plugin tag syntax Modals should use.

By default the syntax for the single Modals is a 'modal' inside 'curly braces'.
And for Modal Inline Content the syntax is a 'modalcontent' tag, again in 'curly braces'.
In most cases we don't have to change these. But there are cases where you might find the syntax conflicts with other extensions you have installed. In that case a solution can be to change the syntax of the Modals tags.

But keep in mind: Changing these settings will mean that any existing use of Modals using the old syntax will not work anymore.
So it is best to change this before starting to use Modals in your site.

Just to show you, we'll change the tag word to 'lightbox'...
And let's use square brackets instead.

We'll just insert a new Modal under our old one.
Click here.
And as you can see, it now uses our newly defined syntax.

And here we see that our old syntax doesn't work any more.

Again, you probably don't want to change the default syntax, but if for whatever reason you want a different syntax, you can do so.

Advanced

And finally, we have the Advanced tab.

This first setting pertains the template used for internal pages in the modal popups. You probably want to leave this untouched.

If you want Modals to be opened as iframes by default, you can switch on this setting here.

With the next setting, you can select to load scripts and styles in the inline modal content. You may only need to enable this if certain functionality or styling isn't working inside the modal popup.

Here, you can determine which file types Modals should interpret as media files. Modals will make special adjustments to the styling for media files.

And you can also decide to always open certain file types in iframe mode. You separate the file types via a comma.

The following settings are only available in the Pro version.

In the previous video, we have seen how it's possible to open a modal on page-load, or with a delay.

We also have more possibilities at our disposal, such as the ability to show the Modal popup only once per user... or on specific page loads. Check out the documentation for details on how to do that.

By default, Modals will keep track of the count via a site wide cookie. If you want this count to be based on the individual page visits, then you can change that here. Or, you can choose to base the count on the site wide session instead.

You can also set the lifetime of the cookie used to determine the open count, in minutes. If you set it to 0, the browser cookie will have no expiration time and will be kept until the user removes it manually.

And you can even set a unique ID for the cookie.

These settings related to disabling features are also exclusive to the Pro version.

Here, you can select to disable the main window from scrolling along when the modal is opened.

While Modals is responsive and automatically adapts to the device screen, you have the option to disable Modals on mobile. Or to just disable modals set to open on pageload. If you use these settings, links will simply open normally instead.

You can decide the maximum width in pixels for which Modals should be disabled.

With this next setting, we can disable the use of Modals in certain components.

The advice is to not allow Modals in components where non-backend users can post content. For instance in forums and message boards.

We can decide whether we want to just disable the functionality, or to remove the syntax altogether.

And finally the last few advanced options. These are available for the free version as well.

Here, you can enable Modals to also work in the administrator side of the website. Normally you will not need this, as it can cause unwanted effects.

The next setting is this 'Place HTML comments'.

Let's look at the html output of this modal.
Here, we can see the output generated by Modals is surrounded by this start and end comment tag.

<!-- START: Modals -->...<!-- END: Modals --> 

There are also cases when the Modal has no output. In those cases, there will also be an extra comment here, instead of the output, telling you why there is none. These comments can help you troubleshoot when you don't get the output you expect.

If you prefer to not have these comments in your HTML output...
then you can disable them here.

This next setting adds a redirect script that will make modals reload as a normal page when opened in a new window.

"Use Media Versioning" makes sure that the browser uses the latest versions of javascripts and CSS files of the extension. So we recommend leaving this setting on.

And finally, this last setting loads the core jQuery script. You can disable this if you experience conflicts, for example if your template o r other extensions load their own version of jQuery.

And those are all the settings for Modals.

Recap

So just to recap.

We have seen where to find the settings that control Modals and how those affect the way Modals works.

You can find a list of all the settings, including their description in the Modals tutorial.

Stay tuned for other videos that look more in depth at specific functionalities.