[WP] Using Slide Markup Editor

Slide Markup Editor requires at least basic HTML knowledge.

Short video-introduction: http://youtu.be/7iIld0Z_wlc?t=1m50s

Edit_Sliders_‹_Magnific_WP_—_WordPress_2015-02-23_18-03-12.jpg

With Slide Markup Editor you can modify base template of slide. To enter it - click on "Edit slide markup"link in General Options of slider. Correct HTML markup for slide can be found in documentation of jQuery version of plugin. Please note that all elements of slider, like captions, thumbnails, tabs grab data from markup of slide, so make sure that they are included.

First of you should know that you can edit markup of slide however you wish and delete everything, you will not break anything in slider, as if you change template of slide - slide markup will be changed to default too.

Lists of supported {{variables}}:

About editor

Editor it's powered by Mustache template engine and supports everything what Mustache can do (like chaining and statements).
For example code below will output A tag only when {{link_url}} is defined.

{{#link_url}}
    <a href="{{link_url}}">Learn more...</a>
{{/link_url}}

Or when {{link_url}} is NOT defined:

{{^link_url}}
    This text will be displayed only when link_url is not defined.
{{/link_url}}
Learn more about Mustache syntax on this page.

Variables in slide, like {{animated_blocks}} and {{html}} are technical, and only used for Custom Slider type.

Please note that there should be only one root tag of slide

markup-editor.png

If you wish to add your custom {{variables}}, check this article.

Feel free to request a feautre

If you think that plugin is missing some tag, feel free to open a ticket and request it.

Example 1 (custom caption)

Let's assume that you want your slide title and description be displayed inside slider caption. At first make sure that caption option is enabled and then click on Edit Slide Markup to open editor. Add somewhere after {{image_tag}} such code:

<div class="rsCaption">
    <h3>{{title}}</h3>
    <p>{{description}}</p>
</div>

More info in docs of HTML version.

Example 2 (custom thumbnail)

Now let's assume that you wish to see "small image" + "title" in each thumbnail or tab. In Slide Markup Editor, instead of {{thumbnail}} paste the code:

<div class="rsTmb">
   <img src="{{thumbnail_url}}" />
   <h4>{{title}}</h4>
</div>

Tabs use the same rsTmb markup as thumbnails.

Example 3 (custom IMG structure with srcset)

To add an attribute to the image replace {{image_tag}} with actual markup of <img> element. For example, let's add srcset attribute to serve different image for high-dpi screens:

<img src="{{image_url}}" alt="{{title}}" srcset="{{large_image_url}} 2x" />

Please note that if you do not define rsImg class on <img> element, default JS-based scaling options won't work, but you can use CSS to align the image (here is an example of 'fit" scale mode implemented just via CSS).

More info in docs of HTML version.