0

I'm trying to output the post ID in the rel-attribute of the image links that are generated by WordPress when using the Add Media button. I found a way to retrieve the post id and also how to customize the output of the image links via the image_send_to_editor filter.

To customise the image link code I found following post on this WordPress forums:

function filter_image_send_to_editor($html, $id, $caption, $title, $align, $url, $size, $alt) {
  $html = sprintf('<a class="fancybox-img" href="%1$s"><img alt="%2$s" src="%1$s" /></a>', esc_attr(esc_url($url)), esc_attr($title));

  return $html;
}

add_filter('image_send_to_editor', 'filter_image_send_to_editor', 10, 8);

The code to get the post id is this:

global $post;
$id = $post->ID;

Now, when I combine the 2 the post ID doesn't get displayed. I want to output the post ID prefixed with lightbox- but when I look at the generated code the rel-attribute looks like this:

rel="lightbox-"

It seems I cannot retrieve the post ID inside of the filter function. The faulty code I use inside the above filter-function is:

  global $post;
  $id = $post->ID;

  $html = sprintf('<a class="fancybox-img" href="%1$s" rel="lightbox-%3$s"><img alt="%2$s" src="%1$s" /></a>', esc_attr(esc_url($url)), esc_attr($title), esc_attr($id));

  return $html;

You may ask, why do I want to attach the post ID to the image links? Well, I'm building a page which displays several posts (and their images) on one long page. I attached a lightbox plugin but I want a seperate lightbox per post. The lightbox plugin I'm using groups the images by rel-attribute. I'm trying to make the rel-attribute look like this: rel="lightbox-972" where 972 is a post id.

As a workaround I use javascript to make the lightboxes work on a per post basis but it would be nice to learn how to achieve this without the js-fiddling and to learn why this isn't working as expected...

0

You are right that global $post is not set inside the function. Because it is Ajax callback and there is no loop. However Ajax call is sending post ID which you can retrieve as $_POST['post_id'] inside the function.

Please note: In callback function arguments $url is not the image URL. It is anchor tag URL. So if someone choose none, attachment page or custom URL while inserting image in content then your image will be broken. So please consider using wp_get_attachment_image_src() instead of URL.

Then complete function will look like this

function filter_image_send_to_editor($html, $id, $caption, $title, $align, $url, $size, $alt) {
    $post_id = isset($_POST['post_id']) ? $_POST['post_id'] : 0;
    $image_url = wp_get_attachment_image_src($id, $size);

    return sprintf('<a class="fancybox-img" href="%1$s" rel="lightbox-%3$s"><img alt="%2$s" src="%1$s" /></a>', $image_url[0], $alt, esc_attr($post_id));
}
add_filter('image_send_to_editor', 'filter_image_send_to_editor', 10, 8);
  • Thanks for the answer, the explanation and the note! One remark for people passing by: Via this method some attributes are removed, like the class attribute "alignleft/alignright/alignnone". Maybe better to keep the existing generated output and use regular expressions to change the rel-attribute or add a data-* attribute. – metatron Apr 2 '16 at 19:44
  • IMHO regex should be last way to solve the problems. We still have options to extend this function as WordPress do using get_image_tag() – Sumit Apr 3 '16 at 6:38
  • I agree, that wasn't such a bright comment from my side. Better to solve this via normal WordPress functions instead of regex. – metatron Apr 3 '16 at 10:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.