WordPress.org

Ideas

Add rel or class to image links

  1. psperkins
    Member

    12345

    When I use the image uploader in a post/page I'd like to be able to have an input box to insert a "class" or "rel" attribute to the link. Would be very convenient for people using jquery on images in posts, etc.

    Posted: 4 years ago #
  2. Mark / t31os
    Moderator

    12345

    You can do that in jQuery already, or if you're referring to images or media sent to the editor from the media window, there are filters available you could hook onto like media_send_to_editor or image_send_to_editor.

    jQuery has piles of easy to use selectors, as long as the element you want to change isn't inside piles of elements that share common classes it should be pretty easy to target particular links/images or elements.

    I do however think that the link/media functions should provide more proportionate filters/hooks to accomodate changing small things like class or rel(should you want to), rather then using the filters above, which require a string replacement routine, ie. str_replace, preg_replace, etc.. (which is imo is poor if all you want to do is say, add a class). I'd like to see filters that work more like for example body_class or post_class (an array of classes, that can be added to, modified, or totally wiped - ie. full control of output).

    Not as a button in the editor though, hook would be great, i already have 20-30 buttons in the editor "i never use", i don't want another, thanks... :) impo..

    Rating 3 as i'm not against the idea, but i'd prefer a filter/hook implementation over a button one (share the idea, just have a different view of how it should be done).

    Posted: 4 years ago #
  3. boykenan
    Member

    12345

    I find myself wishing for this in every single WordPress site I build. Rather than another button in the image editor, though, I'd like the media uploader to output the same set of classes into the link tag that it adds to the image tag. it would be great to be able to address links in the stylesheet (or in scripts) based on what manner of image they contain.

    Posted: 4 years ago #
  4. bensheldon
    Member

    Well, wish no further, because you just need to add this to your theme's functions.php file:

    /**
     * Attach a class to linked images' parent anchors
     * e.g. a img => a.img img
     */
    function give_linked_images_class($html, $id, $caption, $title, $align, $url, $size, $alt = '' ){
      $classes = 'img'; // separated by spaces, e.g. 'img image-link'
    
      // check if there are already classes assigned to the anchor
      if ( preg_match('/<a.*? class=".*?">/', $html) ) {
        $html = preg_replace('/(<a.*? class=".*?)(".*?>)/', '$1 ' . $classes . '$2', $html);
      } else {
        $html = preg_replace('/(<a.*?)>/', '$1 class="' . $classes . '" >', $html);
      }
      return $html;
    }
    add_filter('image_send_to_editor','give_linked_images_class',10,8);

    I have a brief writeup on my blog about this too (though it's not much more than the code above)

    Posted: 3 years ago #
  5. lemonygem
    Member

    Bensheldon, that ROCKS! Thank you!

    Posted: 2 years ago #
  6. Tim Berneman
    Member

    12345

    I too would like this feature. I just want to add the class "nofancybox" to the 4 images in my slider on the home page and leave all other images alone. This should be easy to implement in the media.php file when an image is uploaded as it's already asking for alt, title, etc.

    Posted: 2 years ago #
  7. em_jane
    Member

    this will add rel=lightbox[postid] to the href of the image link (modified from posted code)

    <?php>
    add_filter('the_content', 'addlightboxrel_replace');
    function addlightboxrel_replace ($content)
    {	global $post;
    	$pattern = "/<a(.*?)href=('|\")(.*?).(bmp|gif|jpeg|jpg|png)('|\")(.*?)>/i";
      	$replacement = '<a$1rel="lightbox[%LIGHTID%]" href=$2$3.$4$5$6</a>';
        $content = preg_replace($pattern, $replacement, $content);
    	$content = str_replace("%LIGHTID%", $post->ID, $content);
        return $content;
    }
    
    ?>
    Posted: 2 years ago #
  8. tommycopeland
    Member

    em_jane, really fantastic piece of code! Works like a charm!!

    Posted: 2 years ago #
  9. zerge
    Member

    12345

    Thanks em_jane, that's help me too.

    Posted: 2 years ago #
  10. mattrock1
    Member

    Awesome post bensheldon. Very much appreciated. This rocks!

    Posted: 2 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.

  • Rating

    12345
    14 Votes
  • Status

    This idea is under consideration