Ignore image class?

Hi Stefan,

Yeah, it seems that RoyalSlider uses a script to insert the thumb, but that is being replaced by the responsify code. Here is how the code looks before Responsify does its magic:

<div class="rsContent">
<img class="rsImg" src="http://cdn.acquaphoto.com/wp-content/uploads/Fairmont_Mayakoba_Wedding_001-1340x893.jpg" data-rsBigImg="http://acquaphoto.com/wp-content/uploads/Fairmont_Mayakoba_Wedding_001.jpg" alt="Fairmont_Mayakoba_Wedding_001" width="1140" height="760"/>
<div class="rsTmb"><img src="http://cdn.acquaphoto.com/wp-content/uploads/Fairmont_Mayakoba_Wedding_001-96x72.jpg" alt="Fairmont_Mayakoba_Wedding_001" width="96" height="72"/></div>
</div>

and after:

<div class="rsContent">
<span data-picture data-alt="Fairmont_Mayakoba_Wedding_001"><span data-src="http://acquaphoto.staging.wpengine.com/wp-content/uploads/Fairmont_Mayakoba_Wedding_001-320x213.jpg" ></span><span data-src="http://acquaphoto.staging.wpengine.com/wp-content/uploads/Fairmont_Mayakoba_Wedding_001-1024x683.jpg" data-media="(min-width: 320px)" ></span><span data-src="http://acquaphoto.staging.wpengine.com/wp-content/uploads/Fairmont_Mayakoba_Wedding_001.jpg" data-media="(min-width: 1024px)" ></span><noscript><img src="http://acquaphoto.staging.wpengine.com/wp-content/uploads/Fairmont_Mayakoba_Wedding_001-320x213.jpg" alt=""></noscript></span>
<div class="rsTmb"><span data-picture data-alt="Fairmont_Mayakoba_Wedding_001"><span data-src="http://acquaphoto.staging.wpengine.com/wp-content/uploads/Fairmont_Mayakoba_Wedding_001-320x213.jpg" ></span><span data-src="http://acquaphoto.staging.wpengine.com/wp-content/uploads/Fairmont_Mayakoba_Wedding_001-1024x683.jpg" data-media="(min-width: 320px)" ></span><span data-src="http://acquaphoto.staging.wpengine.com/wp-content/uploads/Fairmont_Mayakoba_Wedding_001.jpg" data-media="(min-width: 1024px)" ></span><noscript><img src="http://acquaphoto.staging.wpengine.com/wp-content/uploads/Fairmont_Mayakoba_Wedding_001-320x213.jpg" alt=""></noscript></span></div>
</div>

So you can see that for Thumb it is loading the largest image it can, which on large screens is full-res resized down to 96×72. That’s pretty much the opposite of what we need it to do. 😉

I am able to customize the markup for RoyalSlider, just not sure what would work best for the thumbs with Responsify. Would you mind taking a look at the markup documentation and making a recommendation?
http://help.dimsemenov.com/kb/wordpress-royalslider-tutorials/wp-using-slide-markup-editor

Thanks! BTW- I’ve tested all the other wordpress responsive/scaled images plugins and yours is by far the best!!!

and here is the markup that I am currently using:

<div class="rsContent">
<img class="rsImg" src="{{image_url}}" data-rsBigImg="{{large_image_url}}" alt="{{title}}" width="{{image_width}}" height="{{image_height}}"/>
<div class="rsTmb"><img src="{{thumbnail_url}}" alt="{{title}}" width="{{thumbnail_width}}" height="{{thumbnail_height}}"/></div>
  {{html}}
  {{animated_blocks}}
  {{#link_url}}
  <a class="rsLink" href="{{link_url}}">{{title}}</a>
  {{/link_url}}
</div>