{"id":3961,"date":"2018-10-06T16:23:30","date_gmt":"2018-10-06T16:23:30","guid":{"rendered":"http:\/\/wiki.davelevy.info\/?p=3961"},"modified":"2025-09-24T13:53:10","modified_gmt":"2025-09-24T13:53:10","slug":"flickr-slide-shows","status":"publish","type":"post","link":"https:\/\/davelevy.info\/wiki\/flickr-slide-shows\/","title":{"rendered":"Flickr Slide Shows"},"content":{"rendered":"\n<p>This page documents my use of widgets, HTML and plugins to display flickr slide shows on my blogs. As at August 2021, I am using wordpress plugins see below\/overleaf or on the blog wordpress now support flickr URLs with a native embed.&nbsp;<strong><em> I just have to paste the URL<\/em><\/strong>. Here are my notes, developed over time. &#8230;<br><\/p>\n\n\n\n<!--more-->\n\n\n\n<p>This page documents three mechanisms to display flick on wordpress. I was experimenting with making photo shows from my flickr archive for my wordpress blogs.&nbsp; I originally used <a href=\"http:\/\/www.flickrslideshow.com\">flickrslideshow.com<\/a> and then looked at&nbsp;<a href=\"https:\/\/flickrembed.com\">https:\/\/flickrembed.com<\/a> as the flickrslideshow was failing strangely. In June 2020, I decided I need to explore the plugin route. This was complicated by the deprecation of flash, and flickr changing ownership. The embed site was broken and so I installed &#8220;<a href=\"https:\/\/wordpress.org\/plugins\/mobile-friendly-flickr-slideshow\/\">Responsive flickr slide show&#8221; plugin<\/a> &#x1f601;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Using the plugin (today)<\/h3>\n\n\n<div style=\"max-width: 640px; height: 400px\" class=\"fshow-wrapper\">\n<iframe src=\"https:\/\/davelevy.info\/wiki\/fshow_orbit_5ff6ee733d967?photosetid=72157707234660174&user_id=38126735%40N00&username=photomatt&gallery_url=https%3A%2F%2Fwww.flickr.com%2Fphotos%2Fphotomatt%2Fsets%2F72157707234660174%2F\" style=\"width: 100%; height: 400px\" allowfullscreen=\"true\" webkitallowfullscreen=\"true\" mozallowfullscreen=\"true\" border=\"0\">\n<\/iframe>\n<noscript>\n<a href=\"https:\/\/flic.kr\/s\/aHsmBrShnd\" target=\"_blank\">Click to View<\/a><\/noscript>\n<\/div>\n\n\n\n\n<p>For the wiki, there is a short code, &#8216;fshow&#8217; it takes an argument, <code>photosetid=<\/code> which requires the numeric key alone, i.e, <code>nnnnnnnnnn<\/code> of the set alone.<\/p>\n\n\n\n<p>This i.e the plugin has been installed on the wiki and blog; on the blog just paste the set URL into a block. WordPress takes care of the rest; on the wiki, use the short code rune with the <code>photosetid=<\/code> argument.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/c.tenor.com\/5xdSud9g-eUAAAAM\/friends-rachel.gif\" alt=\"\"\/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Using embed now deprecated<\/h3>\n\n\n\n<p>Here it is, from https:\/\/flickrembed.com\/ &#8230;.<\/p>\n\n\n\n<div>\n<iframe style=\"position: relative; top: 0; left: 0;\"\nwidth=\"600\" height=\"425\"   src=\"https:\/\/flickrembed.com\/cms_embed.php?source=flickr&#038;layout=responsive&#038;input=www.flickr.com\/photos\/davelevy&#038;sort=0&#038;by=user&#038;theme=default&#038;scale=fill&#038;speed=10000&#038;limit=20&#038;skin=default&#038;autoplay=true\" scrolling=\"no\" frameborder=\"1\" allowFullScreen=\"true\" webkitallowfullscreen=\"true\" mozallowfullscreen=\"true\"><p><a rel=\"nofollow\" href=\"https:\/\/www.comparetyres.com\/\">CompareTyres<\/a><\/p><small>Powered by <a href=\"https:\/\/flickrembed.com\">flickr embed<\/a>.<\/small><\/iframe><script type=\"text\/javascript\">function showpics(){var a=$(\"#box\").val();$.getJSON(\"http:\/\/api.flickr.com\/services\/feeds\/photos_public.gne?tags=\"+a+\"&tagmode=any&format=json&jsoncallback=?\",function(a){$(\"#images\").hide().html(a).fadeIn(\"fast\"),$.each(a.items,function(a,e){$(\"<img\/>\").attr(\"src\",e.media.m).appendTo(\"#images\")})})}<\/script>\n<\/div>\n\n\n\n<p>The code generated needs some small tweaks. It generates the following style comment,<\/p>\n\n\n\n<p>&lt;iframe style=&#8221;position: relative; top: 0; left: 0; width: 100%; height: 100%&#8221;&nbsp; src=&#8221;&#8230;<\/p>\n\n\n\n<p>It needs<\/p>\n\n\n\n<p>&lt;iframe style=&#8221;position: relative; top: 0; left: 0;&#8221;<br>width=&#8221;600&#8243; height=&#8221;500&#8243; src=&#8221;&#8230;.<\/p>\n\n\n\n<p>This still ain&#8217;t quite right, I need to get the height right or auto&#8217;d. The generated code works in a naked HTML file, so it&#8217;s something to do with outer level CSS statements. (I think.) NB the template has changed since writing this.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Using slide show now deprecated<\/h3>\n\n\n\n<p>The flickr slide show, once working code is still held in&nbsp;<code>CODE1<\/code> custom field, perhaps I need <a href=\"https:\/\/support.mozilla.org\/en-US\/kb\/install-flash-plugin-view-videos-animations-games\">to install flash<\/a> now that I am using Firefox, on the other hand, Flickr have deprecated this solution.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">More about plugins<\/h3>\n\n\n\n<p>When considering plugins, I found <a href=\"https:\/\/www.youtube.com\/watch?v=gsQerbdc4BA\">this video<\/a> on youtube. There are more.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This page documents my use of widgets, HTML and plugins to display flickr slide shows on my blogs. As at August 2021, I am using wordpress plugins see below\/overleaf or on the blog wordpress now support flickr URLs with a native embed.&nbsp; I just have to paste the URL. Here are my notes, developed over&#8230;<\/p>\n","protected":false},"author":1,"featured_media":6582,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":"","_share_on_mastodon":"0"},"categories":[3],"tags":[204,66,1471,102,911,28],"class_list":["post-3961","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-technology","tag-flickr","tag-plugin","tag-slide-show","tag-slides","tag-technology","tag-wordpress"],"share_on_mastodon":{"url":"","error":""},"jetpack_featured_media_url":"https:\/\/davelevy.info\/wiki\/wp-content\/uploads\/2018\/10\/rapefield-dfl-cc-2016-by-sa-cropped.png","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/davelevy.info\/wiki\/wp-json\/wp\/v2\/posts\/3961","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/davelevy.info\/wiki\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/davelevy.info\/wiki\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/davelevy.info\/wiki\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/davelevy.info\/wiki\/wp-json\/wp\/v2\/comments?post=3961"}],"version-history":[{"count":2,"href":"https:\/\/davelevy.info\/wiki\/wp-json\/wp\/v2\/posts\/3961\/revisions"}],"predecessor-version":[{"id":13128,"href":"https:\/\/davelevy.info\/wiki\/wp-json\/wp\/v2\/posts\/3961\/revisions\/13128"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/davelevy.info\/wiki\/wp-json\/wp\/v2\/media\/6582"}],"wp:attachment":[{"href":"https:\/\/davelevy.info\/wiki\/wp-json\/wp\/v2\/media?parent=3961"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/davelevy.info\/wiki\/wp-json\/wp\/v2\/categories?post=3961"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/davelevy.info\/wiki\/wp-json\/wp\/v2\/tags?post=3961"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}