Home Forums General Issues Wysiwyg Editor and jQuery Colorbox


Wysiwyg Editor and jQuery Colorbox

  • I am using a wysiwyg custom field to add photos to a custom post type. I am also using jQuerty Colorbox to display those photos in a pop-up lightbox-style gallery. The jQuery Colorbox requires a specific class be added the link tag in order to trigger the pop-up feature. When I insert photos into the regular WordPress content wysiwyg editor, the class is added automatically. But it doesn’t do that with the custom field I created. Is there something that can be adjusted in my custom field to insert that class?

    The site can be viewed here:

  • Hi @shawn00m

    Thanks for the question, but could you please demonstrate the differencce between the normal and ACF WYSIWYG value via screenshots?


  • Sure, I’m attaching three images. One shows the public view. The pink area is the ACF WYSIWYG content, the green is the default WP WYSIWYG (there are no images in there).

    The other images show the admin screens for these fields. I can insert a class manually in the ACF WYSIWYG editor, that just becomes cumbersome when there are multiple images. I was hoping to streamline the process by having a class inserted automatically for any image added to that field.

    Any help would be appreciated.
    Public Screen

  • Hi @shawn00m
    Your screeshots do not demonstrate the statements you made in your original question.

    In particular “When I insert photos into the regular WordPress content wysiwyg editor, the class is added automatically. ”

    Can you please demonstrate the DIFFERENCE between the ACF wysiwyg and the normal wysiwyg when inserting an image and the classes that are generated.


  • Thanks for the reply. I’m not sure how to demonstrate that. The only way to really see it is in the page source. If you view this page and view the source, you will see an image named lemons-avacados-01-80×80.jpg. In that image tag is a class called “colorbox-001”. This was automatically inserted when I inserted that image into the WYSIWYG editor for that page.

    By contrast, view this page and view source, you’ll see an image named meadow-lakes-01.jpg but there is no class for colorbox even though it was inserted through the WYSIWYG custom field. Does that help?

  • Hi @shawn00m

    Perhaps what is happening, is the ‘color box’ plugin is using JS or PHP to add the class dynamically to the the_content value.

    I hope that it is using PHP, because if it is, you can simply pass the ACF value through the the_content filter and the color-box plugin will all the class like normal.

    You can use the the_filter filter like so:

    echo apply_filters('the_content', get_field('field_name'));

    So the above code would replace the ‘the_field(‘field_name’)’ which you are currently using.

    Hope hat makes sense.


  • Elliot, as always, thanks for the reply. Do I add that filter in my code where I am call the field? This is how I am doing that now:

    <?php the_field('property_photos'); ?>


  • Hi @shawn00m

    Just change your code to:

    echo apply_filters('the_content', get_field('property_photos'));
  • You’re the best Elliot! Thank you!

Viewing 9 posts - 1 through 9 (of 9 total)

The topic ‘Wysiwyg Editor and jQuery Colorbox’ is closed to new replies.