FAQs

Answers to the Most Commonly Asked Questions

Can I mix slide types?

Yes, you can use any combination of MetaSlider Pro slide types. For example you can have a slider with an image slide, a post feed slide (that can contain multiple posts), and a video slide. To create this simply add slides as you normally would, selecting the relevant slide type each time.

Full width slideshows

This article details the popular ‘full width’ slider layout, some of the complications you might come across. We’ll be using the TwentyThirteen WordPress theme as an example but the concepts should apply to most other themes as well.

The centered content column Firstly, most websites have a central content container that is centered – it may also be responsive where the width will change according to the browser width.

full-width-demo-1The post or page content is often placed within this central container and if a slider is inserted here, using a shortcode, it will be subject to the width of the said container. Even if ‘Stretch’ is enabled in the slider settings the slider will only be as wide as the container.

full-width-demo-2Some themes may offer more flexibility in terms of the layout such as a full width module that will expand to the full width of the browser. If it does have this option then use this along with setting the slider to ‘Stretch’ for a full browser width slider.

slideshow-stretch

full-width-demo-3

MetaSlider Template Include If your theme doesn’t have a full browser width module or similar (it may be worth contacting the theme developer to find out) then you will need to insert the slider directly in the page template. This exact method will vary a great deal depending on the theme, we’ve put together some guides for the most popular themes here: https://metaslider.com/documentation/category/theme-integration/

In the slider settings, at the bottom left, you will see the Usage panel which has the specific shortcode and template include code for the slider being viewed.

template-include

Copy the template include which will look something like this:

You will then need to find the correct theme template to paste this into and again, this varies depending on the theme and of course where you would like the slider to appear.

Theme Editor The most popular location tends to be on the homepage below the main navigation menu. Navigate to the theme editor at Appearance>Editor (/wp-admin/theme-editor.php) where there will most likely be a file called ‘Header’ (header.php).

full-width-demo-4

For the theme Twenty Thirteen we locate somewhere that is outside of the central content container mentioned earlier and we place our template include there. It might be more difficult to locate the exact spot depending on how the theme is structured so a little trial and error might be required – please be sure to back up all theme files and content just in case.

full-width-demo-5

How do I open an image in a lightbox modal?

If you would like an image to open up into a lightbox modal when the user clicks on it then you can use MetaSlider Lightbox, a separate plugin that extends MetaSlider.

It’s compatible with both MetaSlider and MetaSlider Pro and requires one of the following supported lightbox plugins:

With the plugin activated you’ll see a new checkbox within the ‘Advanced Settings’ panel – ‘Open in lightbox?’ – and when enabled the slides will open up in a lightbox if the user clicks on them. The lightbox settings are controlled via Simple Lightbox so it will keep things consistent across your site.

lightbox-toggle-300x159

The Launch Layer Editor button is missing

If you’re expecting to see the ‘Launch Layer Editor’ button:

Screen Shot 2015-04-07 at 15.06.21

but can’t, it might be that you’re viewing previously created Image slides.

The button will only appear for Layer Slides and to create these:

  1. Click ‘Add Slide’ (this launches the media library)
  2. Click ‘Layer Slide’ at the bottom of the list
  3. Then select an image – it’s important an image is selected after you click on ‘Layer’
  4. Click ‘Add to slider’

You should then see the ‘Launch Layer Editor’ button for the slide just created

layer1

I have the pro add-on pack. Why isn’t this feature working?

If you are seeing a message in MetaSlider that a specific feature is not working, it’s most likely one of the following:

1. If we just made the release, it might take some time for the pro version updates to be available. Check back in a couple of hours.

2. You have the pro add-on pack installed, but it is not activated. To fix this you just need to go to the plugins page and activate the add-on pack.

3. You have a valid license but have not logged in. This will stop you from seeing an update when it’s available.

4. When you purchase the pro add-on pack it comes with a single-year license as well as a single year of premium support. The plugin should work beyond the expiration of your license, but updates will not be available. If you have an expired license, the plugin will continue to operate as it did when the license was active, but you will not see any updates. If you purchase another license you will see updates immediately. If you need to upgrade you can do so here.

How do I fix W3C validation errors?

The Problem

