pelican-plugins · phibos · Mar 6, 2024 · Mar 6, 2024
diff --git a/examples/content/articles/article-with-gallery.md b/examples/content/articles/article-with-gallery.md
@@ -4,16 +4,6 @@ Category: Gallery
 Gallery: {photo}example_gallery/
 Summary: This is an example with an image gallery.
 
-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Urna habitasse sodales sollicitudin orci tempor fames curabitur quisque netus at suspendisse cubilia diam. Eu suspendisse lacus scelerisque lectus odio libero eget etiam dictumst senectus condimentum.
+Add a page gallery by adding the ```Gallery``` value in the metadata.
 
-Ullamcorper dui ipsum pharetra metus fermentum pellentesque tristique elementum. Consequat phasellus suscipit mattis volutpat mollis risus duis augue. Dui dui volutpat interdum euismod in molestie himenaeos feugiat. Torquent nunc consequat in risus aliquet sollicitudin hendrerit est vel metus.
-
-Curae conubia nostra pharetra ornare sem magna dignissim platea senectus diam. Neque libero malesuada gravida tellus iaculis in integer. Mollis etiam non netus laoreet leo quam tristique adipiscing sed augue fringilla inceptos eleifend dui.
-
-Dolor viverra vehicula erat sagittis libero malesuada sit tempus consectetur sed. Sollicitudin nunc sit ligula pretium vehicula odio ac nisi est laoreet platea. Felis nec et nulla nec eu vivamus fames purus neque tempus feugiat aliquet mauris.
-
-Fermentum himenaeos quisque placerat pretium luctus arcu ut congue tempor. Diam auctor sit in venenatis velit senectus. Eleifend vel metus ex sapien aenean etiam metus eleifend.
-
-Vulputate porttitor enim purus porttitor varius habitant a rutrum fringilla dapibus laoreet orci aenean. Luctus amet eget feugiat suscipit morbi vitae odio purus pretium venenatis nostra libero cursus sem. Risus curabitur curabitur neque himenaeos hendrerit nisi tempor sem. Tellus integer conubia viverra commodo senectus curae vel.
-
-Ornare nisi congue tempor aliquet purus morbi condimentum tincidunt mollis urna ligula erat ultrices. Dapibus ad nisl non dui semper inceptos auctor himenaeos hendrerit torquent cubilia sit iaculis feugiat. Pharetra proin ac semper per congue a posuere vehicula et egestas in metus primis. Nisi et varius nec facilisis ullamcorper maecenas praesent donec vivamus imperdiet tortor. Quis ornare nibh erat condimentum cursus.
+**Don't forget to modify your templates.**
diff --git a/examples/content/articles/article-with-image.md b/examples/content/articles/article-with-image.md
@@ -4,16 +4,6 @@ Category: Photo
 Image: {photo}article/Pelikan_Walvis_Bay.jpg
 Summary: This is an example with an article image.
 
-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Urna habitasse sodales sollicitudin orci tempor fames curabitur quisque netus at suspendisse cubilia diam. Eu suspendisse lacus scelerisque lectus odio libero eget etiam dictumst senectus condimentum.
+Add a page image by adding the ```Image``` value in the metadata.
 
-Ullamcorper dui ipsum pharetra metus fermentum pellentesque tristique elementum. Consequat phasellus suscipit mattis volutpat mollis risus duis augue. Dui dui volutpat interdum euismod in molestie himenaeos feugiat. Torquent nunc consequat in risus aliquet sollicitudin hendrerit est vel metus.
-
-Curae conubia nostra pharetra ornare sem magna dignissim platea senectus diam. Neque libero malesuada gravida tellus iaculis in integer. Mollis etiam non netus laoreet leo quam tristique adipiscing sed augue fringilla inceptos eleifend dui.
-
-Dolor viverra vehicula erat sagittis libero malesuada sit tempus consectetur sed. Sollicitudin nunc sit ligula pretium vehicula odio ac nisi est laoreet platea. Felis nec et nulla nec eu vivamus fames purus neque tempus feugiat aliquet mauris.
-
-Fermentum himenaeos quisque placerat pretium luctus arcu ut congue tempor. Diam auctor sit in venenatis velit senectus. Eleifend vel metus ex sapien aenean etiam metus eleifend.
-
-Vulputate porttitor enim purus porttitor varius habitant a rutrum fringilla dapibus laoreet orci aenean. Luctus amet eget feugiat suscipit morbi vitae odio purus pretium venenatis nostra libero cursus sem. Risus curabitur curabitur neque himenaeos hendrerit nisi tempor sem. Tellus integer conubia viverra commodo senectus curae vel.
-
-Ornare nisi congue tempor aliquet purus morbi condimentum tincidunt mollis urna ligula erat ultrices. Dapibus ad nisl non dui semper inceptos auctor himenaeos hendrerit torquent cubilia sit iaculis feugiat. Pharetra proin ac semper per congue a posuere vehicula et egestas in metus primis. Nisi et varius nec facilisis ullamcorper maecenas praesent donec vivamus imperdiet tortor. Quis ornare nibh erat condimentum cursus.
+**Don't forget to modify your templates.**
diff --git a/examples/content/articles/article-with-inline-gallery.md b/examples/content/articles/article-with-inline-gallery.md
@@ -3,20 +3,27 @@ Date: 2022-01-04
 Category: Gallery
 Summary: This is an example with an inline gallery.
 
