modulo per gestione gallerie di immagini #10

Closed
opened 2024-06-19 11:05:27 +00:00 by omarl · 16 comments
Member

Ho caricato le foto e fatto una prova. Servirebbe un modulo per gestire le immagini. Per il momento ho usato html per fare le miniature ma credo che in termini di caricamento non sia il massimo come soluzione.

Originally posted by @omarl in #1 (comment)

Ho caricato le foto e fatto una prova. Servirebbe un modulo per gestire le immagini. Per il momento ho usato html per fare le miniature ma credo che in termini di caricamento non sia il massimo come soluzione. _Originally posted by @omarl in https://git.libreschool.org/BgLUG/bglug.it/pulls/1#issuecomment-289_
omarl added the
enhancement
label 2024-06-19 11:07:00 +00:00
Owner
promemoria: https://discourse.gohugo.io/t/image-gallery-with-markdown-syntaxe-into-shortcode/41539
Owner

secondo me, per questa cosa bisogna prima aspettare di avere un tema.

e poi riguarda solo le foto degli eventi (linuxday tipicamente)
anche se lo facciamo con calma, non c'è problema

secondo me, per questa cosa bisogna prima aspettare di avere un tema. e poi riguarda solo le foto degli eventi (linuxday tipicamente) anche se lo facciamo con calma, non c'è problema
paspo added this to the eventually milestone 2024-06-26 10:25:44 +00:00
paspo added a new dependency 2024-07-10 21:00:04 +00:00
omarl added this to the Nuovo sito: CODICE HUGO project 2024-07-14 09:20:19 +00:00
Owner

update:
integrare un tema aggiuntivo (dedicato alla visualizzazione di un album) dentro un tema esistente è impegnativo³.
bisogna mettere d'accordo css, javascript, pezzi di html....
lo terrei come "progetto per il futuro". O meglio, aggiungerei un layout al tema attuale, e farei "a mano" l'integrazione con photoswipe.

ora provo qualche gallery "separata", in modo da accelerare la cosa

