How do I use the lightbox?

raglits

First off I want to say that this project looks fantastic. I've been maintaining a wordpress site for a while now but am hoping to replace as it was inherited from someone else and so far I'm not a massive fan of the site and/or wordpress so when I get a chance I want to re-architect it.

I have setup a dev box running Automad. I've created some pages and blog posts and all looks ok so far. I have created a couple of galleries without issue but I'm stumped when trying to use the lightbox plugin.

I've added the following to the head variable (tried on the general site settings and on the page itself, but not both at the sametime)

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script src="/packages/automad/lightbox/dist/lightbox.min.js"></script> <link rel="stylesheet" href="/packages/automad/lightbox/dist/lightbox.min.css">

I've then added some text and the image I wish to use in a lightbox when someone clicks on it but I only get the image showing on the page and no pop-up modal etc.

![](/pages/06.my-mg/dsc-0123.jpg) is the markdown in the content section

I guess the section on the lightbox readme about the template variable is important but I have no idea what to do with that

mad

raglits Hi there. You have to use the pipe function as described in the example with your variable the contains the Markdown.

Darko

Hi, thanks for the lovely cms. I love the fexibility and simplicity.
Now that I try to expand the usage of it I 'm stuck at the same problem like raglits. How do you

use the pipe function as described in the example with your variable the contains the Markdown

Can you give me a little more user friendly explanation with concrete examples please?

In packages/standard/templates/post.php I've put
@{ lbx | Automad/Lightbox | markdown }
directly after
<body class="@{ :template | sanitize }">

Is this what is meant by

Somewhere in the body of your template the extension can be used with any variable

In the example is "text" just a placeholder for any variable?
How do I use it then with my variable "lbx" on my site or how do I use variables in the markdown block with pictures?
Or do I need to use the "Custom Template Snippet" block?
Where is the difference when code starts with "@" and with "<@"?
Can I find anywhere information with simple examples how to correct use functions like lightbox and mail in automad?

You see, I'm very confused and it would be great if someone could give me a push in direction of better understanding how automad extensions are meant to be used 😉

mad

Darko Hi, sure. The best would be to check out the developers guide in the docs. It includes a very detailed explanation of the syntax as well as some cheat sheets.

Darko

Hallo mad,
ich versuche es mal auf Deutsch, da ich gesehen habe, dass es auch geht und vielleicht verstehst du mein Dilemma etwas besser. Ich würde nämlich sehr gerne die Lightbox nutzen, komme aber kein Schritt weiter, egal was ich versuche. Ein befreundeter Entwickler konnte mir auch nicht helfen und die dev-Anleitungen sind mir keine Hilfe, da ich kein dev bin. Also die Antworten mögen da sein, mangels Verständnis sehe ich sie leider nicht.

Ich nutze z. B. dein Light / Project Template für eine Seite.
In General Data and Files habe ich unter Default Template Settings -> Items Header die drei jQuery Zeilen eingefügt.

Wo soll ich dann das @{ text | Automad/Lightbox | markdown } einfügen?
In der packages/standard/light/project.php als

<@ ../templates/project.php @>
<body>
    @{ text | Automad/Lightbox | markdown } 
</body>

funktioniert es leider nicht.

Muss man noch etwas anderes beachten damit die Bilder, die ich per Markdown einfüge auch mit der Lightbox angezeigt werden?
Oder finde ich zumindest irgendwo Anleitungen, die sich nicht an Entwickler richten?
Sorry für das erneute fragen, aber das Thema lässt mich seit Monaten nicht los und ich weiß einfach nicht was ich falsch mache.

Darko

I finaly found the solution.
If anyone should have the same problems like I did:
Besides the code in the head of your page, you need to put the
@{ text | Automad/Lightbox | markdown }
like described in the php-file of the theme you're using (e.g. packages/standard/mytheme/example-themename.php).
But you must add something to "text" like:
@{ textLbx | Automad/Lightbox | markdown }
In this example the "Lbx" is your variable.
If you have done everything correct you should see after a reload a new content area in the backend of your site, that is called in this example "Text Lbx". There you can insert your markdown to the desired pictures and they will be shown with the Lightbox feature.

I did not manage to get the Lightbox working in the "Main" content of the Light template. Maybe someone can help me, how to manage this?

Somehow it seems, that the Lightbox isn't working correct with the Light theme:
The pictures are shown the same smaller size when using the resizing like in the example
![](big-image.jpg?200x100)
The pictures are also just placed over the page by the lightbox, so you still see the whole page in the background. And I could not get the Lightbox to show any captions.
I think this is all happenning because I am using a copy of the Light theme and just adjusting it to my needs as far my knowledge allows it :-)
Maybe someone can give me some hints how to find a solution.