-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Urna habitasse sodales sollicitudin orci tempor fames curabitur quisque netus at suspendisse cubilia diam. Eu suspendisse lacus scelerisque lectus odio libero eget etiam dictumst senectus condimentum.
+**If you don't see a gallery here, you have to enable inline galleries**
 
-Ullamcorper dui ipsum pharetra metus fermentum pellentesque tristique elementum. Consequat phasellus suscipit mattis volutpat mollis risus duis augue. Dui dui volutpat interdum euismod in molestie himenaeos feugiat. Torquent nunc consequat in risus aliquet sollicitudin hendrerit est vel metus.
+## Old pattern
 
-Curae conubia nostra pharetra ornare sem magna dignissim platea senectus diam. Neque libero malesuada gravida tellus iaculis in integer. Mollis etiam non netus laoreet leo quam tristique adipiscing sed augue fringilla inceptos eleifend dui.
+This uses the old and deprecated gallery pattern.
 
-**If you don't see a gallery here, you have to enable inline galleries**
+We have to add spaces so the photos plugin won't replace our code example with a gallery.
+To use it replace "g a l l e r y" with "gallery" or use the new pattern format.
+
+```
+g a l l e r y::{photo}example_gallery
+```
 
 gallery::{photo}example_gallery
 
-Dolor viverra vehicula erat sagittis libero malesuada sit tempus consectetur sed. Sollicitudin nunc sit ligula pretium vehicula odio ac nisi est laoreet platea. Felis nec et nulla nec eu vivamus fames purus neque tempus feugiat aliquet mauris.
+## New pattern
 
-Fermentum himenaeos quisque placerat pretium luctus arcu ut congue tempor. Diam auctor sit in venenatis velit senectus. Eleifend vel metus ex sapien aenean etiam metus eleifend.
+Better use the new one introduced in photos 1.1.0
 
-Vulputate porttitor enim purus porttitor varius habitant a rutrum fringilla dapibus laoreet orci aenean. Luctus amet eget feugiat suscipit morbi vitae odio purus pretium venenatis nostra libero cursus sem. Risus curabitur curabitur neque himenaeos hendrerit nisi tempor sem. Tellus integer conubia viverra commodo senectus curae vel.
+```
+<div gallery="{photo}example_gallery"></div>
+```
 
-Ornare nisi congue tempor aliquet purus morbi condimentum tincidunt mollis urna ligula erat ultrices. Dapibus ad nisl non dui semper inceptos auctor himenaeos hendrerit torquent cubilia sit iaculis feugiat. Pharetra proin ac semper per congue a posuere vehicula et egestas in metus primis. Nisi et varius nec facilisis ullamcorper maecenas praesent donec vivamus imperdiet tortor. Quis ornare nibh erat condimentum cursus.
+<div gallery="{photo}example_gallery"></div>
diff --git a/examples/content/articles/article-with-inline-image.md b/examples/content/articles/article-with-inline-image.md
@@ -3,26 +3,45 @@ Date: 2022-01-06
 Category: Photo
 Summary: This is an example with an inline image.
 
-Create thumbnail from image
----------------------------
+## Use inline images
 
-![Alt text]({photo}example_gallery/Pelecanus_crispus_at_Beijing_Zoo_crop.JPG) Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Urna habitasse sodales sollicitudin orci tempor fames curabitur quisque netus at suspendisse cubilia diam. Eu suspendisse lacus scelerisque lectus odio libero eget etiam dictumst senectus condimentum.
+Just use the default syntax to add images in markdown.
 
-Lightbox
---------
+```
+![Alt text]({photo}example_gallery/Pelecanus_crispus_at_Beijing_Zoo_crop.JPG)
+```
 
-**You need JavaScript to show the image in an lightbox**
+![Alt text]({photo}example_gallery/Pelecanus_crispus_at_Beijing_Zoo_crop.JPG)
 
