Site icon Gioxx.org

Click: la mia galleria d’immagini basata su Photo Stream

Gioxx

Click è un esperimento, un piccolo deposito immagini che sfrutta lo spazio messo a disposizione da GitHub, un software scritto da Tim Van Damme e il servizio erogato da Netlify in maniera gratuita che ti permette di portare in vita una galleria immagini molto leggera, molto immediata, senza nessun tipo di “dettaglio“, solo i tuoi scatti, un feed RSS aggiornato e la possibilità di arrivare a una fotografia in particolare grazie a un URL diretto. So benissimo di avere il mio Photoblog (Gioxx’s Photowall: quell’esperimento partito forse nell’anno sbagliato) ma adoro sperimentare e scoprire sempre qualcosa di nuovo, qualcosa di ospitato su GitHub è davvero molto interessante.

Photo by Priscilla Du Preez on Unsplash

Photo Stream

Photo stream is a simpler home for your photos by @maxvoltar and friends. Easy to use, self hosted, no tracking, just photos.

Si tratta di un repository GitHub che puoi facilmente clonare e preparare per portare online i tuoi scatti e i tuoi riferimenti, è una bell’idea e l’effort che serve per metterla in piedi e renderla operativa è davvero molto basso. Parte tutto dalla clonazione del lavoro fatto da @maxvoltar che trovi all’indirizzo github.com/maxvoltar/photo-stream. Una volta eseguita l’operazione ti basterà entrare nella cartella photos/original e cancellarne completamente il contenuto. Copia in questa cartella le fotografie che vuoi esporre sul Web, nel frattempo spostiamoci sulla configurazione del software. Nella cartella principale troverai il file _config.yml nel quale modificare:

I collegamenti al tuo profilo GitHub e Instagram sono nascosti da configurazione predefinita di Photo Stream. Modifica il file index.html e togli i commenti applicati alle righe dei due profili. Puoi anche aggiungere altri profili a tuo piacimento semplicemente aggiungendo un punto dell’elenco alla lista <ul class="links"> (con un nuovo <li> con class="link"). Dovresti poter ottenere un file index.html molto simile (se hai tolto i commenti):

<!doctype html>
<html>
{% include head.html %}
<body>
    {% assign target = "target" %}
    <ul class="grid" id="{{ target }}">
        {% assign images = page.images | default: site.static_files | photo_filter %}
        {% include photos.html %}
        </ul>
        <ul class="links">
            <!-- You can add links (to your social media profiles for example) below -->
            <li class="rss"><a rel="alternate" type="application/rss+xml" href="{{ site.url }}feed.xml" title="RSS Feed">RSS Feed</a></li>
            <li class="github"><a rel="me" href="https://github.com/maxvoltar/photo-stream" title="Fork on Github">Github</a></li>
            <li class="link"><a rel="me" href="https://twitter.com/{{ site.twitter_username }}" title="@{{ site.twitter_username }} on Twitter">Twitter</a></li>
            <li class="link"><a rel="me" href="https://github.com/{{ site.github_username }}" title="@{{ site.github_username }} on Github">Github</a></li>
            <li class="link"><a rel="me" href="https://instagram.com/{{ site.instagram_username }}" title="@{{ site.instagram_username }} on Instagram">Instagram</a></li>
        </ul>
        {% include javascript.html %}
        {% if page.image_slug %}
            <script src="{{ '/js/photos.js' | relative_url }}" data-photo-id="{{ page.image_slug }}" data-photo-url="{{ page.image_slug | relative_url }}" data-target-id="{{ target }}"></script>
        {% endif %}
</body>
</html>

Sei ormai pronto per andare online. Fai push delle tue modifiche su GitHub in modo da avere il tuo repository completamente aggiornato e già pronto per la seconda fase. Nel frattempo collegati a Netlify e accedi con l’account di GitHub per tua comodità.

Configurare Netlify

Crea la tua prima applicazione su Netlify e chiedigli di collegarsi ai tuoi repository su GitHub, dai gli accessi necessari e poi seleziona – ovviamente – il repository che hai preparato con il tuo Photo Stream. Lascia tutto invariato ma compila nelle opzioni di Build & deploy i campi relativi al Build command e alla Publish directory rispettivamente con jekyll build e _site/, ottenendo quindi un risultato molto simile a questo:

Lascia che Netlify si occupi di compilare automaticamente una nuova build ogni volta che effettuerai delle modifiche rilasciandole su GitHub, così che tu non debba più preoccuparti di nulla e che il tuo Photo Stream sia sempre aggiornato alla versione più recente (Continuous Deployment, nda).

L’account Netlify è gratuito e di base propone una serie di interessanti caratteristiche per chi vuole sperimentare un po’ (ci sono poi piani a pagamento ben più ricchi per chi necessita più gas):

Al termine dell’operazione di build su Netlify potrai accedere alla tua galleria visitando l’URL che ti viene fornito dal servizio. Se vuoi utilizzare un tuo dominio personalizzato (ammesso tu abbia un tuo dominio di primo livello e accesso al tuo pannello DNS) consulta il documento ufficiale all’indirizzo docs.netlify.com/domains-https/custom-domains/configure-external-dns/#configure-a-subdomain.

Il mio risultato è visibile – come forse avrai capito – all’indirizzo click.gioxx.org.

In conclusione

Molto interessante sì, vai a perdere però tutto quello che riguarda i commenti, le visualizzazioni (a meno di abilitare le Analytics di Netlify, a pagamento), la storia che c’è dietro (a meno di proporre le foto in questa maniera e parlarne in un articolo del blog, proponendole al suo interno) ma ehi, non è sempre di vitale importanza. Si tratta come detto di un esperimento, è carino, mi è piaciuto e manterrò quel dominio vivo e con qualche fotografia aggiunta di tanto in tanto.

Fammi sapere se pubblicherai il tuo Photo Stream e a quale indirizzo trovarlo! ?

#StaySafe

Correzioni, suggerimenti? Lascia un commento nell'apposita area qui di seguito o contattami privatamente.
Ti è piaciuto l'articolo? Offrimi un caffè! ☕ :-)

L'articolo potrebbe non essere aggiornato

Questo post è stato scritto più di 5 mesi fa, potrebbe non essere aggiornato. Per qualsiasi dubbio ti invito a lasciare un commento per chiedere ulteriori informazioni! :-)

Condividi l'articolo con i tuoi contatti:
Exit mobile version