Shortcode plugins have two main options for including CSS in your site.

Load CSS on every page

The first option is to include all of the CSS files on all of your pages. This will ensure the CSS is ready and waiting for any shortcode that happens to run on the page.

The advantage of this method is your page will pass W3C validation as we can load the CSS in the <head> of your page.

The tradeoff is the CSS will be included even on pages where no slideshow is present. MetaSlider has a total of 5 CSS files – that’s a lot of CSS to include if it’s not needed!

Conditionally load CSS

The second option (the one MetaSlider uses) is to only include CSS when the shortcode is processed.

The advantage of this method is only the absolute minimum CSS will be added to your page, and only on the pages where it is needed.

The tradeoff is the CSS will be included in the footer of your page and therefore the page won’t pass W3C validation.

There is no standard method built into WordPress to allow a shortcode to load the CSS into the <head> of the page. By the time the shortcode has run, the <head> has already been generated and output. The majority of shortcode plugins use this method, choosing performance over validation.

Solutions

1. Install a minification plugin

Minification plugins bundle all of the CSS on your page into a single file and include it in the <head>.

There are lots of minification plugins available but we recommend W3 Total Cache. To enable minification, install W3 Total Cache from your plugins page, then go to Performance > General Settings and enable ‘Minify’.

w3-total-cache-enable-minify

W3 Total Cache Minify Settings

Using a minification plugin will not only will it help with general site performance, but you’ll still only be including the CSS on pages where it’s needed.

2. Manually include the CSS in your theme

First you’ll uncheck the ‘Print CSS’ option in the Advanced Slideshow Settings for each of your slideshows.

You’ll now need to enqueue the CSS yourself. To do this, paste the following code into your themes functions.php file:

It would be a good idea to remove any includes from the code above that are not needed. For example, if you’re only using Flex Slider slideshows, delete the Nivo, Coin and R slides includes. You could also choose to conditionally load the CSS on specific pages using the is_front_page() or is_page() functions.

How do I change the excerpt length for Post Feed slides?

There are multiple ways to change the excerpt length in WordPress.

1. Plugins

The first option is to simply install one of these plugins.

2. Functions.php

The second option is to include the following code in your themes functions.php file.

 3. Custom excerpts

The third option is to manually create your excerpts in WordPress. To do this, edit a post and go to ‘Screen Options’ at the top of the page. Check the ‘Excerpt’ box. You should now see a text area where you can enter a custom excerpt for your posts.

excerpt-length

 

How do I fix poor image quality?

MetaSlider will crop your images to the size specified in the slideshow width and height settings. The default size is 700 x 300px.

If you have ‘Stretch’ enabled, or are otherwise displaying the slideshow at the full width of the page, then these images will be scaled up to fit the browser window. Therefore, if the slideshow is displayed at a width greater than 700px then you’ll notice a reduction in image quality.

To fix this problem:

  • Increase the size in the slideshow settings so it matches the actual display size of the slideshow. If you are creating a full width slideshow we recommend setting this at a minimum of 1024px.
  • Check the images you’ve added to the slideshow are at least as large as the size you’ve specified in the slideshow settings.

Can I customise the arrows, caption and navigation?

The MetaSlider Pro Theme Editor offers the ability to customise the look and feel of your sliders which you can apply on just one or multiple sliders.

To use the theme editor:

Go to MetaSlider Pro > Theme Editor

Create a new Theme and give it a name

Use the editor options to change the arrow styles, caption, bullet colors etc

Save the theme

Go back to your slideshow, and select your custom theme from the ‘Theme’ dropdown to apply it to your slideshow

Screen Shot 2014-10-29 at 14.34.18

 

 

The responsive slider doesn’t quite look right on a mobile device

You could create 2 slideshows (one for mobile, one for desktop) then use this plugin to display the relevant slideshow on each device:

https://wordpress.org/plugins/wp-mobile-detect/

Then setup your shortcode like this:

Can I use a custom font in the layer editor?

The easiest way to change the font to one that isn’t listed in the font dropdown is to view the layer source and directly edit the HTML.

If you’ve previously selected some text and applied a font, when you click the ‘Source’ button, you should see something like this:

