Home › Forums › General Issues › 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: http://caps.mulligandesign.com/property/ogle-co-farm/
Hi @shawn00m
Thanks for the question, but could you please demonstrate the differencce between the normal and ACF WYSIWYG value via screenshots?
Thanks
E
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.
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
E
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.
Thanks
E
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'); ?>
Thanks!
-Shawn
Hi @shawn00m
Just change your code to:
echo apply_filters('the_content', get_field('property_photos'));
The topic ‘Wysiwyg Editor and jQuery Colorbox’ is closed to new replies.
Welcome to the Advanced Custom Fields community forum.
Browse through ideas, snippets of code, questions and answers between fellow ACF users
Helping others is a great way to earn karma, gain badges and help ACF development!
We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Privacy Policy. If you continue to use this site, you consent to our use of cookies.