Hello,

I'm using Automad with the theme Bulma. I have installed the automad/lightbox package and it works well with inline images in the content. But, I would like to find a way to open it from a text link in the content.

My use case is that I don't want to display inline images inside a text content, but only their titles list. And then I would like to open images in the Lightbox modal by clicking on this titles.

There is a way to do it?

Thank you ✌️

  • mad replied to this.

    bruno Hi, by default the lightbox extension automatically searches for images and uses their URL for the modal window. I think you will have to touch up that extension to make it work with normal links. Shouldn't be too hard since it is a very simple extension. You will probably only have to change the PHP part to take the href attribute of links instead. But I didn't try myself yet.

      mad Thank you for your answer. Unfortunately I'm not very familiar with php. The file Lightbox.php is very short, but I'm not sure to identify where is defined to use only images to open the Lightbox and how I could enhance it 😶

      class Lightbox {
      
      	public function Lightbox($str) {
      
      		// The pattern skips images already wrapped in a link.
      		$regex = '/(?<!\[)\!\[[^\]]*\]\(([\w\-\/\?\&\=\:\.]+)(?:\?(\d+)x(\d+))?\)/i';
      		$str = preg_replace_callback($regex, function($match) {
      
      			$file = AM_BASE_DIR . $match[1];
      			$link = $match[1];
      			$caption = '';
      
      			if (is_readable($file)) {
      				
      				$caption = Core\Str::stripTags(Core\Parse::caption($file));
      
      				if (!empty($match[2]) && !empty($match[3])) {
      					$image = new Core\Image($file, $match[2], $match[3], true);
      					$link = $image->file;
      				}
      
      			}
      
      			return '<a href="' . $match[1] . '" class="automad-lightbox-item" data-caption="' . $caption . '"><img src="' . $link . '"></a>';
      
      		}, $str);
      
      		return $str;;
      
      	}
      
      }
      • mad replied to this.

        bruno Hi, the regex on top matches all Markdown images that are not links. That one should be changed to match Markdown links to image URLs. Then the return value has to be changed to just be a link with the original text instead of an image.

        Newest Discussions