Support » Plugin: Jetpack by » Add Audio to Carousel?

  • Resolved hearvox


    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.

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Contributor Jeremy Herve


    Jetpack Mechanic

    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!

    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.

    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.

    Plugin Contributor Jeremy Herve


    Jetpack Mechanic

    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?

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

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Add Audio to Carousel?’ is closed to new replies.