Media shortcode. Requests accepted

colak · 2020-07-07 17:47:47

I’m not sure if this is the right forum section for this, but here it goes. Following Stef’s suggestion, I have prepared a GDPR compliant shortcode which will allow users to embed media in their pages.

The shortcode is accompanied by a css recommendation in order to make the media responsive.

Basic usage¹

==<txp::media from="xxx" media="yyy" title="h4. your title here" />==

More information, the shortcode, and the css can be found on github.

Currently supported services

Video or audio
1. Local video or audio (various formats)
2. Internet Archive (video or audio)
Video
1. YouTube (individual videos, user video feed, or playlists)
2. Vimeo (individual videos, Vimeo 360, or albums)
3. DailyMotion
4. PeerTube
5. Ted
6. YouTube nocookie
7. MetaCafe
8. Coub
9. Vidyard
10. BitChute
11. Vlare
12. Freespeechtube
13. Playtube
Video or GIF
1. Giphy (Gifs or videos)
Audio
1. AudioBoom
2. IndieSound
3. SoundCloud
4. BandCamp
5. MixCloud
6. Spotify
Other
1. Google Maps (maps created in ‘My Maps’ https://www.google.com/mymaps)
2. Datawrapper

I am now accepting requests to expand this list. If there is any media hosting sites you would like me to include please let me know by posting a url to a page containing the media file and I’ll do the rest.

To do (once I figure out how)

Open street maps
Bing maps

In my research I came across

https://embed.ly/providers which has a huge list that may help with your requests, and
https://github.com/oscarotero/Embed, a php library that can embed from any web page

¹ See examples on Github as more attributes are required for some hosts.

Last edited by colak (2020-12-11 07:28:17)

Bloke · 2020-07-07 18:18:21

Great stuff, Yiannis, thank you. I’d tentatively like to suggest Bandcamp. A client and friend of mine host some of their music on that platform: jabbacartel.bandcamp.com/.

It’d be nice to be able to embed stuff directly from there instead of having to upload samples to Txp first (although that does give us some nice file_download goodness and ability to hook things up to images via track-name or category-as-album-name).

Aside: I’ve had the privilege of recording Carol when I ran the studio years ago and she was writing solo music. Still got the recordings somewhere on my hard drive tower. She has a lovely voice.

colak · 2020-07-08 03:14:45

Consider the responsive embed of bandcamp included:)

colak · 2020-07-08 16:37:40

Although I have said that I have included soundcloud, I am faced with a problem, which, as I am not a member of the site, I’m not sure how to solve, so some advice would be appreciated.

In other sites, using vimeo as an example we have
https://vimeo.com/1234
and the embed code is
<iframe src="https://player.vimeo.com/video/1234?color=cc0000&byline=0" width="640" height="360" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>

As such only one yield is needed in order to identify the urls of both the webpage where the video resides and its embedable iframe. This is the case with most providers.

In the case of soundcloud, the external url appears to have no relationship with the iframe code. ie.

https://soundcloud.com/furtherfield/news-from-where-we-are-1
has this embedding code:

<iframe width="100%" height="300" scrolling="no" frameborder="no" allow="autoplay" 
src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/795397666&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true">
</iframe>

The iframe appears to identify the id of the track (795397666) but all url combinations I have tried with that id, did not return the desired page.

I could of course introduce another yield but I am trying to make things consistent. Is there something I am missing with soundcloud?

colak · 2020-07-09 06:39:10

Hmmm same issue in Bandcamp

Bloke · 2020-07-09 13:14:54

colak wrote #324375:

In the case of soundcloud, the external url appears to have no relationship with the iframe code.

True, but you can still create a working embed code this way:

<iframe width="100%" height="300" scrolling="no" frameborder="no" allow="autoplay" 
src="https://w.soundcloud.com/player/?url=https%3A//soundcloud.com/furtherfield/news-from-where-we-are-1&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true">
</iframe>

So as long as it’s encoded in the ?url= param, you can use the URL itself in place of the one they supply in the embed code.

