Galleria - Overviewhttp://galleria.artliba.org/2023-03-27T00:00:00+02:00A responsive pelican gallery pluginOverview2023-03-27T00:00:00+02:002023-03-27T00:00:00+02:00Pirogh Hessetag:galleria.artliba.org,2023-03-27:/1a-getting-started.html<p><a class="reference external" href="https://galleria.artliba.org">Galleria</a> is a plugin for <a class="reference external" href="https://getpelican.com">pelican</a>,
a static site generator written in <a class="reference external" href="https://www.python.org/">python</a>.</p>
<p>Observe it first in action here: try to resize the window of our web
browser and observe the flexible rearrangement of the following images.</p>
<ul class="galleria"
>
<li>
<!-- SITEURL = . -->
<!-- image_relative_path = images/tiryns.jpg -->
<!-- image_full_path = /home/hesse/dvt-perso/galleria/doc/content/images/tiryns.jpg -->
<!-- image_replace = ./images/process/picture-tag/default/640w/tiryns.jpg -->
<!-- image_sizes = None -->
<!-- image_srcset = ./images/process/picture-tag/source-1/1x/tiryns.jpg 1x, ./images/process/picture-tag/source-1/2x/tiryns.jpg 2x -->
<!-- image_sources = [{'srcset': './images/process/picture-tag/default/640w/tiryns.jpg 640w, ./images/process/picture-tag/default/1024w/tiryns.jpg 1024w, ./images/process/picture-tag/default/1600w/tiryns.jpg 1600w', 'media': '(min-width: 640px)', 'sizes': '100vw'}, {'srcset': './images/process/picture-tag/source-1/1x/tiryns.jpg 1x, ./images/process/picture-tag/source-1/2x/tiryns.jpg 2x'}] -->
<!-- image_caption = Mycenaean Watercolor, from a fresco in <a class="reference external" href="https://en.wikipedia.org/wiki/Tiryns">Tiryns</a> -->
<!-- image_target = https://en.wikipedia.org/wiki/Tiryns -->
<!-- image_class = picture-tag -->
<!-- image_type = picture -->
<!-- max_height = 350px -->
<!-- options = {'class': 'picture-tag', 'max-height': '350px', 'type': 'picture'} -->
<!-- single_image = -->
<figure>
<a href="https://en.wikipedia.org/wiki/Tiryns">
<picture>
<!-- source = {'srcset': './images/process/picture-tag/default/640w/tiryns.jpg 640w, ./images/process/picture-tag/default/1024w/tiryns.jpg 1024w, ./images/process/picture-tag/default/1600w/tiryns.jpg 1600w', 'media': '(min-width: 640px)', 'sizes': '100vw'} -->
<source
media="(min-width: 640px)"
sizes="100vw"
srcset="./images/process/picture-tag/default/640w/tiryns.jpg 640w, ./images/process/picture-tag/default/1024w/tiryns.jpg 1024w, ./images/process/picture-tag/default/1600w/tiryns.jpg 1600w"
>
<!-- source = {'srcset': './images/process/picture-tag/source-1/1x/tiryns.jpg 1x, ./images/process/picture-tag/source-1/2x/tiryns.jpg 2x'} -->
<source
srcset="./images/process/picture-tag/source-1/1x/tiryns.jpg 1x, ./images/process/picture-tag/source-1/2x/tiryns.jpg 2x"
>
<img
src="./images/process/picture-tag/default/640w/tiryns.jpg"
style="max-width: 100%; height: auto; max-height: min(100vh, 350px);cursor: pointer;"
>
</picture>
</a>
<figcaption>
Mycenaean Watercolor, from a fresco in <a class="reference external" href="https://en.wikipedia.org/wiki/Tiryns">Tiryns</a>
</figcaption>
</figure> </li>
<li>
<!-- SITEURL = . -->
<!-- image_relative_path = images/boxers.jpg -->
<!-- image_full_path = /home/hesse/dvt-perso/galleria/doc/content/images/boxers.jpg -->
<!-- image_replace = ./images/process/picture-tag/default/640w/boxers.jpg -->
<!-- image_sizes = None -->
<!-- image_srcset = ./images/process/picture-tag/source-1/1x/boxers.jpg 1x, ./images/process/picture-tag/source-1/2x/boxers.jpg 2x -->
<!-- image_sources = [{'srcset': './images/process/picture-tag/default/640w/boxers.jpg 640w, ./images/process/picture-tag/default/1024w/boxers.jpg 1024w, ./images/process/picture-tag/default/1600w/boxers.jpg 1600w', 'media': '(min-width: 640px)', 'sizes': '100vw'}, {'srcset': './images/process/picture-tag/source-1/1x/boxers.jpg 1x, ./images/process/picture-tag/source-1/2x/boxers.jpg 2x'}] -->
<!-- image_caption = Watercolor, also a fresco from <a class="reference external" href="https://en.wikipedia.org/wiki/Akrotiri_(prehistoric_city)">Akrotiri</a> -->
<!-- image_target = https://en.wikipedia.org/wiki/Akrotiri_(prehistoric_city) -->
<!-- image_class = picture-tag -->
<!-- image_type = picture -->
<!-- max_height = 350px -->
<!-- options = {'class': 'picture-tag', 'max-height': '350px', 'type': 'picture'} -->
<!-- single_image = -->
<figure>
<a href="https://en.wikipedia.org/wiki/Akrotiri_(prehistoric_city)">
<picture>
<!-- source = {'srcset': './images/process/picture-tag/default/640w/boxers.jpg 640w, ./images/process/picture-tag/default/1024w/boxers.jpg 1024w, ./images/process/picture-tag/default/1600w/boxers.jpg 1600w', 'media': '(min-width: 640px)', 'sizes': '100vw'} -->
<source
media="(min-width: 640px)"
sizes="100vw"
srcset="./images/process/picture-tag/default/640w/boxers.jpg 640w, ./images/process/picture-tag/default/1024w/boxers.jpg 1024w, ./images/process/picture-tag/default/1600w/boxers.jpg 1600w"
>
<!-- source = {'srcset': './images/process/picture-tag/source-1/1x/boxers.jpg 1x, ./images/process/picture-tag/source-1/2x/boxers.jpg 2x'} -->
<source
srcset="./images/process/picture-tag/source-1/1x/boxers.jpg 1x, ./images/process/picture-tag/source-1/2x/boxers.jpg 2x"
>
<img
src="./images/process/picture-tag/default/640w/boxers.jpg"
style="max-width: 100%; height: auto; max-height: min(100vh, 350px);cursor: pointer;"
>
</picture>
</a>
<figcaption>
Watercolor, also a fresco from <a class="reference external" href="https://en.wikipedia.org/wiki/Akrotiri_(prehistoric_city)">Akrotiri</a>
</figcaption>
</figure> </li>
<li>
<!-- SITEURL = . -->
<!-- image_relative_path = images/swallows.jpg -->
<!-- image_full_path = /home/hesse/dvt-perso/galleria/doc/content/images/swallows.jpg -->
<!-- image_replace = ./images/process/picture-tag/default/640w/swallows.jpg -->
<!-- image_sizes = None -->
<!-- image_srcset = ./images/process/picture-tag/source-1/1x/swallows.jpg 1x, ./images/process/picture-tag/source-1/2x/swallows.jpg 2x -->
<!-- image_sources = [{'srcset': './images/process/picture-tag/default/640w/swallows.jpg 640w, ./images/process/picture-tag/default/1024w/swallows.jpg 1024w, ./images/process/picture-tag/default/1600w/swallows.jpg 1600w', 'media': '(min-width: 640px)', 'sizes': '100vw'}, {'srcset': './images/process/picture-tag/source-1/1x/swallows.jpg 1x, ./images/process/picture-tag/source-1/2x/swallows.jpg 2x'}] -->
<!-- image_caption = Watercolor, from a fresco from <a class="reference external" href="https://en.wikipedia.org/wiki/Akrotiri_(prehistoric_city)">Akrotiri</a> -->
<!-- image_target = -->
<!-- image_class = picture-tag -->
<!-- image_type = picture -->
<!-- max_height = 350px -->
<!-- options = {'class': 'picture-tag', 'max-height': '350px', 'type': 'picture'} -->
<!-- single_image = -->
<figure>
<a href="./images/swallows.jpg">
<picture>
<!-- source = {'srcset': './images/process/picture-tag/default/640w/swallows.jpg 640w, ./images/process/picture-tag/default/1024w/swallows.jpg 1024w, ./images/process/picture-tag/default/1600w/swallows.jpg 1600w', 'media': '(min-width: 640px)', 'sizes': '100vw'} -->
<source
media="(min-width: 640px)"
sizes="100vw"
srcset="./images/process/picture-tag/default/640w/swallows.jpg 640w, ./images/process/picture-tag/default/1024w/swallows.jpg 1024w, ./images/process/picture-tag/default/1600w/swallows.jpg 1600w"
>
<!-- source = {'srcset': './images/process/picture-tag/source-1/1x/swallows.jpg 1x, ./images/process/picture-tag/source-1/2x/swallows.jpg 2x'} -->
<source
srcset="./images/process/picture-tag/source-1/1x/swallows.jpg 1x, ./images/process/picture-tag/source-1/2x/swallows.jpg 2x"
>
<img
src="./images/process/picture-tag/default/640w/swallows.jpg"
style="max-width: 100%; height: auto; max-height: min(100vh, 350px);"
>
</picture>
</a>
<figcaption>
Watercolor, from a fresco from <a class="reference external" href="https://en.wikipedia.org/wiki/Akrotiri_(prehistoric_city)">Akrotiri</a>
</figcaption>
</figure> </li>
<li>
<!-- SITEURL = . -->
<!-- image_relative_path = images/caryatid.jpg -->
<!-- image_full_path = /home/hesse/dvt-perso/galleria/doc/content/images/caryatid.jpg -->
<!-- image_replace = ./images/process/picture-tag/default/640w/caryatid.jpg -->
<!-- image_sizes = None -->
<!-- image_srcset = ./images/process/picture-tag/source-1/1x/caryatid.jpg 1x, ./images/process/picture-tag/source-1/2x/caryatid.jpg 2x -->
<!-- image_sources = [{'srcset': './images/process/picture-tag/default/640w/caryatid.jpg 640w, ./images/process/picture-tag/default/1024w/caryatid.jpg 1024w, ./images/process/picture-tag/default/1600w/caryatid.jpg 1600w', 'media': '(min-width: 640px)', 'sizes': '100vw'}, {'srcset': './images/process/picture-tag/source-1/1x/caryatid.jpg 1x, ./images/process/picture-tag/source-1/2x/caryatid.jpg 2x'}] -->
<!-- image_caption = Watercolor, the <a class="reference external" href="https://en.wikipedia.org/wiki/Caryatid">Caryatid</a> porch at the <a class="reference external" href="https://en.wikipedia.org/wiki/Acropolis_of_Athens">Acropolis</a> -->
<!-- image_target = none -->
<!-- image_class = picture-tag -->
<!-- image_type = picture -->
<!-- max_height = 350px -->
<!-- options = {'class': 'picture-tag', 'max-height': '350px', 'type': 'picture'} -->
<!-- single_image = -->
<figure>
<picture>
<!-- source = {'srcset': './images/process/picture-tag/default/640w/caryatid.jpg 640w, ./images/process/picture-tag/default/1024w/caryatid.jpg 1024w, ./images/process/picture-tag/default/1600w/caryatid.jpg 1600w', 'media': '(min-width: 640px)', 'sizes': '100vw'} -->
<source
media="(min-width: 640px)"
sizes="100vw"
srcset="./images/process/picture-tag/default/640w/caryatid.jpg 640w, ./images/process/picture-tag/default/1024w/caryatid.jpg 1024w, ./images/process/picture-tag/default/1600w/caryatid.jpg 1600w"
>
<!-- source = {'srcset': './images/process/picture-tag/source-1/1x/caryatid.jpg 1x, ./images/process/picture-tag/source-1/2x/caryatid.jpg 2x'} -->
<source
srcset="./images/process/picture-tag/source-1/1x/caryatid.jpg 1x, ./images/process/picture-tag/source-1/2x/caryatid.jpg 2x"
>
<img
src="./images/process/picture-tag/default/640w/caryatid.jpg"
style="max-width: 100%; height: auto; max-height: min(100vh, 350px);"
>
</picture>
<figcaption>
Watercolor, the <a class="reference external" href="https://en.wikipedia.org/wiki/Caryatid">Caryatid</a> porch at the <a class="reference external" href="https://en.wikipedia.org/wiki/Acropolis_of_Athens">Acropolis</a>
</figcaption>
</figure> </li>
</ul>
<p>The <a class="reference external" href="https://galleria.artliba.org">galleria</a> plugin implements a <a class="reference external" href="https://en.wikipedia.org/wiki/ReStructuredText">reStructuredText</a>
directive for defining galleries in an intuitive way.
Observe some real-life application of this plugin: just have a look at
the <a class="reference external" href="https://greuzecottave.artliba.org">Greuze-Cottave</a> web site or the present author's <a class="reference external" href="https://pirogh.artliba.org">Pirogh</a> site.</p>
<p>The …</p><p><a class="reference external" href="https://galleria.artliba.org">Galleria</a> is a plugin for <a class="reference external" href="https://getpelican.com">pelican</a>,
a static site generator written in <a class="reference external" href="https://www.python.org/">python</a>.</p>
<p>Observe it first in action here: try to resize the window of our web
browser and observe the flexible rearrangement of the following images.</p>
<ul class="galleria"
>
<li>
<!-- SITEURL = . -->
<!-- image_relative_path = images/tiryns.jpg -->
<!-- image_full_path = /home/hesse/dvt-perso/galleria/doc/content/images/tiryns.jpg -->
<!-- image_replace = ./images/process/picture-tag/default/640w/tiryns.jpg -->
<!-- image_sizes = None -->
<!-- image_srcset = ./images/process/picture-tag/source-1/1x/tiryns.jpg 1x, ./images/process/picture-tag/source-1/2x/tiryns.jpg 2x -->
<!-- image_sources = [{'srcset': './images/process/picture-tag/default/640w/tiryns.jpg 640w, ./images/process/picture-tag/default/1024w/tiryns.jpg 1024w, ./images/process/picture-tag/default/1600w/tiryns.jpg 1600w', 'media': '(min-width: 640px)', 'sizes': '100vw'}, {'srcset': './images/process/picture-tag/source-1/1x/tiryns.jpg 1x, ./images/process/picture-tag/source-1/2x/tiryns.jpg 2x'}] -->
<!-- image_caption = Mycenaean Watercolor, from a fresco in <a class="reference external" href="https://en.wikipedia.org/wiki/Tiryns">Tiryns</a> -->
<!-- image_target = https://en.wikipedia.org/wiki/Tiryns -->
<!-- image_class = picture-tag -->
<!-- image_type = picture -->
<!-- max_height = 350px -->
<!-- options = {'class': 'picture-tag', 'max-height': '350px', 'type': 'picture'} -->
<!-- single_image = -->
<figure>
<a href="https://en.wikipedia.org/wiki/Tiryns">
<picture>
<!-- source = {'srcset': './images/process/picture-tag/default/640w/tiryns.jpg 640w, ./images/process/picture-tag/default/1024w/tiryns.jpg 1024w, ./images/process/picture-tag/default/1600w/tiryns.jpg 1600w', 'media': '(min-width: 640px)', 'sizes': '100vw'} -->
<source
media="(min-width: 640px)"
sizes="100vw"
srcset="./images/process/picture-tag/default/640w/tiryns.jpg 640w, ./images/process/picture-tag/default/1024w/tiryns.jpg 1024w, ./images/process/picture-tag/default/1600w/tiryns.jpg 1600w"
>
<!-- source = {'srcset': './images/process/picture-tag/source-1/1x/tiryns.jpg 1x, ./images/process/picture-tag/source-1/2x/tiryns.jpg 2x'} -->
<source
srcset="./images/process/picture-tag/source-1/1x/tiryns.jpg 1x, ./images/process/picture-tag/source-1/2x/tiryns.jpg 2x"
>
<img
src="./images/process/picture-tag/default/640w/tiryns.jpg"
style="max-width: 100%; height: auto; max-height: min(100vh, 350px);cursor: pointer;"
>
</picture>
</a>
<figcaption>
Mycenaean Watercolor, from a fresco in <a class="reference external" href="https://en.wikipedia.org/wiki/Tiryns">Tiryns</a>
</figcaption>
</figure> </li>
<li>
<!-- SITEURL = . -->
<!-- image_relative_path = images/boxers.jpg -->
<!-- image_full_path = /home/hesse/dvt-perso/galleria/doc/content/images/boxers.jpg -->
<!-- image_replace = ./images/process/picture-tag/default/640w/boxers.jpg -->
<!-- image_sizes = None -->
<!-- image_srcset = ./images/process/picture-tag/source-1/1x/boxers.jpg 1x, ./images/process/picture-tag/source-1/2x/boxers.jpg 2x -->
<!-- image_sources = [{'srcset': './images/process/picture-tag/default/640w/boxers.jpg 640w, ./images/process/picture-tag/default/1024w/boxers.jpg 1024w, ./images/process/picture-tag/default/1600w/boxers.jpg 1600w', 'media': '(min-width: 640px)', 'sizes': '100vw'}, {'srcset': './images/process/picture-tag/source-1/1x/boxers.jpg 1x, ./images/process/picture-tag/source-1/2x/boxers.jpg 2x'}] -->
<!-- image_caption = Watercolor, also a fresco from <a class="reference external" href="https://en.wikipedia.org/wiki/Akrotiri_(prehistoric_city)">Akrotiri</a> -->
<!-- image_target = https://en.wikipedia.org/wiki/Akrotiri_(prehistoric_city) -->
<!-- image_class = picture-tag -->
<!-- image_type = picture -->
<!-- max_height = 350px -->
<!-- options = {'class': 'picture-tag', 'max-height': '350px', 'type': 'picture'} -->
<!-- single_image = -->
<figure>
<a href="https://en.wikipedia.org/wiki/Akrotiri_(prehistoric_city)">
<picture>
<!-- source = {'srcset': './images/process/picture-tag/default/640w/boxers.jpg 640w, ./images/process/picture-tag/default/1024w/boxers.jpg 1024w, ./images/process/picture-tag/default/1600w/boxers.jpg 1600w', 'media': '(min-width: 640px)', 'sizes': '100vw'} -->
<source
media="(min-width: 640px)"
sizes="100vw"
srcset="./images/process/picture-tag/default/640w/boxers.jpg 640w, ./images/process/picture-tag/default/1024w/boxers.jpg 1024w, ./images/process/picture-tag/default/1600w/boxers.jpg 1600w"
>
<!-- source = {'srcset': './images/process/picture-tag/source-1/1x/boxers.jpg 1x, ./images/process/picture-tag/source-1/2x/boxers.jpg 2x'} -->
<source
srcset="./images/process/picture-tag/source-1/1x/boxers.jpg 1x, ./images/process/picture-tag/source-1/2x/boxers.jpg 2x"
>
<img
src="./images/process/picture-tag/default/640w/boxers.jpg"
style="max-width: 100%; height: auto; max-height: min(100vh, 350px);cursor: pointer;"
>
</picture>
</a>
<figcaption>
Watercolor, also a fresco from <a class="reference external" href="https://en.wikipedia.org/wiki/Akrotiri_(prehistoric_city)">Akrotiri</a>
</figcaption>
</figure> </li>
<li>
<!-- SITEURL = . -->
<!-- image_relative_path = images/swallows.jpg -->
<!-- image_full_path = /home/hesse/dvt-perso/galleria/doc/content/images/swallows.jpg -->
<!-- image_replace = ./images/process/picture-tag/default/640w/swallows.jpg -->
<!-- image_sizes = None -->
<!-- image_srcset = ./images/process/picture-tag/source-1/1x/swallows.jpg 1x, ./images/process/picture-tag/source-1/2x/swallows.jpg 2x -->
<!-- image_sources = [{'srcset': './images/process/picture-tag/default/640w/swallows.jpg 640w, ./images/process/picture-tag/default/1024w/swallows.jpg 1024w, ./images/process/picture-tag/default/1600w/swallows.jpg 1600w', 'media': '(min-width: 640px)', 'sizes': '100vw'}, {'srcset': './images/process/picture-tag/source-1/1x/swallows.jpg 1x, ./images/process/picture-tag/source-1/2x/swallows.jpg 2x'}] -->
<!-- image_caption = Watercolor, from a fresco from <a class="reference external" href="https://en.wikipedia.org/wiki/Akrotiri_(prehistoric_city)">Akrotiri</a> -->
<!-- image_target = -->
<!-- image_class = picture-tag -->
<!-- image_type = picture -->
<!-- max_height = 350px -->
<!-- options = {'class': 'picture-tag', 'max-height': '350px', 'type': 'picture'} -->
<!-- single_image = -->
<figure>
<a href="./images/swallows.jpg">
<picture>
<!-- source = {'srcset': './images/process/picture-tag/default/640w/swallows.jpg 640w, ./images/process/picture-tag/default/1024w/swallows.jpg 1024w, ./images/process/picture-tag/default/1600w/swallows.jpg 1600w', 'media': '(min-width: 640px)', 'sizes': '100vw'} -->
<source
media="(min-width: 640px)"
sizes="100vw"
srcset="./images/process/picture-tag/default/640w/swallows.jpg 640w, ./images/process/picture-tag/default/1024w/swallows.jpg 1024w, ./images/process/picture-tag/default/1600w/swallows.jpg 1600w"
>
<!-- source = {'srcset': './images/process/picture-tag/source-1/1x/swallows.jpg 1x, ./images/process/picture-tag/source-1/2x/swallows.jpg 2x'} -->
<source
srcset="./images/process/picture-tag/source-1/1x/swallows.jpg 1x, ./images/process/picture-tag/source-1/2x/swallows.jpg 2x"
>
<img
src="./images/process/picture-tag/default/640w/swallows.jpg"
style="max-width: 100%; height: auto; max-height: min(100vh, 350px);"
>
</picture>
</a>
<figcaption>
Watercolor, from a fresco from <a class="reference external" href="https://en.wikipedia.org/wiki/Akrotiri_(prehistoric_city)">Akrotiri</a>
</figcaption>
</figure> </li>
<li>
<!-- SITEURL = . -->
<!-- image_relative_path = images/caryatid.jpg -->
<!-- image_full_path = /home/hesse/dvt-perso/galleria/doc/content/images/caryatid.jpg -->
<!-- image_replace = ./images/process/picture-tag/default/640w/caryatid.jpg -->
<!-- image_sizes = None -->
<!-- image_srcset = ./images/process/picture-tag/source-1/1x/caryatid.jpg 1x, ./images/process/picture-tag/source-1/2x/caryatid.jpg 2x -->
<!-- image_sources = [{'srcset': './images/process/picture-tag/default/640w/caryatid.jpg 640w, ./images/process/picture-tag/default/1024w/caryatid.jpg 1024w, ./images/process/picture-tag/default/1600w/caryatid.jpg 1600w', 'media': '(min-width: 640px)', 'sizes': '100vw'}, {'srcset': './images/process/picture-tag/source-1/1x/caryatid.jpg 1x, ./images/process/picture-tag/source-1/2x/caryatid.jpg 2x'}] -->
<!-- image_caption = Watercolor, the <a class="reference external" href="https://en.wikipedia.org/wiki/Caryatid">Caryatid</a> porch at the <a class="reference external" href="https://en.wikipedia.org/wiki/Acropolis_of_Athens">Acropolis</a> -->
<!-- image_target = none -->
<!-- image_class = picture-tag -->
<!-- image_type = picture -->
<!-- max_height = 350px -->
<!-- options = {'class': 'picture-tag', 'max-height': '350px', 'type': 'picture'} -->
<!-- single_image = -->
<figure>
<picture>
<!-- source = {'srcset': './images/process/picture-tag/default/640w/caryatid.jpg 640w, ./images/process/picture-tag/default/1024w/caryatid.jpg 1024w, ./images/process/picture-tag/default/1600w/caryatid.jpg 1600w', 'media': '(min-width: 640px)', 'sizes': '100vw'} -->
<source
media="(min-width: 640px)"
sizes="100vw"
srcset="./images/process/picture-tag/default/640w/caryatid.jpg 640w, ./images/process/picture-tag/default/1024w/caryatid.jpg 1024w, ./images/process/picture-tag/default/1600w/caryatid.jpg 1600w"
>
<!-- source = {'srcset': './images/process/picture-tag/source-1/1x/caryatid.jpg 1x, ./images/process/picture-tag/source-1/2x/caryatid.jpg 2x'} -->
<source
srcset="./images/process/picture-tag/source-1/1x/caryatid.jpg 1x, ./images/process/picture-tag/source-1/2x/caryatid.jpg 2x"
>
<img
src="./images/process/picture-tag/default/640w/caryatid.jpg"
style="max-width: 100%; height: auto; max-height: min(100vh, 350px);"
>
</picture>
<figcaption>
Watercolor, the <a class="reference external" href="https://en.wikipedia.org/wiki/Caryatid">Caryatid</a> porch at the <a class="reference external" href="https://en.wikipedia.org/wiki/Acropolis_of_Athens">Acropolis</a>
</figcaption>
</figure> </li>
</ul>
<p>The <a class="reference external" href="https://galleria.artliba.org">galleria</a> plugin implements a <a class="reference external" href="https://en.wikipedia.org/wiki/ReStructuredText">reStructuredText</a>
directive for defining galleries in an intuitive way.
Observe some real-life application of this plugin: just have a look at
the <a class="reference external" href="https://greuzecottave.artliba.org">Greuze-Cottave</a> web site or the present author's <a class="reference external" href="https://pirogh.artliba.org">Pirogh</a> site.</p>
<p>The previous galleria shows four watercolors from 2022 by <a class="reference external" href="https://pirogh.artliba.org">Pirogh</a>,
which is also the author of the present plugin.
The original models was three Mycenaean fresco from the ancient Greece done between 1400 and 1200 BC,
which could be observed in the <a class="reference external" href="https://en.wikipedia.org/wiki/National_Archaeological_Museum,_Athens">archaeological museum</a> in Athens, and the last is a watercolor
on the motif that represents the <a class="reference external" href="https://en.wikipedia.org/wiki/Caryatid">Caryatid</a> porch at the <a class="reference external" href="https://en.wikipedia.org/wiki/Acropolis_of_Athens">Acropolis</a>.</p>
<p>Try to resize your window browser:
observe the flexible rearrangement of the images.
This is possible thanks to the <a class="reference external" href="https://www.w3schools.com/cssref/css3_pr_flex.php">flex</a> container feature implemented by the
<a class="reference external" href="https://galleria.artliba.org">galleria</a> plugin.
This is especially useful when displaying on mobile phones.
Moreover, this plugin is able to automatically minimize the overall page weight:
it save you a trip to <a class="reference external" href="https://www.gimp.org">gimp</a> each time you include an image in your post.
It also makes it easy to create responsive images using the <tt class="docutils literal">html5 srcset</tt>
attribute and <tt class="docutils literal"><picture></tt> tag.
It does this by automatically generating multiple derivative images
from one or more sources.
It is possible efficiently to manage web site with thousands of large images,
and each gallery could displays hundred of images: the result will optimize
the bandwidth of the connection, depending upon the resolution of the user's display.
Finally the thumbnail's image resolution itself is also responsive,
in the sense that it takes into account the physical resolution
of our window and screen resolution.
When you click on a thumbnail of a picture, a full resolution version
of this picture is displayed.
The <a class="reference external" href="https://galleria.artliba.org">galleria</a> will never overwrite your original images.</p>
<p>You're interested? Fascinated? Let's start!
First, download and install the plugin:</p>
<pre class="code bash literal-block">
git<span class="w"> </span>clone<span class="w"> </span>https://gricad-gitlab.univ-grenoble-alpes.fr/internet/galleria
</pre>