9. Januar 2021 - Lesezeit: ~1 Minute

9. Januar 2021 - Lesezeit: 5 Minuten

Lightbox and gallery based on the lightbox script by Lokesh Dhakar.

Add a lightbox with the following steps.

1. Upload an image and insert it.

2. Add a link to the image with the attributes "data-lightbox" and "data-title":

<a href="" data-lightbox="" data-title=""><img src="[path to the image]"</a>

3. Copy the link of the image and add it as value of the attribute "href", add a unique name for the image as value to the attribute "data-lightbox" and some text as value to the attribute "data-title", if you want to show a caption:

<a href="[path to the image]/image-1.jpg" data-lightbox="image-1"><img src="[path to the image]/image-1.jpg"></a>

Examples:

<a href="https://mydomain.com/bl-content/uploads/pages/6face7d58b0bcc241c7e881cecabb25d/image-1.jpg" data-lightbox="image-1" data-title="My caption"> <img src="https://mydomain.com/bl-content/uploads/pages/6face7d58b0bcc241c7e881cecabb25d/image-1.jpg"></a>

or

<a href="/bl-content/uploads/pages/6face7d58b0bcc241c7e881cecabb25d/image-1.jpg" data-lightbox="image-1" data-title="My caption"><img src="/bl-content/uploads/pages/6face7d58b0bcc241c7e881cecabb25d/image-1.jpg"></a>

Important: The link to the image must contain the path to the directory, where it is stored, either absolute (https://mydomain.com/bl-content/uploads/pages/[ID of the page]/) or relative (/bl-content/uploads/pages/[ID of the page]/).

Gallery

To show a group of images as gallery use the same value for the attribute "data-lightbox" for all images.

Examples:

<a href="https://mydomain.com/bl-content/uploads/pages/6face7d58b0bcc241c7e881cecabb25d/image-2.jpg" data-lightbox="gallery"><img src="https://mydomain.com/bl-content/uploads/pages/6face7d58b0bcc241c7e881cecabb25d/image-2.jpg"></a>

<a href="https://mydomain.com/bl-content/uploads/pages/6face7d58b0bcc241c7e881cecabb25d/image-3.jpg" data-lightbox="gallery"><img src="https://mydomain.com/bl-content/uploads/pages/6face7d58b0bcc241c7e881cecabb25d/image-3.jpg"></a>

<a href="https://mydomain.com/bl-content/uploads/pages/6face7d58b0bcc241c7e881cecabb25d/image-4.jpg" data-lightbox="gallery"><img src="https://mydomain.com/bl-content/uploads/pages/6face7d58b0bcc241c7e881cecabb25d/image-4.jpg"></a>

or

<a href="/bl-content/uploads/pages/6face7d58b0bcc241c7e881cecabb25d/image-2.jpg" data-lightbox="gallery"><img src="/bl-content/uploads/pages/6face7d58b0bcc241c7e881cecabb25d/image-2.jpg"></a>

<a href="/bl-content/uploads/pages/6face7d58b0bcc241c7e881cecabb25d/image-3.jpg" data-lightbox="gallery"><img src="/bl-content/uploads/pages/6face7d58b0bcc241c7e881cecabb25d/image-3.jpg"></a>

<a href="/bl-content/uploads/pages/6face7d58b0bcc241c7e881cecabb25d/image-4.jpg" data-lightbox="gallery"><img src="/bl-content/uploads/pages/6face7d58b0bcc241c7e881cecabb25d/image-4.jpg"></a>

Important: The link to the image must contain the path to the directory, where it is stored, either absolute (https://mydomain.com/bl-content/uploads/pages/[ID of the page]/) or relative (/bl-content/uploads/pages/[ID of the page]/).

Website

Website of the script with more information:

http://lokeshdhakar.com/projects/lightbox2/

9. Januar 2021 - Lesezeit: 2 Minuten

Ergänzungen und Änderungen in bludit:

1. In Themes "blogx" head.php Einfügung des custom.css
   

   <!-- Include custom CSS Styles from this theme -->
   <?php echo Theme::css('css/custom.css'); ?>​

2. Verschiedene Ergänzungen im neuen custom.css
   

   .bg-dark {
       background-color: #345b92  !important;
   }
   .navbar-dark .navbar-nav .nav-link {
       color: rgba(255,255,255,0.8);
   }​

3. Im Plugin "Sniker" plugin.php Link nach Google entfernt¹
   

    <!--       <script src="https://www.google.com/recaptcha/api.js" async defer></script> -->​

4. Im Plugin "Sniker" /system/class.comment.php Link zu Gravatar durch Libravatar.org ersetzt¹
   

    // Return Gravatar
               if(sn_config("frontend_avatar") === "gravatar"){
                   $hash = md5(strtolower(trim($this->email())));
                   return "https://cdn.libravatar.org/avatar/{$hash}?s={$size}&d=" . sn_config("frontend_gravatar");
               }​

5. Zusätzliche Plugins
   – Sniker
   – Prism
   – Open Graph
   – TinyMCEFileman
   
   
6. Bei Sniker Sprachdatei de_DE.json auf de_CH.json kopiert

¹⁾ Dank an @nipos@social.avareborn.de für den Tipp

8. Januar 2021 - Lesezeit: ~1 Minute

Nach der Erfahrung von gestern: Öfters mal ein Backup machen, das Plugin ist ja vorhanden, man müsste nur hin und wieder daran denken und das Plugin starten...

8. Januar 2021 - Lesezeit: ~1 Minute

Damit für OG (Open Graph) auch etwas in der Beschreibung steht, muss im Editor von Bludit unter "Einstellungen" ein entsprechender Eintrag gemacht werden. Sonst steht in dieser Variablen einfach nichts und der OG-Link sieht dann nicht wirklich so toll aus.