Go to main content

Textpattern CMS support forum

You are not logged in. Register | Login | Help

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

colak
Admin
From: Cyprus
Registered: 2004-11-20
Posts: 8,289
Website

Media shortcode. Requests accepted

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 usage1

==<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 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

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

Last edited by colak (2020-08-13 08:42:28)


Yiannis
——————————
neme.org | hblack.net | LABS | State Machines | NeMe @ github | Covid-19; a resource
I do my best editing after I click on the submit button.

Offline

#2 2020-07-07 18:18:21

Bloke
Developer
From: Leeds, UK
Registered: 2006-01-29
Posts: 9,785
Website

Re: Media shortcode. Requests accepted

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.


The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.

Txp Builders – finely-crafted code, design and Txp

Offline

#3 2020-07-08 03:14:45

colak
Admin
From: Cyprus
Registered: 2004-11-20
Posts: 8,289
Website

Re: Media shortcode. Requests accepted

Consider the responsive embed of bandcamp included:)


Yiannis
——————————
neme.org | hblack.net | LABS | State Machines | NeMe @ github | Covid-19; a resource
I do my best editing after I click on the submit button.

Offline

#4 2020-07-08 16:37:40

colak
Admin
From: Cyprus
Registered: 2004-11-20
Posts: 8,289
Website

Re: Media shortcode. Requests accepted

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?


Yiannis
——————————
neme.org | hblack.net | LABS | State Machines | NeMe @ github | Covid-19; a resource
I do my best editing after I click on the submit button.

Offline

#5 2020-07-09 06:39:10

colak
Admin
From: Cyprus
Registered: 2004-11-20
Posts: 8,289
Website

Re: Media shortcode. Requests accepted

Hmmm same issue in Bandcamp


Yiannis
——————————
neme.org | hblack.net | LABS | State Machines | NeMe @ github | Covid-19; a resource
I do my best editing after I click on the submit button.

Offline

#6 2020-07-09 13:14:54

Bloke
Developer
From: Leeds, UK
Registered: 2006-01-29
Posts: 9,785
Website

Re: Media shortcode. Requests accepted

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)


The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.

Txp Builders – finely-crafted code, design and Txp

Offline

#7 2020-07-09 14:32:55

colak
Admin
From: Cyprus
Registered: 2004-11-20
Posts: 8,289
Website

Re: Media shortcode. Requests accepted

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

Time to re-examine bandcamp:)


Yiannis
——————————
neme.org | hblack.net | LABS | State Machines | NeMe @ github | Covid-19; a resource
I do my best editing after I click on the submit button.

Offline

#8 2020-07-09 15:02:52

Bloke
Developer
From: Leeds, UK
Registered: 2006-01-29
Posts: 9,785
Website

Re: Media shortcode. Requests accepted

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)


The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.

Txp Builders – finely-crafted code, design and Txp

Offline

#9 2020-07-09 15:50:55

michaelkpate
Moderator
From: Avon Park, FL
Registered: 2004-02-24
Posts: 1,330
Website

Re: Media shortcode. Requests accepted

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.

Offline

#10 2020-07-09 16:03:59

colak
Admin
From: Cyprus
Registered: 2004-11-20
Posts: 8,289
Website

Re: Media shortcode. Requests accepted

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.


Yiannis
——————————
neme.org | hblack.net | LABS | State Machines | NeMe @ github | Covid-19; a resource
I do my best editing after I click on the submit button.

Offline

Board footer

Powered by FluxBB