WordPress.org

Ready to get started?Download WordPress

Forums

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

  1. hearvox
    Member
    Posted 9 months 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.

    http://wordpress.org/plugins/jetpack/

  2. Jeremy Herve
    Happiness Engineer
    Plugin Author

    Posted 9 months 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
    Member
    Posted 9 months 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
    Member
    Posted 9 months 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:
    http://test.transom.org/?p=29158

    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
    Happiness Engineer
    Plugin Author

    Posted 9 months 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:
    http://i.wpne.ws/SYii
    http://i.wpne.ws/SYVN

    The player will also be displayed when viewing the whole gallery:
    http://i.wpne.ws/SYG0

    Does this help?

  6. hearvox
    Member
    Posted 9 months ago #

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

Reply

You must log in to post.

About this Plugin

About this Topic

Tags

No tags yet.