-![Alt text]({lightbox}example_gallery/Pelecanus_crispus_at_Beijing_Zoo_crop.JPG)
+## Use inline images with template
+
+This will use the template specified with ```PHOTO_INLINE_IMAGE_TEMPLATE```.
+The default is ```inline_image``` and will use the template file ```inline_image.html```.
+
+### Minimal example
+
+Just add a div-Tag.
+
+```html
+<div image="{photo}example_gallery/Pelecanus_crispus_at_Beijing_Zoo_crop.JPG"></div>
+```
 
-Ullamcorper dui ipsum pharetra metus fermentum pellentesque tristique elementum. Consequat phasellus suscipit mattis volutpat mollis risus duis augue. Dui dui volutpat interdum euismod in molestie himenaeos feugiat. Torquent nunc consequat in risus aliquet sollicitudin hendrerit est vel metus.
+<div image="{photo}example_gallery/Pelecanus_crispus_at_Beijing_Zoo_crop.JPG"></div>
 
-Curae conubia nostra pharetra ornare sem magna dignissim platea senectus diam. Neque libero malesuada gravida tellus iaculis in integer. Mollis etiam non netus laoreet leo quam tristique adipiscing sed augue fringilla inceptos eleifend dui.
+### Additional attributes
 
-Dolor viverra vehicula erat sagittis libero malesuada sit tempus consectetur sed. Sollicitudin nunc sit ligula pretium vehicula odio ac nisi est laoreet platea. Felis nec et nulla nec eu vivamus fames purus neque tempus feugiat aliquet mauris.
+We can add additional attributes and use them in the template. In this example we use caption.
 
-Fermentum himenaeos quisque placerat pretium luctus arcu ut congue tempor. Diam auctor sit in venenatis velit senectus. Eleifend vel metus ex sapien aenean etiam metus eleifend.
+```html
+<div image="{photo}example_gallery/Pelecanus_crispus_at_Beijing_Zoo_crop.JPG" caption="This is a custom caption"></div>
+```
 
-Vulputate porttitor enim purus porttitor varius habitant a rutrum fringilla dapibus laoreet orci aenean. Luctus amet eget feugiat suscipit morbi vitae odio purus pretium venenatis nostra libero cursus sem. Risus curabitur curabitur neque himenaeos hendrerit nisi tempor sem. Tellus integer conubia viverra commodo senectus curae vel.
+<div image="{photo}example_gallery/Pelecanus_crispus_at_Beijing_Zoo_crop.JPG" caption="This is a custom caption"></div>
 
