galerie avec org-publish

Publié le 18 mai 2022 par Matthias David.

Réalisant quelques peintures de temps en temps je me suis penché sur la question de réaliser une galerie avec org-publish.

Voici le lien vers la galerie.

Fichier orgmode

voici le fichier orgmode où j’ajoute le lien vers les images que je veux ajouter à la galerie

EXPORT html
<div class="toolbar mb2 mt2">
<button class="btn fil-cat" href="" data-rel="all">All</button>
<button class="btn fil-cat" data-rel="aquarelle">Aquarelles</button>
<button class="btn fil-cat" data-rel="croquis">Croquis</button>
</div>

<div id="portfolio">
EXPORT


name: ma peinture
attr_html: :alt mon dessin :class all aquarelle tile scale-anm :width 100%
file:../images/peinture_1024.jpg

name: mon dessin
attr_html: :alt ma peinture :class all aquarelle tile scale-anm :width 100%
file:../images/dessin_1024.jpg



EXPORT html
</div>
<div style="clear:both;"></div> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(function () {
  var selectedClass = "";
  $(".fil-cat").click(function () {
    selectedClass = $(this).attr("data-rel");
    $("#portfolio").fadeTo(100, 0.1);
    $("#portfolio img")
      .not("." + selectedClass)
      .fadeOut()
      .removeClass("scale-anm");
    setTimeout(function () {
      $("." + selectedClass)
        .fadeIn()
        .addClass("scale-anm");
      $("#portfolio").fadeTo(300, 1);
    }, 300);
  });
});

</script>


EXPORT

configuration org-publish-project-alist

(setq org-publish-project-alist
                        '( ...
                                ("gallery"
         :base-directory "~/site/org/gallery"
         :base-extension "org"
         :exclude ,(regexp-opt '("README.org" "draft"))
         :sitemap-title "Gallerie"
         :recursive nil
         :publishing-function org-html-publish-to-html
         :publishing-directory "votre lien ftp ou dossier local"
         :html-head-include-scripts t
         :html-head-include-default-style nil
         :html-head "<link rel='stylesheet prefetch' href='https://npmcdn.com/basscss@8.0.0/css/basscss.min.css'><link rel='stylesheet' href='/css/gallery.css'>" ; votre css additionel
         :html-preamble gnu/website-html-preamble ; votre fonction ou votre code html de préambule
         :html-postamble "Copyright © 2020-2022 Matthias David")))