Add class to linked image anchor in WYSWIYG-Field

• leuchterits

• November 10, 2016 at 12:40 am

I use the ACF-Flexible Content Field to create content blocks. One Flexible Content Layout contains just a WYSIWYG Editor-Field.

When i add an image to the editor i can choose where to link this image (media, attachmenet, url). This creats an element arround the image. What i need is to add a class to the Element based on the link type. So when i choose media i want the code be like :

<a href="URL" class="media-link"><img></a>

Is this possible? Thanks for your help

• Stormwind

• November 10, 2016 at 1:34 pm

You could try using a plugin to add a custom permalink base URL for media files, such as this one:

Attachment Slug

Then target the different link types purely with CSS:

.post-content a { /* any link or custom link */ }
.post-content a[href*="/media_base_url/"] { /* overrides for attachment links */ }
.post-content a[href*="/wp-content/uploads/"] { /* overrides for direct media links */ }

The only problem is with custom links, which are not targetable by themselves. In this case, you could use some JavaScript:

jQuery( function() {
jQuery('.post-content a > img').parent().addClass('media-link');
});