Flickr & Google Photos - embed code

.nGY2 {
 -webkit-box-sizing: content-box;
 overflow: auto !important;
}

	Flickrit	sEmbedder flickrEmbed	nanogallery2	publicalbum.org	ccPanGallery²
Flickr
Google Photos
Instagram
HTML5
thumbnail carousel			all albums / one album (but then without main photo)
responsive	100%		all albums: (aspect ratio varies) → ³ one album: no (aspect ratio varies) one photo: yes		(100%)
fullscreen toggle		(even when embedded in FW) (in D7???)		(also when embedded in D7 or FW)	(in FW, also in D7???)
web friendly (compressed files)	3 MB → 188 KB	2,3 MB → 389 KB	→ use "viewerZoom": false 29 MB → 208 KB	33 MB → 177 KB	32 MB → 222 KB
transparent background
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				(via lokale htm)	???
embeddable in Drupal7 using Iframe module					???
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: zie 0-17-CPGallery-Nanogallery2

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
nanogallery2
publicalbum.org
ccPanGallery2

² 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

links

• demonstrations: https://codepen.io/JonMerlevede/pen/VMBwaJ
• portable builder: https://nano.gallery/builder2.html
• full documentation (getting started, concepts, reference guide): https://nanogallery2.nanostudio.org/documentation.html
  
• features, installation, usage: https://www.jqueryscript.net/gallery/Full-Featured-Photo-Gallery-Plugin-jQuery-nanoGallery-2.html
• codepen example: https://codepen.io/JonMerlevede/pen/VMBwaJ
• Google Photos provider for nanogallery2: https://github.com/nanostudio-org/nanogp2 / https://nanogallery2.nanostudio.org/
  • installatie: https://github.com/nanostudio-org/nanogp2#arrow_forward-installation
  • configuratie, incl. albums uitsluiten van weergave: https://github.com/nanostudio-org/nanogp2#arrow_forward-configuration:
    $albums_filter = ['sauvegarde', 'backup'];
• ChangeLog: https://ihavoutis.github.io/nano/changelog/
• live example: http://prod.chasse-autreches.xyz/16-02-28-VUES.htm
• flickr example: https://codepen.io/Kris-B/pen/gKwdLP.html

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

• https://www.publicalbum.org/blog/embedding-google-photos-albums

d) ccPanGallery settings

Haalt dus niet vanzelf de afbeeldingen van een album op.

Photo Gallery

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

• Theory: https://www.dyn-web.com/tutorials/iframes/height/
• In practice: http://boossy.be/iframes-height/fluid/index.html

Drupal iframe

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

Flickr

• The App Garden: API Documentation
• e.g. flickr.photo.search

Google Photos

Photo Gallery

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.

Lightbox jQuery plugins

• https://www.codexcoder.com/best-lightbox-based-free-plugins-for-front-end-development/
• http://www.stripjs.com/
• https://cornel.bopp-art.com/lightcase/#demo

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!)

Birme

• https://www.birme.net/?target_width=250&target_height=150
• om een heleboel foto's te croppen tot dezelfde ratio (hoogte/breedte) voor bv. unitegallery thumbnails