Call
608.845.2900
Visit
330 Locust Dr.
Verona, WI 53593
Message
info@powderkegwebdesign.com
NEED SOME GUIDANCE ON PLANNING A NEW WEBSITE?
Download our free guide!
Powderkeg Web Design
Menu
Message Us
Nick
Nick

The simplest way to modify image links in WordPress WYSIWYG editors!

January 03, 2017

The default way for WordPress to insert images is to insert them with a link to the full size version. This usually reloads the page with a direct link to the image – something that isn’t what most people expect / go for when they add an image.

There are 2 ways around this:

  1. When you add media to your wysiwyg editor you can select that the link be “none” on the right side column towards the bottom:
  2. You can hook in to the “the_content” filter and do some magic:

    This filter searches for any links that lead directly to an image and modifies their markup. In this particular case, I’m adding the “data-lity” attribute so that they open up in a nice lightbox instead of reloading the page ( Lity is an awesome little lightbox plugin with quite a bit of functionality ). You could also use this filter to add a custom piece of javascript onclick or do some more complex logic to determine if the link is internal vs external and modify it accordingly.
Nick
Nick
Senior Developer

Nick is an ambitious and versatile developer with a wide range of talents. He is an efficient coder that utilizes his resources in order to achieve both his and the clients’ goals. His Alma Mater is the University of Wisconsin – Stevens Point where he graduated with honors in Web and Digital Media Development.