update: integrare un tema aggiuntivo (dedicato alla visualizzazione di un album) dentro un tema esistente è impegnativo³. bisogna mettere d'accordo css, javascript, pezzi di html.... lo terrei come "progetto per il futuro". O meglio, aggiungerei un layout al tema attuale, e farei "a mano" l'integrazione con [photoswipe](https://photoswipe.com/). ora provo qualche gallery "separata", in modo da accelerare la cosa
Owner
software last release commit <1mese ambiente authentik esito omarl
piwigo 17 aprile 2024 si mysql + php plugin openid connect buono bello ma oltre lo scope
lychee 26 giugno 2024 si mysql/sqlite + php tramite nextcloud bello utile per organizzare, ma oltre lo scope
photoprism 31 maggio 2024 si go boh fuori target AI powered, eccessivo
photocrate / photobox - - - - forse fuori target e comunque lo stanno riscrivendo e quindi troppo giovine non cataloga, se non con la stellina
librephotos 2019 !! si python + mysql/postgres ?? boh, mi sembra datato bello ma non per un album web
mediagoblin 18 ottobre 2023 si ?? ?? progetto storico, farebbe anche video, forse non serve db gui discutibile
fgallery 31 dicembre 2022 no forse solo javascript?? nope forse il dev è italiano, ma sembra progetto morto troppo limitato
Photoview 23 giugno 2024 si typescript+go ? devo ancora provarlo, buon candidato bello ma per uso condiviso, oltre lo scope, non per album web
zenphoto 18 giugno 2024 si mysql + php ? devo ancora provarlo troppo tabelloso poco wow
home-gallery 30 giugno 2024 si no db ? devo ancora provarlo BELLO E ANCHE PRATICO GESTISCE ANCHE BREVI VIDEO
Lutim ? ? ? ? devo ancora provarlo no demo?
Photoswipe maggio 2024 no hmtl-css no need devo ancora provarlo BELLO E PRATICO se non si deve litigare con CSS
| software | last release | commit <1mese | ambiente | authentik | esito | omarl | | --- | --- | --- | --- | --- | --- | --- | | [piwigo](https://piwigo.org) | 17 aprile 2024 | si | mysql + php | plugin openid connect | buono |bello ma oltre lo scope | | [lychee](https://lychee.electerious.com/) | 26 giugno 2024 | si | mysql/sqlite + php | tramite nextcloud | bello |utile per organizzare, ma oltre lo scope | | [photoprism](https://www.photoprism.app/) | 31 maggio 2024 | si | go | boh | fuori target |AI powered, eccessivo | | [photocrate / photobox](https://www.photocrate.dev/) | - | - | - | - | forse fuori target e comunque lo stanno riscrivendo e quindi troppo giovine |non cataloga, se non con la stellina | | [librephotos](https://github.com/LibrePhotos/librephotos) | 2019 !! | si | python + mysql/postgres | ?? | boh, mi sembra datato | bello ma non per un album web | | [mediagoblin](https://mediagoblin.org/) | 18 ottobre 2023 | si | ?? | ?? | progetto storico, farebbe anche video, forse non serve db | gui discutibile | | [fgallery](https://gitlab.com/wavexx/fgallery) | 31 dicembre 2022 | no | forse solo javascript?? | nope | forse il dev è italiano, ma sembra progetto morto |troppo limitato | | [Photoview](https://photoview.github.io/) | 23 giugno 2024 | si | typescript+go | ? | devo ancora provarlo, buon candidato |bello ma per uso condiviso, oltre lo scope, non per album web| | [zenphoto](https://www.zenphoto.org/) | 18 giugno 2024 | si | mysql + php | ? | devo ancora provarlo |troppo tabelloso poco wow| | [home-gallery](https://home-gallery.org/) | 30 giugno 2024 | si | no db | ? | devo ancora provarlo |BELLO E ANCHE PRATICO GESTISCE ANCHE BREVI VIDEO| | [Lutim](https://framagit.org/fiat-tux/hat-softwares/lutim) | ? | ? | ? | ? | devo ancora provarlo |no demo? | | [Photoswipe](https://photoswipe.com/) | maggio 2024 | no | hmtl-css | no need | devo ancora provarlo |BELLO E PRATICO se non si deve litigare con CSS |
Author
Member

Ma posso modificare il tuo messaggio?
Aggiunta colonna...

Ma posso modificare il tuo messaggio? Aggiunta colonna...
Owner

riassumendo:

  • testata soluzione doppio template: NO-GO (sbattimento altissimo)
  • soluzione 2 istanze hugo: resta una strada percorribile (sbattimento mediobasso)
  • soluzione aggiunta gallery al template attuale: non è veloce, ma probabilmente è la soluzione preferibile in futuro (sbattimento medioalto)
  • altri progetti separati: vedi tabella sopra (sbattimento mediobasso)

Il progetto hugo separato ha come svantaggio che ci obbliga a gestire le immagini con GIT, che non è perfetto, ma è ottimizzabile.
La soluzione con un prodotto separato ci dà più funzionalità, ma torniamo nell'ambito dei siti php (o con codice in generale)...

verificare se si può fare qualcosa con nextcloud

riassumendo: - [x] testata soluzione doppio template: NO-GO (sbattimento altissimo) - [ ] soluzione 2 istanze hugo: resta una strada percorribile (sbattimento mediobasso) - [ ] soluzione aggiunta gallery al template attuale: non è veloce, ma probabilmente è la soluzione preferibile in futuro (sbattimento medioalto) - [ ] altri progetti separati: vedi tabella sopra (sbattimento mediobasso) Il progetto hugo separato ha come svantaggio che ci obbliga a gestire le immagini con GIT, che non è perfetto, ma è ottimizzabile. La soluzione con un prodotto separato ci dà più funzionalità, ma torniamo nell'ambito dei siti php (o con codice in generale)... verificare se si può fare qualcosa con nextcloud
Author
Member

Home-gallery non permette di creare album ma è molto semplice fare filtri per anno mese o nome della cartella, si possono aggiungere anche tags ma uno alla volta mi sa.

Personalmente mi immaginavo di più una all'interno della pagina in stile photoswipe ma un archivio come home-gallery è molto comodo per cercare foto, grafiche, etc... al volo. Basta ricordarsi una data o il nome della cartella che le contiene. Davvero utile come strumento.

Ma questo si può fare?
https://hugocodex.org/add-ons/image-gallery/

Home-gallery non permette di creare album ma è molto semplice fare filtri per anno mese o nome della cartella, si possono aggiungere anche tags ma uno alla volta mi sa. Personalmente mi immaginavo di più una <gallery> all'interno della pagina in stile photoswipe ma un archivio come home-gallery è molto comodo per cercare foto, grafiche, etc... al volo. Basta ricordarsi una data o il nome della cartella che le contiene. Davvero utile come strumento. Ma questo si può fare? https://hugocodex.org/add-ons/image-gallery/
Owner

Ma questo si può fare?
https://hugocodex.org/add-ons/image-gallery/

bello.
stasera lo provo

> Ma questo si può fare? > https://hugocodex.org/add-ons/image-gallery/ > bello. stasera lo provo
Author
Member

E i moduli Hugo a cosa servono? Sono meglio di mescolare due temi?
https://github.com/rootwork/hugo-module-gallery-grid

E i moduli Hugo a cosa servono? Sono meglio di mescolare due temi? https://github.com/rootwork/hugo-module-gallery-grid
Author
Member

Questo funziona ma fa solo una griglia di miniature che cliccando si ingrandiscono.
https://www.control-alt-del.org/posts/building-an-image-gallery-for-hugo/

Questo funziona ma fa solo una griglia di miniature che cliccando si ingrandiscono. https://www.control-alt-del.org/posts/building-an-image-gallery-for-hugo/
Author
Member

Questo è l'evoluzione del precedente ma più aggressivo
https://www.ojisanseiuchi.com/2020/01/11/a-folder-based-image-gallery-for-hugo/

Questo è l'evoluzione del precedente ma più aggressivo https://www.ojisanseiuchi.com/2020/01/11/a-folder-based-image-gallery-for-hugo/
Author
Member

Utilizzano Fancybox come anche spiegato qui, è sempre lo stesso codice più o meno.
https://dev.to/sarmis/building-a-folder-based-gallery-for-hugo-4i8c

Utilizzano Fancybox come anche spiegato qui, è sempre lo stesso codice più o meno. https://dev.to/sarmis/building-a-folder-based-gallery-for-hugo-4i8c
Author
Member

Senza toccare il partials/head/custom.html, ho creato il file shortcodes/foldergallery.html e inserito in un post

{{< foldergallery src="foto" >}}

La cartella foto si trova in static/img

<!-- /layouts/shortcodes/foldergallery.html -->
<style>
    div.gallery {
        display: flex;
        flex-wrap: wrap;
    }
    
    div.gallery a {
        flex-grow: 1;
        object-fit: cover;
        margin: 2px;
        display: flex;
    }
    
    div.gallery a img {
        height: 200px;
        object-fit: cover;
        flex-grow: 1;
    }
</style>

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.4.0/jquery.fancybox.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.4.0/jquery.fancybox.min.css" />

<div class="gallery">
    {{ $path := print "static/img/" (.Get "src")  }}
    {{ $url  := print (.Get "src") }}
    {{ range (readDir $path)  }}
        {{/* don't try to display .DS_Store or directories */}}
        {{ if and (ne .Name ".DS_Store") (not .IsDir)  }}
            {{ $src := print "/img" "/" $url "/" .Name }}
            {{/*
                troubleshoot the $src variable as needed
                <!-- <p>{{ $src }}</p> -->
                */}}
            <a data-fancybox="gallery" href="{{ $src }}">
                <img src="{{ $src }}">  <br/>
            </a>
        {{ end }}
    {{ end }}
</div>
Senza toccare il `partials/head/custom.html`, ho creato il file `shortcodes/foldergallery.html` e inserito in un post `{{< foldergallery src="foto" >}}` La cartella `foto` si trova in `static/img` ``` <!-- /layouts/shortcodes/foldergallery.html --> <style> div.gallery { display: flex; flex-wrap: wrap; } div.gallery a { flex-grow: 1; object-fit: cover; margin: 2px; display: flex; } div.gallery a img { height: 200px; object-fit: cover; flex-grow: 1; } </style> <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.4.0/jquery.fancybox.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.4.0/jquery.fancybox.min.css" /> <div class="gallery"> {{ $path := print "static/img/" (.Get "src") }} {{ $url := print (.Get "src") }} {{ range (readDir $path) }} {{/* don't try to display .DS_Store or directories */}} {{ if and (ne .Name ".DS_Store") (not .IsDir) }} {{ $src := print "/img" "/" $url "/" .Name }} {{/* troubleshoot the $src variable as needed <!-- <p>{{ $src }}</p> --> */}} <a data-fancybox="gallery" href="{{ $src }}"> <img src="{{ $src }}"> <br/> </a> {{ end }} {{ end }} </div> ```
Author
Member

Se si nominano i file decentemente si possono fare caption minimali:

            <a data-fancybox="gallery" data-caption="{{ .Name }}" href="{{ $src }}">
                <img src="{{ $src }}">  <br/>
            </a>
Se si nominano i file decentemente si possono fare caption minimali: ``` <a data-fancybox="gallery" data-caption="{{ .Name }}" href="{{ $src }}"> <img src="{{ $src }}"> <br/> </a> ```
paspo closed this issue 2024-07-17 21:37:19 +00:00
paspo referenced this issue from a commit 2024-07-17 21:37:20 +00:00
Owner

ops...

ops...
paspo reopened this issue 2024-07-17 21:41:00 +00:00
Owner

questa roba la dichiaro finita.
al max la facciamo risorgere, tipo con #144.

questa roba la dichiaro finita. al max la facciamo risorgere, tipo con #144.
paspo closed this issue 2024-07-22 20:27:45 +00:00
Sign in to join this conversation.
No description provided.