They seem to have an internal representation of each clip under an ID, which they can stream using their own soundcloud:// protocol. Perhaps they’re in a transition phase and they still accept both, so I’m not sure how long the above hack might continue to work.

Might be the same for bandcamp? Try it!

Last edited by Bloke (2020-07-09 13:15:33)

colak · 2020-07-09 14:32:55

Thanks Stef, I have now added Soundcloud but I also had to add another yield attribute.

Time to re-examine bandcamp:)

Bloke · 2020-07-09 15:02:52

Cool, thanks for the update.

Not sure I follow your ‘url’ example though. Why can’t you prefix the URL with the domain name in the code, instead of having people provide the full URL? Is that just for future proofing in case you want to use it in other providers later? I’d use a name attribute or something like that and just provide the name of the track that you can append to the domain.

Alternatively, can you switch on the media attribute by detecting if it’s all numeric or not? If it is, treat it as a media ID. If not, treat it as a textual name and alter the URL format accordingly.

You can detect the type of incoming string by running the variable assignment through escape="tidy, integer". If it returns an empty string, then it’s not a pure integer, otherwise, it’s a number.

Secondly, why did you abbreviate the txt but leave all the other attributes fully spelled? I know it’s a few extra characters, but I would consider title for consistency with other Txp tags.

Last edited by Bloke (2020-07-09 15:03:22)

michaelkpate · 2020-07-09 15:50:55

I’ve tried to get it working on two different sites: I keep getting:


Tag error: <txp::media from="v" media="336049258" txt="My awesome video" /> ->  Textpattern Warning: Tag opening/closing mismatch: <txp:if_yield name="media">…</txp:oui_if_cookie>. while parsing form media on page archive

Tag error: <txp::media from="v" media="336049258" txt="My awesome video" /> ->  Textpattern Warning: Closing tag without corresponding opening tag: </txp:if_yield>. while parsing form media on page archive

I can’t figure out why.

colak · 2020-07-09 16:03:59

Bloke wrote #324391:

Cool, thanks for the update.

Not sure I follow your ‘url’ example though. Why can’t you prefix the URL with the domain name in the code, instead of having people provide the full URL? Is that just for future proofing in case you want to use it in other providers later?

As I expect this to be used by people who are not necessarily versed with txp I felt that copy pasting the url there would be much easier

I’d use a name attribute or something like that and just provide the name of the track that you can append to the domain.

Good idea:)

Alternatively, can you switch on the media attribute by detecting if it’s all numeric or not? If it is, treat it as a media ID. If not, treat it as a textual name and alter the URL format accordingly.

You can detect the type of incoming string by running the variable assignment through escape="tidy, integer". If it returns an empty string, then it’s not a pure integer, otherwise, it’s a number.

This would unfortunately not work as youtube (not sure about the rest) uses letters, numbers, and underscores, in the ids. I guess one way of doing it is to check if there is an https or a / in the field and if there isn’t it’s a resource id. But I am open to better ideas:)

Secondly, why did you abbreviate the txt but leave all the other attributes fully spelled? I know it’s a few extra characters, but I would consider title for consistency with other Txp tags.

That’s one of my shorthands for my personal shortcodes but you are right, as this is for public consumption it should follow txp’s standards.

Bloke · 2020-07-09 16:10:39

colak wrote #324394:

This would unfortunately not work as youtube (not sure about the rest) uses letters, numbers, and underscores, in the ids.

Sorry, I meant just for SoundCloud, since they are the only ones that use the url and media attributes. You could carry on using media for YouTube and others, but on SoundCloud you could add some extra detection there to see if the value passed into the media was all numeric or not.

colak · 2020-07-09 16:16:58

michaelkpate wrote #324393:

I’ve tried to get it working on two different sites: I keep getting:

...

I can’t figure out why.

Hi Michael, thanks for testing! That is strange! I’m not getting this error!

Textpattern CMS

Textpattern CMS support forum

#1 2020-07-07 17:47:47