JasmineFoster Posted February 14, 2022 Posted February 14, 2022 Site URL: https://www.theenrichededucator.org/podcast Hi, I am using a summary block to style my blog page (which is for my podcast episodes). I'm wondering if there is a way to include the audio block in the summary block for each blog/podcast entry? Right now I am using some CSS code to replace the "read more" link with a "listen now" image button. But ideally I'd just like to completely remove the read more link and have my actual Audio Block included in the body of the summary item. Is there some code that would help me achieve this?
JasmineFoster Posted February 19, 2022 Author Posted February 19, 2022 On 2/16/2022 at 10:56 AM, AussieAudio said: This! I need too Hey @AussieAudio I didn't quite achieve what I was looking for, but found a decent workaround/substitute if you're interested. It took some time, but if you're up to it.... what I did was: 1. Added some text to the bottom of the podcast entry post ("listen now") and hyperlinked it to my audio player, which is a buzzsprout player that embedded into the Content of the post. I grabbed the audio player's #blockID to use as the "Source Url" of the post (this will be important for the lightbox to work properly). 2. Using some Custom CSS, I swapped the "Listen Now" hyperlinked text with a background image of a "Listen Now" button. This is what will be displayed in the Summary Block. [see below] Note: make sure in your summary block, you have the "excerpt" option toggled on, otherwise your button won't display. Quote /* podcast listen now button link */ .summary-excerpt a { background-image:url(https://static1.squarespace.com/static/60bfbfbbf73bcb7efe805cc5/t/620a75ce7c220b6d6c56fd68/1644852686231/Listen+Now+Button+%281%29.png); background-size: 150px; background-repeat: no-repeat; height: 50px; font-weight: 0; font-size: 50px !important; color:transparent!important; position: absolute; } 3. Used the "Lightbox Anything" plug in to make all of my new "Listen Now" buttons pop up with my audio player. [This is easy but you would need your own code that the creators of the plugin provide.] This is the last step. You can take a look at how it works here: www:theenrichededucator.org/podcast. AussieAudio 1
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment