Skip Navigation

[Resolved] Post Excerpt in View Needs To Display The Media Player from an Embed

This thread is resolved. Here is a description of the problem and solution.

Problem: The user would like to display post excerpts and would like them to render audio players if they contain links to audio files.

Solution: The excerpt is always generated as raw data and does not preserve or create any special formatting. For this use case we use displayed the post body/content and we used custom CSS code to display only the first paragraph. Check this reply https://toolset.com/forums/topic/post-excerpt-in-view-needs-to-display-the-media-player-from-an-embed/#post-2167041

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Our next available supporter will start replying to tickets in about 2.57 hours from now. Thank you for your understanding.

This topic contains 4 replies, has 2 voices.

Last updated by marcusC-4 1 month, 1 week ago.

Assigned support staff: Jamal.

Author
Posts
#2165963

Hi,

I am not sure if this is possible, but I'd like for my post excerpt to display the audio player, rather than the anchor.fm link that currently displays.

You can see what I mean on this page: hidden link

If you click on Read More from one of the posts, you will see that the audio player automatically works correctly on the Podcast single page. However, in the View, it just shows the URL, instead of the media player.

#2165991

UPDATE: I switched to using the post body and now the audio player works as expected, which is great.

However, the body doesn't have an option to limit the character count. So the entire post body is showing and I need to limit it. I have followed the instructions here, but am not having any luck: https://toolset.com/forums/topic/limit-post-body-content-by-words-cannot-use-exerpt-because-content-has-an-link/

Is there another option for limiting the character count for the post body in this View?

#2166531

Jamal
Supporter

Languages: English (English ) French (Français )

Timezone: Africa/Casablanca (GMT+01:00)

Hello and thank you for contacting Toolset support.

The excerpt, unlike the post body, displays raw data and will not initialize the player. The workaround on the other hand seems incomplete to me. Have you added the shortcode code to the theme or in a Toolset snippet?

add_shortcode('limit_content', 'trim_shortcode');
 function trim_shortcode($atts, $content = '') {
    $content = wpv_do_shortcode($content);
    $length = (int)$atts['length'];
   
    if (strlen($content) > $length) {
        $content = substr($content, 0, $length) . '…';
    }
   
    // Strip HTML Tags
    $content = strip_tags($content);
   
    return $content;
}

If you have already added it to a Toolset snippet, make sure that the snippet is active.

If that does not help, allow me temporary access to your website to check this closely. Your next reply will be private to let you share credentials safely. ** Make a database backup before sharing credentials. **

#2167041

Jamal
Supporter

Languages: English (English ) French (Français )

Timezone: Africa/Casablanca (GMT+01:00)

Thank you for the credentials. I can see why the shortcode breaks the layout. Because it removes the closing tags(such as <div>) and that will definitely break the layout.

I tried to create another shortcode that will apply the_content filter to the exceprt, hoping that will generate the audio player, but it did not help.

As a workaround, I thought about a simple CSS solution, assuming that the audio player is always the first in the content. The idea is to display the content but hide all paragraphs except the first one. For that, we need to add a CSS class to the Fields&Text block(my-hide) and add the following CSS code. Check this screenshot hidden link

.my-hide>p{display:none;}
.my-hide>p:first-of-type{display:block;}

I hope this is a viable solution for you. Let me know your feedback.

Please note that I added this only to the Podcast content template inside the view's loop. You may need to add it to the other content templates.

#2167395

Interesting idea to use CSS. I decided to keep what you did, plus add a max-height to the p that is visible and set overflow to hidden. That combination helped truncate it nicely. I can't get a the 3 dots at the end of the text unfortunately, but I think it works out pretty well this way.

Thanks for your help.