Creació d'un Carrusel amb l'extensió "Àlbum"

Aquest document explica el procés de publicació d'un Àlbuml de fotografies guardades a Google Photos en un blog WordPress (XTEC-Blocs o Nodes).

Pas 0: Preparatius

Necessitarem:

• Un compte de Google Photos

• Un compte a XTECBlocs o a Nodes que ens permeti publicar articles. També ens serveix qualsevol altre blog que permeti inserir codi HTML amb scripts, com ara Blogger.

• Per anar fent via obriu el blog, identifiqueu-vos-hi i creeu un article nou. Deixeu-lo en estat d'edició per tal de poder enganxar-hi text més endavant.

  • Un ordinador amb Linux, Windows, Mac o Chromebook que tingui instal·lats els navegadors Chrome, Chromium o Firefox (qualsevol dels tres va bé).

  • La Linkat i els Chromebook el porten per defecte, i en ordinadors Mac i Windows el podeu descarregar gratuïtament des de https://chrome.google.com

  • Tots els passos que s'indiquen a continuació s'han de fer amb aquest navegador.

Pas 1: Instal·lació de l'extensió "Àlbum"

Això només cal fer-ho una vegada:

• Engegueu el navegador web i instal·leu l'extensió "Àlbum" des de:

• - Chrome/Chromium: https://chrome.google.com/webstore/detail/album/obknigmaekkacdkckfeegcfiefdaeked

• - Firefox: https://addons.mozilla.org/firefox/addon/photo-album/

• Us apareixerà una icona a la part dreta de la barra d'adreces. La farem servir més endavant.

Pas 2: Preparació de l'àlbum a Google Photos

• Aneu a Google Photos, identifiqueu-vos amb el vostre usuari XTEC o Gmail i pugeu-hi les imatges que vulgueu que apareguin al carrusel. Les fotos es poden pujar arrossegant-les al navegador web, o des de qualsevol mòbil o tauleta amb l'app per a Android i iOS.

• Creeu un àlbum dins de Google Photos. Primer cal que marqueu amb el botó  les fotos que us interessin. Quan estiguin totes seleccionades feu clic al botó + (afegeix a...) que hi ha a la barra superior i seleccioneu Àlbum:

• Seleccioneu Àlbum nou i poseu-li el nom que considereu adient (o bé seleccioneu un àlbum existent)

• Ara ve un pas molt important: hem de fer públic l'àlbum per tal que les fotografies es puguin veure des de qualsevol lloc. Comenceu per fer clic al botó Més opcions... (tres puntets un sobre l'altre) que hi ha a la part superior dreta de l'àlbum:

• Seleccioneu Opcions per compartir i marqueu Comparteix l'àlbum - Tothom qui tingui l'enllaç pot veure aquest àlbum:

• A les opcions avançades que apareixen tot seguit és aconsellable desmarcar l'opció Col·labora, a no ser que vulgueu que altres persones puguin afegir fotos a l'àlbum.

Pas 3: Selecció de les fotografies que es volen incloure al carrusel

• Situeu-vos dins de l'àlbum que heu creat en el pas anterior (no a la pàgina inicial de Google Photos!) i maximitzeu la finestra del navegador per tal que ocupi tota la pantalla. Com més grans siguin les imatges que es mostren, millor es veuran al carrusel.

• Recarregueu la pàgina prement la tecla F5. Això és important per no trobar-nos després amb imatges repetides.

• Feu clic a la icona de l'extensió "Àlbum" que hem carregat al pas 1 i deixeu una estona per tal que pugui escanejar les imatges del document:

• Ara ve un altre pas important: sense tancar la finestra de l'extensió, poseu el punter del ratolí damunt el document principal i feu girar la rodeta del ratolí cap avall sense fer clic, poc a poc, fins que arribeu al final de la pàgina. Si es tanqués la finestra de l'extensió torneu a fer clic a la seva icona i repetiu el procés. L'objectiu és que l'extensió reconegui totes les imatges que en algun moment hagin format part del document.

• Quan l'extensió hagi reconegut totes les imatges feu clic al botó Atura la detecció d'imatges que hi ha al costat del comptador:

• Un cop fet això, recorreu tota la llista d'imatges detectades marcant les que us interessi que surtin al carrusel i desmarcant les que no. Per defecte l'extensió deixa desmarcades les imatges més petites, però el seu criteri no sempre coincidirà amb el vostre.

• Tingueu en compte que Google Photos utilitza algunes imatges de control (avatars, grups d'icones, logotip de l'aplicació, una imatge amb un barret màgic...) que segurament no us interessarà mostrar al carrusel. Desmarqueu-les.

• En cas de dubte, fent clic damunt les miniatures podreu veure la imatge ampliada.

• Feu clic a la rodeta d'opcions  i indiqueu les dimensions que voleu que tingui la galeria de fotos dins del bloc (per defecte farà 600 x 400), si voleu que les imatges enllacin amb la seva pàgina original de Google Photos (us recomanem deixar aquesta opció marcada) i la mida de les imatges (només per a Google Photos):

• • Feu clic a les opcions Llista o Mosaic per obtenir el codi HTML necessari per enganxar al Carrusel.

• • Si trieu l'opció "MOSAIC" quan feu clic a una de les fotografies s'obrirà mostrant les fletxes de navegació per a poder avançar a per la galeria. En cas de triar l'opció "LLISTA" s'obrirà la fotografia però no es podrà navegar entre elles.

  • NOTA: Amb qualsevol de les tres opcions us apareixerà una notificació indicant que les dades del carrusel s'han copiat al porta-retalls:

Pas 4: Enganxeu el codi que heu copiat l'espai Àlbum

Aquí teniu una mostra del codi com quedarà un cop l'enganxeu.

Consideracions finals

Podeu fer servir altres repositoris d'imatges com Flickr, Dropbox, Instagram...

Tingueu en compte que l'únic que fa l'extensió és capturar les adreces (URL) actuals de les fotografies, associar-les als enllaços que puguin tenir i muntar el codi per tal que es mostri l'Àlbum. Per tal que finalment es mostri el resultat al blog cal:

• Que les imatges siguin públiques i es puguin veure des de qualsevol lloc. Reviseu bé els permisos de l'àlbum, ja que si les imatges són privades vosaltres les veureu bé, però no es mostraran a altres persones.

• Que les adreces (URL) de les imatges es mantinguin inalterades en el temps. Si alguna imatge canvia d'URL es deixarà de mostrar al carrusel. Tingueu en compte que no hi ha una sincronització continua entre la font de les imatges (en aquest cas Google Photos) i el vostre blog: només s'ha fet una captura d'unes determinades adreces en un determinat moment, i s'ha enganxat el resultat al blog. Si canvia el contingut de l'àlbum caldrà generar un codi nou que substitueixi l'existent.

L'extensió "Àlbum" no explora les subpàgines incrustades al document principal (conegudes com a "iframes"). Les imatges que hi pugui haver en aquests elements no es detectaran.

L'Àlbum d'imatges es basa en el projecte de programari lliure galleria.io, que ofereix de manera gratuïta un tema visual bàsic. Al seu lloc web es poden comprar temes addicionals amb més funcionalitats, i hi trobareu també molta informació sobre els diversos paràmetres de funcionament.

L'extensió "Àlbum" és també un projecte de programari lliure. Podeu contribuir al seu desenvolupament reportant errades, suggerint millores, aportant codi (en Javascript) o traduccions a altres idiomes. Si us ha resultat útil podeu puntuar-lo amb estrelletes i deixar comentaris al Chrome Store o a Firefox Add-ons per tal que surti més ràpidament a les cerques.