To change the font, simply change the font-family rule. For example, to change it to ‘PT Sans’ (a google font), use:

A few notes on this: 1. For Google fonts to work, your theme already needs to have included the relevant CSS to load the google font onto your site. If your theme doesn’t already include the correct CSS, you can install a google fonts plugin – e.g. http://wordpress.org/plugins/wp-google-fonts/ 2. The theme editor does not load any google fonts, so you won’t see the font changes in the layer editor itself, but you will see them when you view the slideshow on your site. 3. If you wish to modify the list of font’s displayed in the dropdown, please see this link: https://gist.github.com/dauidus/b2f73c14f1f9dfe3ef63 4. Any websafe font can be used without having to do anything else, a list of these can be found here: http://www.cssfontstack.com/

The animations are still grayed out after upgrading to Pro

The animation effects are enabled/disabled based on which slideshow type you have selected. If you switch to Nivo Slider for example you should see many more animation types become available. All of the animations are available in the free version – MetaSlider Pro does not unlock those.

How to install MetaSlider Pro

Installation

To install MetaSlider Pro: Download the ml-slider-pro-X.X.X.zip file you were sent after purchasing MetaSlider Pro In WordPress, go to Plugins > Add New > Upload. Select the zip file from step 1 and click ‘Upload’. After the plugin has finished installing, click ‘Activate Plugin’.

Troubleshooting

“The package could not be installed. PCLZIP_ERR_BAD_FORMAT (-10) : Unable to find End of Central Dir Record signature”

If you see this error message, please check you are uploading the correct file. The “ml-slider-pro” file should be a .zip file (not a .php file).

The most common reason this happens is because Safari has been used to download the plugin. Safari automatically unzips files after they’ve been downloaded. Please try using a different browser to download the plugin zip file.

Do not unzip the ml-slider-pro.zip file before installing it on your WordPress site.

“Unable to create directory wp-content/uploads/XXXX/XX. Is its parent directory writable by the server?”

This error indicates you have a permissions problem with your WordPress installation. Every file and every folder on your server have permissions defined that indicate who can create directories, create files, delete files and so on. This error indicates the permissions on your wp-content folder are too strict, and need to be relaxed in order to let WordPress create directories.

You will need to update the permissions on the wp-content folder and set them to 755. There are 2 ways to do this:

cPanel

Log into your hosting cPanel Go to the File Manager Select ‘Web Root’ as the Directory to open Right click on the ‘wp-content’ folder and select ‘Change Permissions’ Change the permissions to “7 5 5”.

FTP

Using an FTP Client (FileZilla recommended), log in to your server using the details your host provided. Navigate to the ‘public_html’ folder. Right click on the ‘wp-content’ folder and select ‘File permissions…’ Change the permissions to “755”

Video Thumbnails Not Showing

When you add a YouTube or Vimeo slide to a slideshow, MetaSlider automatically downloads a thumbnail for the video directly from the YouTube or Vimeo servers.

In some cases, this process fails and your slideshow will display a broken image in place of the Video thumbnail. The video will still play, but the thumbnail will not display.

This can happen for 2 reasons:

1. The video has been set to private on vimeo.com

This stops MetaSlider from being able to retrieve a thumbnail for the video from the Vimeo servers.

Solution

  • Remove the video from the slideshow
  • Set the video to ‘public’ on Vimeo
  • Add the video slide back into the slideshow
  • Set the video back to ‘private’ on Vimeo

2. Server Firewall

Your server may be set up to block requests to the Vimeo and Youtube servers as a security measure.

Solution

You will need to contact your host and ask them to unblock the following URLs from the server firewall:

  • vimeo.com
  • youtube.com

What does “No Conflict Mode” do and why is it needed?

To understand No Conflict Mode, first we need to understand the problem.

When you embed a MetaSlider slideshow onto one of your pages, the shortcode will output a slideshow to your page with (something similar to) the following markup:

Note the “flexslider” class on the slideshow wrapper, this is needed to apply the flexslider styling to the slideshow.

Immediately after, the slideshow is initiated with the following JavaScript:

In most cases, this works.

The problem is that Flex Slider is a popular slideshow library and it’s often bundled into themes. These themes will often include the following JavaScript which is executed on every page:

