better call to action for youtube and podcast thumb

created merge request !41 (merged) to address this issue

mentioned in merge request !41 (merged)

@cfg0846 Please check https://www3-dev.tuhh.de/e-10/pontifex/49-better-call-to-action-for-youtube-and-podcast-thumb/docs/chapter5/502/ for the implementation of the overlay and !41 (merged) for changes made to files.

@cfg0846 I found that there is a discrepancy between the notation of podcasts and videos, e.g. see L22f. in nodes/graph.json and L83 in /bin/build_md.py. I suggest to move the HTML stuff from the JSON to the Python script and just leave the podcast link in the JSON file.

The discrepancy is due to the fact that I was not involved in some of the Podcast episodes, again other podcast episodes are directly hosted on our Webserver (Authors are Julian and me). I don't think that there is an easy solution that offers the same amount of flexibility.

I you can provide a code snippet, I will update the podcast entries manually (at least for the moment).

I see. But I thinks it still easier and cleaner to increase the number of fields in the JSON than to copy the HTML. What do you think?

It may look cleaner, but this general approach introduces at least three more variables that need to be handled:

• URL of the podcast
• name of the thumbnail (or a separate processing of the URL to generate thumbnail)
• optional HTML

For the moment I think, using a regex is faster. Example in python3:

import re
podcast = 'Click <a href=\"https://anchor.fm/profmoppi/episodes/Field-Axioms-e19fud5/a-a6knu04\" target=\"_blank\">here</a> or on the thumbnail to open up a podcast episode in a separate tab!<a href=\"https://anchor.fm/profmoppi/episodes/Field-Axioms-e19fud5/a-a6knu04\" target=\"_blank\"><img src=\"./well-defined-and-wonderful.jpg\"></a> <p>Courtesy of Marcus Waurick. <i>Well-defined & Wonderful podcast</i>, <a href=\"https://www.marcus-waurick.de/teaching\" target=\"_blank\">marcus-waurick.de</a>.</p>"'
url = re.findall('https://anchor.fm.*?(?=target)', podcast)[0]
thanks = re.findall('<p>.*</p>', podcast)[0]
new = f'<div class="media-container"><img class="image" src="./wdaw.jpg"><div class="middle"><a class="button" href="{url}" target="_blank">{thanks}</a></div></div>'
print(new)

I like the idea of more automatization for podcast embedding, but this is something that we can easily postpone to a later stage. As of now, the "podcast" attribute will be included verbatim in the resulting page, just like the "video" attribute. We could later introduce, e.g., an "anchorfm" attribute that handles the inclusion of links with your styling, taking care of linking the proper thumbnail without breaking the original way the preprocessing works.

I will think about it. Maybe it's better to switch back to Spotify links instead, as they are not as cryptic as the ones from anchor.fm and allow for easier extraction of a unique identifier. Example

https://open.spotify.com/embed/episode/1i62R3ZdwhjASp1TNJ2Bcy

vs.

https://anchor.fm/profmoppi/episodes/Continuity-Part-1-with-Fabian-Gabel-e1kvb1u/a-a820n60

In this case, I would suggest the following roadmap:

• Quickfix using regex as above
• Add "spotify" attribute to graph.json and proper handling of "spotify" to build_md.py
• Manually adapt all anchor.fm links to Spotify, add them to "spotify" and leave attribution in "podcast"
• rename thumbnail to match spotify-id

What do you think?

@xldrkp It's done :-)

changed due date to September 22, 2022

closed with merge request !41 (merged)

mentioned in commit 14d03533