Log inRegister

Flickr & Google Photos - embed code

30 April 2019 - 22:48 | Version 13 | %DBQUERY{ "total_likes>0" topic="Boossy.0-00-CloudPhotosEmbedCode" format="| $percntTRANSLATE{\"[quant,_1,like,likes]\" args=\"$expand(total_likes)\"}$percnt" }%
.nGY2 {
 -webkit-box-sizing: content-box;
 overflow: auto !important;
}

  Flickrit sEmbedder
flickrEmbed
nanogallery2 publicalbum.org ccPanGallery²
Flickr tick tick tick   cross
Google Photos     tick tick cross
Instagram tick tick     cross
HTML5          
thumbnail carousel tick tick all albums / one album (but then without main photo) cross tick
responsive 100% tick all albums: cross (aspect ratio varies) → tick³
one album: no (aspect ratio varies)
one photo: yes
tick tick (100%)
fullscreen toggle cross tick
(even when embedded in FW)
(in D7???)
tick tick
(also when embedded in D7
or FW)
tick
(in FW, also in D7???)
web friendly (compressed files) tick
3 MB → 188 KB
tick
2,3 MB → 389 KB
crosstick
use "viewerZoom": false
29 MB → 208 KB
tick
33 MB → 177 KB
tick
32 MB → 222 KB
transparent background tick     tick  
embeddable in foswiki 0-14-CPGallery-Flickrit 0-17-CPGallery-SEmbedder=FlickrEmbed 0-17-CPGallery-Nanogallery2 0-19-CPGallery-PublicAlbum 0-17-CPGallery-CcPanGallery
embeddable in Drupal7 tick   tick tick
(via lokale htm)
???
embeddable in Drupal7
using Iframe module
    tick tick ???
load speed          
VERDICT voorbijgestreefd door sEmbedder/flickrEmbed thumbnails & fullscreen,
maar geen Google Photos
ondersteuning van Google Photos,
leuke switch van alle albums naar één album naar één foto, maar geen thumbnails
ondersteuning van Google Photos,
fullscreen mogelijk in Drupal,
maar geen thumbnails
sowieso voor fotoreeksen met audio!!! Ook thumbnails,
maar geen ondersteuning voor Google Photos
of Flickr,
dus veel handmatig werk!
² JQuery Multimedia Gallery Slideshow With Touch Pan by Tean

³ code om rechtstreeks in Drupal in te voeren:
<link href="https://unpkg.com/nanogallery2@2.4.1/dist/css/nanogallery2.min.css" rel="stylesheet" type="text/css">
<script src="https://unpkg.com/nanogallery2@2.4.1/dist/jquery.nanogallery2.min.js" type="text/javascript"></script>
<div id="nanogallery2" data-nanogallery2='{"kind": "google2", "userID": "114504503630087593498", "google2URL": "//<url>/nanogp2/nanogp2.php", "thumbnailHeight": 320, "thumbnailWidth": "auto", "viewerZoom": false}'></div>

of zelfs nog verfijnder:

<link href="https://unpkg.com/nanogallery2@2.4.1/dist/css/nanogallery2.min.css" rel="stylesheet" type="text/css">
<script src="https://unpkg.com/nanogallery2@2.4.1/dist/jquery.nanogallery2.min.js" type="text/javascript"></script>
<div id="nanogallery2" data-nanogallery2='{"kind": "google2", "userID": "114504503630087593498", "google2URL": "http://boossy.be/nanogp2/nanogp2.php", "thumbnailHeight": 320, "thumbnailWidth": "auto", "thumbnailBorderVertical": 0, "thumbnailBorderHorizontal": 0, "slideshowDelay": 7000, "thumbnailHoverEffect2": "toolsSlideUp|imageScale150", "thumbnailAlignment": "center", "viewerZoom": false}'></div>

Flickrit v1 does not offer the possibility to go full screen - don't use it anymore!

Embeddability

tool embeddable? as iframe? as iframe in Drupal?²
Flickrit
sEmbedder
flickrEmbed
tick tick tick
nanogallery2 help help tick
publicalbum.org tick help tick
ccPanGallery2 tick help tick
² but no possibility to watch full screen

a) flickrEmbed settings

THEME Default No TextPanel
SKIN Default - Transparent
SCALE MODE Fill
LAYOUT RESPONSIVE
IMAGE SOURCE FLICKR
SORTING CRITERIA  

b) nanogallery2 settings

live usage

  • nanogp2-directory:
    • nanogp2/admin/config.php: hier moeten jouw eigen client_id & client_secret komen te staan
  • in een html-bestand…
    • verwijs je dan naar css & js van nanogallery
    • de url van jouw nanogp2.php
    • bepaal je thumbnailHeight & Width
    • zet je de viewerZoom af (om geen images in 100% filesize te downloaden)
    • voeg je eventueel nog andere parameters toe

in drupal

  • zie hierboven onder de vergelijkende tabel
c) publicalbum.org settings

d) ccPanGallery settings

Haalt dus niet vanzelf de afbeeldingen van een album op.

Ik haal eerst de id's op via Photo Gallery (zie verder onder Google Photos > Photo Gallery)

Dan haal ik er wat trucen mee uit in Excel (GooglePhotoGallery2ccPanGallery.xlsx), zodat ik bruikbare tags heb om te gebruiken in ccPanGallery.

Responsive iframes

Drupal iframe

  • Iframe module
  • blijkt goed te werken voor alle bovenstaande gallery's (flickrEmbed, nanogallery2, publicalbum, ccPanGallery)

Flickr

Google Photos

Naast publicalbum.org kun je ook Photo Gallery gebruiken, een add-on voor Google Spreadsheets.

Het vereist wel dat je 3rd party cookies toestaat voor [*.]googleusercontent.com

Rearrange album order

see: https://support.google.com/photos/thread/470656?hl=en

You can change the order of albums by changing dates:
  • To change the "Date taken" of a photo at Google Photos
    • Open a photo
    • Click the "i" (Info) icon at the top-right
    • In the Info panel, click the pencil (edit) icon
    • In the "Edit date & time" window, click into the fields to change the year, month, day, time; and time zone drop-down arrow
    • Click Save
  • To "batch edit" date and time
    • Selecting multiple photos
    • Click 3 vertical dots ("More options")
    • Click "Edit date & time"
    • Click either option "Shift dates & times" or "See one date & time" and make your changes.

Photo editing online

TinyPNG

  • https://tinypng.com/
  • Bijzonder krachtige compressor voor png & jpg met behoud van kwaliteit!!!
  • max. 20 afbeeldingen van elk max. 5 MB per keer

Bulk Resize Photos

  • https://bulkresizephotos.com/
  • om een heleboel foto's dezelfde hoogte/breedte te geven
  • bovendien heel snel omdat het eigenlijk lokaal op je eigen pc wordt uitgevoerd (clever!)
This site is powered by FoswikiCopyright © by the contributing authors. All material on this collaboration platform is the property of the contributing authors.
Ideas, requests, problems regarding Foswiki? Send feedback
This website is using cookies. More info. That's Fine