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');
  });