Adding support for Spotify in audo posts

[sharmstr]

NOTE: THIS IS A HACK THAT IS NOT SUPPORTED BY THE DEVELOPERS OF KELO. PLEASE DONT BUG THEM ABOUT IT.

We will be using Spotify playlist heavily on our site so I wanted to be able to get them to display (and play the auto) like the uploaded audio in carousels, masonry grids and the actual posts. See this to get an idea of what I’m talking about. The top post is in the ‘featured’ carousel and the bottom post is in a masonry grid.

https://24.media.tumblr.com/200c8f70f79b8d68b8ee275b726c5c7e/tumblr_n20weosgZO1squolvo1_500.jpg

For instructions, please see: https://github.com/colabsadmin/Kleo-Hacks/blob/master/AddSpotifyToAudioPosts

[Abe]

Pretty cool hack 🙂
Good job

You can also try to do it this way:
– Install https://wordpress.org/plugins/spotify-embed/
– Use the video post format and put the link in the Video embed input
You must put it in Video embed since that uses oEmbed wordpress feature.

Thanks

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[sharmstr]

OH! That’s sounds good. I’ll try that too. Less hacks = easier theme upgrades. Thanks!

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[sharmstr]

This works great. I really like the album art in the Masonry grid. Added bonus that it works great with Soundcloud too!

Hopefully you’ll be able to update the post editor to explain that.

Thanks again, Team!

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[Abe]

yes will do that 🙂
Great

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[sharmstr]

Sorry, one last thing to consider. Take a look at how spotify tracks and playlists get embeded into the activity stream. They take up the width of the container. I would be cool to do this with posts as well since it would fall in line with youtube videos and soundcloud playlist. The poor skinny spotify player looks akward 🙂 Thanks!

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[Abe]

Pfiu, we just finished the fix for Spotify to be responsive and take the container width. It gave us some headaches 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[sharmstr]

Wow. You guys are awesome. Can’t wait to see it. Thank you.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[sharmstr]

Hey Abe, sorry to bring back such an old thread. How can I specify the height of a spotify playlist in a post? I still like how it stretches the width but in doing so, it makes the height extremely tall.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[Abe]

Hi, I did some tests and come to something but it won’t display the playlist. See

COPY CODE

    iframe[src*="spotify.com"] {height: auto!important;}
    .fluid-width-video-wrapper {padding-top: 0 !important;}
    .fluid-width-video-wrapper iframe[src*="spotify.com"] {position: relative;}

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[sharmstr]

Ok. I’ll play around more when I’m done with some other things. I think maybe I’ll have to remove it from fitvid call and put it in its own one. idk. Thanks.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[Abe]

well let me know and maybe change it in the theme if it helps.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[Author]

Posts