Because the MetaSlider slideshow has a “flexslider” class, this call to FlexSlider will be run on the MetaSlider slideshow, but (crucially) without the MetaSlider specific settings.

No Conflict Mode

When “No Conflict Mode” is enabled, the slideshow output looks something like this:

Note, the “flexslider” class is absent. This means the themes call to FlexSlider will not target this slideshow.

And the JavaScript looks something like this:

Delaying the addition of the “flexslider” class to the slideshow markup will stop a theme from “hijacking” the MetaSlider initiation code. The “flexslider” class is added immediately after in order to apply the correct styling to the slideshow.

How To Enable “No Conflict Mode”

In the slideshow Advanced Settings, check the ‘No Conflict Mode’ checkbox and save the slideshow.

noconflictmode

How can I display a different slideshow for Mobile devices?

For this you will need to create 2 slideshows (one for mobile, one for desktop) then use this plugin to display the relevant slideshow on each device:

https://wordpress.org/plugins/wp-mobile-detect/

Then setup your shortcode like this:

[device][/device] <– phones

[notdevice][/notdevice] <– not phones

Why isn’t Auto Play working?

Due to the limitations of Responsive Slides, Auto Play is automatically disabled when you add a video to a slideshow.

Responsive Slides is a very small slideshow library, but it doesn’t offer us a way to pause the slideshow once a video starts playing. Due to this, auto play is disabled automatically when a video is present in the slideshow. This ensures the slideshow doesn’t move to the next slide while a video is playing.

Flex Slider on the other hand does allow us to pause the slideshow while the video plays, then resume the slideshow when the video stops. Therefore, the solution is to switch to Flex Slider.

How do I use a slideshow theme?

Since version 3.10 you can apply a custom theme to your slideshow. To do so, you just select the theme from the right side of the settings area:

How do I add custom CSS to my theme?

If you have ended up here, then there is a good chance we have instructed you to add some CSS to your themes style.css file in order to fix a styling issue.

Editing your themes style.css file is not strictly the only way to get some custom CSS into your site, you have a few options which we’ll go through below.

1. Editing your themes style.css file

This is probably the fastest way to get some custom CSS onto your site, but should only be used if you have created a child theme. If you have not created a child theme, and do not wish to make one, then take a look at option 2 or 3 instead.

Go to Appearance > Editor and select ‘style.css’ from the list of files on the right. This will load up the style.css file into the editor.

Right at the bottom of the file, on a new line, paste in the custom CSS and Save the file.

Remember to clear any WordPress cache plugins (W3 Total Cache, WP Super Cache etc), and clear your browser cache in order to see your changes.

2. Using your themes built in ‘Edit CSS’ option

Depending on your theme, you may have an ‘Edit CSS’ or ‘Custom CSS’ option built in (take a look under the ‘Appearance’ menu, or maybe in the Theme Settings). If you have this option then you should use it.

Paste in the custom CSS and Save.

3. Using the ‘Simple Custom CSS’ plugin

Install ‘Simple Custom CSS’ by going to Plugins > Add New, and searching for ‘Simple Custom CSS’.

After installation, go to Appearance > Edit CSS and paste in your custom CSS.

More information about this plugin can be found here: http://wordpress.org/plugins/simple-custom-css/

Where can I find the ‘HTML Overlay’ option?

HTML Overlays have recently been renamed to ‘Layer Slides’, but the same functionality exists.

1. Click ‘Add Slide’ 2. On the left of the Media Library you should see a list of Pro slide types (YouTube, Vimeo, Post Feed & Layer Slide) 3. Select ‘Layer Slide’ 4. Select the background image to use for the slide 5. Click ‘Add to slider’ 6. Click ‘Edit Source’ to reveal the HTML text area

where-is-the-layer-slide-option-in-meta-slider-pro

Edit Source on Layer Slide

Is MetaSlider Pro installed correctly?

  1. The menu item in WordPress should read ‘MetaSlider Pro’ (instead of MetaSlider).
  2. When you click ‘Add Slide’ you should see the Pro slide types on the left of the Media Library (Vimeo, YouTube, Post Feed & Layer Slide).
  3. There should be a ‘Theme Editor’ menu option underneath MetaSlider Pro.
  4. The thumbnail navigation type setting (in the slideshow settings) should be enabled for Flex & Nivo slider.
  5. The ‘Upgrade to pro’ nags should be removed from the interface.
MetaSlider Pro menu with Theme Editor option

MetaSlider Pro menu with Theme Editor option

 

Where can I find the ‘Layer Slide’ option?

To add a Layer Slide to your slideshow:

1. Click ‘Add Slide’

2. On the left of the Media Library you should see a list of Pro slide types (YouTube, Vimeo, Post Feed & Layer Slide)

3. Select ‘Layer Slide’

4. Select the background image to use for the slide

5. Click ‘Add to slider’

where-is-the-layer-slide-option-in-meta-slider-pro

How do I include a slideshow in the header of my site?

You will need to paste the “Template Include” code into your theme (you can find this in the ‘Usage’ section underneath the slideshow settings)

  • Go to Appearance > Editor in WordPress
  • Edit a file called ‘header.php’ (or similar)
  • Find the correct place to add it (for example above or below the logo)
  • Paste in the code and save

I only want to show the slideshow on my homepage, how can I do that?

Add the ‘restrict_to’ parameter to the shortcode, eg:

For theme specific instructions, please check out the ‘Theme Integration’ section on the left

Image Cropping

UPDATE

Version 3.3 of MetaSlider introduced a ‘Smart Pad’ option (cropping disabled) which automatically adds padding to portrait images allowing you to mix portrait and landscape images and maintain a consistent slideshow height.

Here is an example using the same images as below:

Please note that the Smart Pad option is only compatible with Flex Slider.

Screen Shot 2015-03-24 at 15.08.21

 

We often receive support requests from people asking why their images are being cropped automatically by MetaSlider. In this post I’ll attempt to explain why and how MetaSlider crops images.

The Problem

You cannot mix portrait and landscape images in a responsive slideshow, whilst maintaining a consistent slideshow height between slides.

To explain the problem, we’ll use this image set; 2 landscape images and 1 portrait image.

image-crop-2-200-100 image-crop-3-70-100 Startup Stock Photos

We’ll aim for a slideshow size of 200px x 100px by setting this in our slideshow settings.

Demo 1: Smart Crop Disabled, landscape images only

To begin with, let’s just add the 2 landscape images and see what happens:

All good so far. No cropping has occurred and the height of the slideshow is constant between all slides.

Demo 2: Smart Crop Disabled, landscape & portrait images

Each image in a responsive slideshow is scaled along it’s width so that it fills the whole width of the slideshow. When the width is changed, the height is changed also.

Now lets add the portrait image and see what happens (slide 2):

Again, no cropping has occured, but our small portrait image has become huge. This happens because each image in a responsive slideshow is scaled along it’s width so that it fills the entire width of the slideshow. When the width is changed, the height is changed also. The width of the portrait image is scaled from 70px to 200px wide (that’s 2.85 time’s its original width), but the height has been scaled up at the same rate, making it 285px tall (100px x 2.85). This is why you cannot mix portrait and landscape images in a responsive slideshow, whilst maintaining a consistent slideshow height between slides.

Demo 3: Smart Crop Enabled, landscape & portrait images

This is where Smart Crop comes in.  Smart Crop takes the largest, most central area of your image, whilst maintaining the width:height ratio of the slideshow itself. Let’s take a look at what happens when Smart Crop is enabled:

The landscape images are unaffected because they are already the correct size. Our portrait image is still being scaled up along it’s width at a rate of 2.85x, but Smart Crop has taken care of the height to ensure the overall slideshow height remains constant. We’ve purposely used a tricky sample set of slides to demonstrate the problem. Smart crop is a suitable ‘quick fix’ if your images are roughly the same size.

The ultimate solution

If you don’t want your images to be cropped at all, and you want your slideshow to remain a consistent height, then you need to upload correctly sized images to begin with. The solution for portrait images is to add padding to the left and right hand size of your image as demonstrated below.

Want to disable cropping completely?

In the Advanced Slideshow settings, change ‘Crop’ to ‘Disabled’. With cropping disabled, the height of your slideshow will change if you mix portrait and landscape images in the same slideshow.