The Support Forums will be in read-only mode for a scheduled maintenance window on 01 September 2016 14:00 UTC - 20:00 UTC. More information.

Jetpack by WordPress.com
[resolved] Add Audio to Carousel? (6 posts)

  1. hearvox
    Posted 2 years ago #

    I'd like to add an HTML audio tag to the Caption of an image in the Carousel: is that possible? I can add the audio tag to the Desciption, but I can't seem to get it added to the Caption.

    I have a custom meta field, named 'audio_url', added to images' Attachment Details, then use that value in wp_audio_shortcode() to generate an audio tag.

    Then I add the audio tag to the image's Description in the Carousel, using 'jp_carousel_add_data_to_images' filter with a preg_replace() on data-image-description: That works well. But I can't seem to find the way to add the audio tag to the Caption instead of the Description (ie, there's no data-image-caption as far as I can tell) . Thanks for any pointers.


  2. Jeremy Herve
    Jetpack Mechanic
    Plugin Author

    Posted 2 years ago #

    This filter is indeed the right way to go: you can replace the caption value inside the array of meta data like so:

    function jeherve_carousel_audio( $html,$imgID ) {
    	$metadata = wp_get_attachment_metadata( $imgID );
    	$img_meta = $metadata['image_meta'];
    	$img_meta['caption'] = 'YOUR_AUDIO_URL';
    	$img_meta = json_encode( $img_meta );
    	$html = preg_replace( '/data-image-meta="\{.*?\}"/', 'data-image-meta="'.esc_attr($img_meta).'"', $html );
    	return $html;
    add_filter( 'jp_carousel_add_data_to_images', 'jeherve_carousel_audio', 10, 2 );

    Of course, that's only a proof of concept but you should be able to build a player inside that function, and pass it as a new value with the rest of the meta data.

    I hope this helps. Let me know if you need more help!

  3. hearvox
    Posted 2 years ago #

    Thanks much, Jeremy. I actually want to keep the Caption and append the audio tag to it, but should have no prob getting there from the function your posted. You have indeed Engineered my Happiness.

  4. hearvox
    Posted 2 years ago #

    Jeremy, I'm back: tried you script and it doesn't seem to do the job. I'm testing w/ your sting 'YOUR_AUDIO_URL', It is showing up in:
    <img ... data-image-meta="{"aperture":2.8,"credit":"","camera":"DSC-HX100V","caption":"YOUR_AUDIO_URL"...}

    But is not replacing the displayed caption. The original caption displays. You can see the test here:

    You can see/hear that I have the audio tag working as the Description ( data-image-description=), but can not seem to alter the Caption that displays w/ your preg_replace, only the JSON in the image's data-image-meta attribute.

  5. Jeremy Herve
    Jetpack Mechanic
    Plugin Author

    Posted 2 years ago #

    Oh indeed! It turns out the Carousel view uses the default Caption value, instead of the data in data-image-meta. You should consequently be able to add the Audio player directly into the Media Uploader:

    The player will also be displayed when viewing the whole gallery:

    Does this help?

  6. hearvox
    Posted 2 years ago #

    Works great, Jeremy. You can even use the a text caption before the audio tag. Thanks, resolved.

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • Jetpack by WordPress.com
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic


No tags yet.