-Ornare nisi congue tempor aliquet purus morbi condimentum tincidunt mollis urna ligula erat ultrices. Dapibus ad nisl non dui semper inceptos auctor himenaeos hendrerit torquent cubilia sit iaculis feugiat. Pharetra proin ac semper per congue a posuere vehicula et egestas in metus primis. Nisi et varius nec facilisis ullamcorper maecenas praesent donec vivamus imperdiet tortor. Quis ornare nibh erat condimentum cursus.
+
+Lightbox
+--------
+
+**You need JavaScript to show the image in an lightbox**
+
+![Alt text]({lightbox}example_gallery/Pelecanus_crispus_at_Beijing_Zoo_crop.JPG)
diff --git a/examples/content/pages/page-with-gallery.md b/examples/content/pages/page-with-gallery.md
@@ -0,0 +1,7 @@
+Title: Page with Gallery
+Gallery: {photo}example_gallery/
+Summary: This is an example with an image gallery.
+
+Add a page gallery by adding the ```Gallery``` value in the metadata.
+
+**Don't forget to modify your templates.**
diff --git a/examples/content/pages/page-with-image.md b/examples/content/pages/page-with-image.md
@@ -0,0 +1,7 @@
+Title: Page Image
+Image: {photo}article/Pelikan_Walvis_Bay.jpg
+Summary: This is an example with an article image.
+
+Add a page image by adding the ```Image``` value in the metadata.
+
+**Don't forget to modify your templates.**
diff --git a/examples/content/pages/page-with-inline-gallery.md b/examples/content/pages/page-with-inline-gallery.md
@@ -0,0 +1,27 @@
+Title: Page with inline Gallery
+Summary: This is an example with an inline gallery.
+
+**If you don't see a gallery here, you have to enable inline galleries**
+
+## Old pattern
+
+This uses the old and deprecated gallery pattern.
+
+We have to add spaces so the photos plugin won't replace our code example with a gallery.
+To use it replace "g a l l e r y" with "gallery" or use the new pattern format.
+
+```
+g a l l e r y::{photo}example_gallery
+```
+
+gallery::{photo}example_gallery
+
+## New pattern
+
+Better use the new one introduced in photos 1.1.0
+
+```
+<div gallery="{photo}example_gallery"></div>
+```
+
+<div gallery="{photo}example_gallery"></div>
diff --git a/examples/content/pages/page-with-inline-image.md b/examples/content/pages/page-with-inline-image.md
@@ -0,0 +1,45 @@
+Title: Page with inline image
+Summary: This is an example with an inline image.
+
+## Use inline images
+
+Just use the default syntax to add images in markdown.
+
+```
+![Alt text]({photo}example_gallery/Pelecanus_crispus_at_Beijing_Zoo_crop.JPG)
+```
+
+![Alt text]({photo}example_gallery/Pelecanus_crispus_at_Beijing_Zoo_crop.JPG)
+
+## Use inline images with template
+
+This will use the template specified with ```PHOTO_INLINE_IMAGE_TEMPLATE```.
+The default is ```inline_image``` and will use the template file ```inline_image.html```.
+
+### Minimal example
+
+Just add a div-Tag.
+
+```html
+<div image="{photo}example_gallery/Pelecanus_crispus_at_Beijing_Zoo_crop.JPG"></div>
+```
+
+<div image="{photo}example_gallery/Pelecanus_crispus_at_Beijing_Zoo_crop.JPG"></div>
+
+### Additional attributes
+
+We can add additional attributes and use them in the template. In this example we use caption.
+
+```html
+<div image="{photo}example_gallery/Pelecanus_crispus_at_Beijing_Zoo_crop.JPG" caption="This is a custom caption"></div>
+```
+
+<div image="{photo}example_gallery/Pelecanus_crispus_at_Beijing_Zoo_crop.JPG" caption="This is a custom caption"></div>
+
+
+Lightbox
+--------
+
+**You need JavaScript to show the image in an lightbox**
+
+![Alt text]({lightbox}example_gallery/Pelecanus_crispus_at_Beijing_Zoo_crop.JPG)
diff --git a/examples/pelicanconf.py b/examples/pelicanconf.py
@@ -21,6 +21,8 @@
 # Base settings where to find the galleries with images
 PHOTO_LIBRARY = "content/galleries"
 
+PHOTO_INLINE_ENABLED = True
+
 PHOTO_INLINE_GALLERY_ENABLED = True
 # We use the default settings here
 # PHOTO_INLINE_GALLERY_TEMPLATE = "inline_gallery"

diff --git a/examples/themes/notmyidea_photos/templates/article.html b/examples/themes/notmyidea_photos/templates/article.html
@@ -35,16 +35,15 @@ <h1 class="entry-title">
       {{ article.content }}
       {% if article.photo_gallery %}
       <!-- >>>> Start >>>>> PHOTO plugin: article gallery >>>>>>>>> -->
-      {% if article.photo_gallery %}
       <div class="gallery">
-          {% for title, gallery in article.photo_gallery %}
-            <h1>{{ title }}</h1>
-              {% for name, photo, thumb, exif, caption in gallery %}
-                  <a href="{{ SITEURL }}/{{ photo }}" title="{{ name }}" exif="{{ exif }}" caption="{{ caption }}"><img src="{{ SITEURL }}/{{ thumb }}"></a>
-              {% endfor %}
-          {% endfor %}
+        {% import "photos_macros.html" as photos_macros %}
+
+        <div class="gallery">
+            {% for title, gallery in article.photo_gallery %}
+                {{ photos_macros.gallery(title, gallery, 'Default caption') }}
+            {% endfor %}
+        </div>
       </div>
-      {% endif %}
       <!-- <<<< End <<<<< PHOTO plugin: article gallery <<<<<<<<< -->
       {% endif %}
     </div><!-- /.entry-content -->

diff --git a/examples/themes/notmyidea_photos/templates/inline_gallery.html b/examples/themes/notmyidea_photos/templates/inline_gallery.html
@@ -1,10 +1,9 @@
-<!-- >>>> Start >>>>> PHOTO plugin: inline gallery >>>>>>>>> -->
+<!-- >>>> Start >>>>> PHOTO plugin: inline_gallery template >>>>>>>>> -->
+{% import "photos_macros.html" as photos_macros %}
+
 <div class="gallery">
-    {% for title, gallery in galleries%}
-        <h1>{{ title }}</h1>
-            {% for name, photo, thumb, exif, caption in gallery %}
-                    <a href="{{ SITEURL }}/{{ photo }}" title="{{ name }}" exif="{{ exif }}" caption="{{ caption }}"><img src="{{ SITEURL }}/{{ thumb }}"></a>
-            {% endfor %}
+    {% for title, gallery in galleries %}
+        {{ photos_macros.gallery(title, gallery, 'Default caption') }}
     {% endfor %}
 </div>
