I realize this is crazy but, I built up a filtered gallery with quicksand and it pulls in a larger image, title and description when you click the smaller image it shows the data-img in a larger form. Below is the code that is currently working...

<img src="<?php echo $large_image ?>" data-img="<?php echo $large_image ?>"
 data-title="<?php echo get_the_title(); ?>" 
 data-description="<?php the_content();?>" alt="" class="superbox-img" />

My client came back and asked if they could change the larger images that is begin pulled from the data-img attribute from static images to galleries... So I installed the Advanced Custom Fields plugin and added a WYSIWYG editor, for a shortcode field, in the portfolio posts (custom page type). Which I would like to import a royal slider(http://dimsemenov.com/plugins/royal-slider/) short code into. I've since changed the code from above to the following...

<img src="<?php echo $large_image ?>" 
data-img="<?php htmlentities(the_field('portfolio_galleries')); ?>" 
data-title="<?php echo get_the_title(); ?>" 
data-description="<?php the_content();?>" alt="" class="superbox-img" />

Which is throwing an error and spitting out the following HTML...

<img src="http://localhost:8888/BVH/wp-content/uploads/2013/03/St-Francis-Assisi-Interior-6-.jpg" 
data-img="<div id="new-royalslider-6" class="royalSlider new-royalslider-6 rsMinW rs-simple-vertical" 
style="width:100%; height:500;">
<div class="rsContent">

<a class="rsImg" href="http://localhost:8888/BVH/wp-content/uploads/2013/03/test1-1024x437.png">test1</a>
<div class="rsTmb">test1</div>

</div><div class="rsContent">

<a class="rsImg" href="http://localhost:8888/BVH/wp-content/uploads/2013/03/test2-1024x437.png">test2</a>
<div class="rsTmb">test2</div></div>

<div class="rsContent">
<a class="rsImg" href="http://localhost:8888/BVH/wp-content/uploads/2013/03/test3-1024x437.png">test3</a>
<div class="rsTmb">test3</div></div></div>" 

data-title="Doane" data-description="<p>testing1234</p>" 
alt="" class="superbox-img" />

Maybe I'm going about this the wrong way but the initial gallery worked great and I'm wondering how to go about accomplishing this problem any help would be great as I know this is probably a lost cause the way I'm currently trying to accomplish this. :-/

Thanks in advanced.


data-img="&lt;div id=&quot;new-royalslider-6&quot; 
class=&quot;royalSlider new-royalslider-6 rsMinW rs-simple-vertical&quot;  
style=&quot;width:100%; height:500;&quot;&gt;&lt;div 
class=&quot;rsContent&quot;&gt; &lt;a 
class=&quot;rsImg&quot; href=&quot;localhost:8888/BVH/wp-content/uploads/2013/03/…; &lt;div` 
  • You really need to provide more information here. Are we talking about jQuery Quicksand? What kind of content are you using it for ? What script are you using to pull the larger image from the data attribute? D Do you want to use quicksand in combination with the royal slider? How exactly? What would happen if the user would click on the quicksand item? Would it display a modal box or show inline somewhere in the page?
    – Jan Beck
    Commented Mar 27, 2013 at 17:32
  • Yes, I apologize. I'm using jQuery Quicksand for the filtering. I'm using images from my "featured image" that is getting filtered and I show a title on hover. I"m using Superbox to show the larger images - toddmotto.com/labs/superbox - I'd like to use the quicksand and as stated before. use the data-img for the royal slider. Here is a link to what I have now - bvh.delineamultimedia.com/?page_id=2 - When you click the image there is a dropdown, I want to keep the featured image and replace the image after the click by the title and desc with the slider. I hope that helps.
    – bryanlewis
    Commented Mar 27, 2013 at 17:36
  • Thank you for the additional information. I looked at your code and it becomes much clearer now what you try to accomplish. I will edit my answer below.
    – Jan Beck
    Commented Mar 27, 2013 at 18:14
  • Thank you! I really appreciate your help! I don't believe htmlentities is the way to go but I could be wrong.
    – bryanlewis
    Commented Mar 27, 2013 at 18:15

1 Answer 1


the_field echoes the output while htmlentities() expects the value to be returned. Try get_field instead:

data-img="<?php echo htmlentities(get_field('portfolio_galleries')); ?>" 


Instead of adding this huge chunk of html for the slider to the data-attribute just add it after your image:

<img src="<?php echo $large_image ?>"  
data-title="<?php echo get_the_title(); ?>" 
data-description="<?php the_content();?>" alt="<?php echo get_the_title(); // be nice ?>" class="superbox-img" />

and hide it with your css:

.portfolio-item .royalSlider { display: none; }

Now load the html into your superbox container when the user clicks on the item by editing this into your superbox.js around line 36:

superbox.find('.royalSlider').remove(); // remove the slider from previous events
var imgData = currentimg.data();
var sliderData = currentimg.next('.royalSlider'); // grab the slider html that we want to insert

superboximg.attr('src', imgData.img); 

    if (sliderData) { // show the slider if there is one
        superbox.clone().append(sliderData); // clone the element so we don't loose it for the next time the user clicks
    } else { // if there is no slider proceed as before
        if (imgData.title) {
            superbox.append('<h3 class="title">' + imgData.title + '</h3>');
        if (imgData.description) {
            superbox.append('<div class="description">' + imgData.description + '</div>');

There are prettier ways to do this like echoing the urls of the slider to the <img /> attributes and then generating the slider html by looping through these urls but for now this should work.

  • Could you please edit this into your original answer? I can't read anything from this ;)
    – Jan Beck
    Commented Mar 27, 2013 at 17:12
  • That certainly fixed the error it was throwing but I'm still not seeing the gallery probably because the html output is the following after that fix... Anyway to remove the "&quot;"? above is the code in the original question where it says "UPDATE" Sorry about that.
    – bryanlewis
    Commented Mar 27, 2013 at 17:15
  • I think I need to re-think the solution. This isn't currently working at all.
    – bryanlewis
    Commented Mar 27, 2013 at 18:37
  • did you try my updated answer?
    – Jan Beck
    Commented Mar 27, 2013 at 18:40
  • Trying it now. This is exactly what I was wanting to do!!! Will let you know once I've finished if it works properly. Thank you soo so much!
    – bryanlewis
    Commented Mar 27, 2013 at 18:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.