-<!-- <<<< End <<<<< PHOTO plugin: inline gallery <<<<<<<<< -->
+<!-- <<<< End <<<<< PHOTO plugin: inline_gallery template <<<<<<<<< -->
diff --git a/examples/themes/notmyidea_photos/templates/inline_image.html b/examples/themes/notmyidea_photos/templates/inline_image.html
@@ -0,0 +1,13 @@
+<!-- >>>> Start >>>>> PHOTO plugin: inline_image template >>>>>>>>> -->
+<figure>
+    <img
+        src="{{ SITEURL }}/{{ image.image }}"
+        alt="{{ image.caption | default(html_attributes.caption, true) | e }}"
+        height="{{ image.image.height }}"
+        width="{{ image.image.width }}"
+        {% if image.image.srcset.html_srcset %}srcset="{{ image.image.srcset.html_srcset }}"{% endif %}
+        loading="lazy"
+    />
+    <figcaption>{{ html_attributes.caption | default(image.caption, true) | e }}</figcaption>
+</figure>
+<!-- <<<< End <<<<< PHOTO plugin: inline_image template <<<<<<<<< -->
diff --git a/examples/themes/notmyidea_photos/templates/lightbox_gallery.html b/examples/themes/notmyidea_photos/templates/lightbox_gallery.html
@@ -1,4 +1,4 @@
-<!-- >>>> Start >>>>> PHOTO plugin: lightbox script >>>>>>>>> -->
+<!-- >>>> Start >>>>> PHOTO plugin: lightbox_gallery template >>>>>>>>> -->
 
 <!-- jQuery 1.7.2+ or Zepto.js 1.0+ -->
 <script src="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/js/zepto.min.js"></script>
@@ -24,4 +24,4 @@
 	} }
 });
 </script>
-<!-- >>>> Start >>>>> PHOTO plugin: lightbox script >>>>>>>>> -->
+<!-- <<<< End <<<<< PHOTO plugin: lightbox_gallery template <<<<<<<<< -->
diff --git a/examples/themes/notmyidea_photos/templates/page.html b/examples/themes/notmyidea_photos/templates/page.html
@@ -14,6 +14,23 @@
     <h1 class="entry-title">{{ page.title }}</h1>
     {% import 'translations.html' as translations with context %}
     {{ translations.translations_for(page) }}
+    <!-- >>>> Start >>>>> PHOTO plugin: page image >>>>>>>>> -->
+    {% if page.photo_image %}
+    <img src="{{ SITEURL }}/{{ page.photo_image[1] }}" />
+    {% endif %}
+    <!-- <<<< End <<<<< PHOTO plugin: page image <<<<<<<<< -->
     {{ page.content }}
+    {% if page.photo_gallery %}
+    <!-- >>>> Start >>>>> PHOTO plugin: page gallery >>>>>>>>> -->
+    <div class="gallery">
+        {% import "photos_macros.html" as photos_macros %}
+        <div class="gallery">
+            {% for title, gallery in page.photo_gallery %}
+                {{ photos_macros.gallery(title, gallery, 'Default caption') }}
+            {% endfor %}
+        </div>
+    </div>
+    <!-- <<<< End <<<<< PHOTO plugin: page gallery <<<<<<<<< -->
+{% endif %}
 </section>
 {% endblock %}
diff --git a/examples/themes/notmyidea_photos/templates/photos_macros.html b/examples/themes/notmyidea_photos/templates/photos_macros.html
@@ -0,0 +1,18 @@
+{% macro gallery(title, gallery, default_caption) -%}
+<div class="gallery">
+    {% if title | trim %}<h2>{{ title }}</h2>{% endif %}
+    {% for name, photo, thumb, exif, caption in gallery %}
+        <a href="{{ SITEURL }}/{{ photo }}" title="{{ caption|default(default_caption, true)|e }}">
+            <img
+                src="{{ SITEURL }}/{{ thumb }}"
+                alt="{{ caption | default(default_caption, true)|e }}"
+                height="{{ thumb.height }}"
+                width="{{ thumb.width }}"
+                {% if thumb.srcset.html_srcset %}srcset="{{ thumb.srcset.html_srcset }}"{% endif %}
+                sizes="(max-width: 768px) 50vw, 33vw"
+                loading="lazy"
+            />
+        </a>
+    {% endfor %}
+</div>
+{% endmacro -%}