How to wrap all images in an a tag

[tires]

Hi!

I want to add an automatic lightbox function to my page.
Therefore i want to wrap all my "img" tags (from all image and textarea/ckeditor fields) into an "a" tag that is linked to the original image.

In the end this:

<img src="/path/to/myimage_300.jpg">

should look like this:

<a href="/path/to/myimage.jpg" class="lightboxclass"><img src="/path/to/myimage_300.jpg"></a>

What is the best way to archive this?

Thank!

[kongondo]

29 minutes ago, tires said:

What is the best way to archive this?

Most likely a Textformatter module. I don't know if there is one already in the module's directory. You might need (to make) a custom one. Sorry, in a hurry, but hopefully this gets you started...

[tires]

Ok, i gave it a try with not much success.

Here is my textformatter so far.

<?php namespace ProcessWire;

/**
 * Wraps CKEditor image into a tag 
 * eg <img src="/path/to/myimage_300.jpg">
 * to <a href="/path/to/myimage.jpg" class="lightbox"><img src="/path/to/myimage_300.jpg"></a>
 */

class TextformatterLightboxImg extends Textformatter {

  public static function getModuleInfo() {
    return array(
      'title' => 'Wraps img tag with a tag', 
      'version' => '1.0.0', 
      'summary' => "Wraps all img tags with a tag with class lightbox and links it to original image", 
    );
  }

  // public function formatValue(Page $page, Field $field, $value) {
  public function format(&$str) {
    $originalimg = $page->bild->url;
    $str = preg_replace("{<img\\s*(.*?)src=('.*?'|\".*?\"|[^\\s]+)(.*?)\\s*/?>}ims", '<a href="'.$originalimg.'" class="lightbox"><img $1src=$2 $3/></a>', $str);
  }
}

I get the error  message "Notice: Undefined variable" for page, bild and id.
Could you give me an advice?

Thanks!

[tires]

Any ideas?
Or is this the wrong way to do it?

Thanks!

[BillH]

I think this will tell you what you need:

 

[Robin S]

Here is a simple proof-of-concept Textformatter that might help:

You can adapt the example in the readme to add a lightbox link to your images.

[tires]

Thanks a lot!

I just don't understand, how i get to the original image.

$img->outertext = "<a class='lightboxclass' href='MY FULLSIZE IMAGE'>MY SMALL IMAGE</a>";
    

Thanks!
 

 

[Robin S]

1 hour ago, tires said:

I just don't understand, how i get to the original image.

You will get the URL to the image variation (small image) from the src attribute of the <img> tag. When you have that variation URL you can use it with PagefilesManager::getFile() to get the Pageimage (see here), and from the Pageimage you can get the original URL by $pageimage->url

[tires]

13 hours ago, Robin S said:

You will get the URL to the image variation (small image) from the src attribute of the <img> tag. When you have that variation URL you can use it with PagefilesManager::getFile() to get the Pageimage (see here), and from the Pageimage you can get the original URL by $pageimage->url

Thanks a lot!!!
It works ... after a while of thinking and testing!

Here is the code of my ready.php (located in "site" directory).
The module TextformatterProcessImages has to be installed.
More Details about the module are here https://github.com/Toutouwai/TextformatterProcessImages/tree/7068b7864dd9e78c9cc4a76d6790957a41198dda

<?php
$wire->addHookAfter('TextformatterProcessImages::processImg', function(HookEvent $event) {

    // The Simple HTML DOM node for the <img> tag
    /** @var \simple_html_dom_node $img */
    $img = $event->arguments(0);
    // The Pageimage in the <img> src, if any (will be null for external images)
    /** @var Pageimage $pageimage */
    $pageimage = $event->arguments(1);
    // The Page object in case you need it
    /** @var Page $page */
    $page = $event->arguments(2);
    // The Field object in case you need it
    /** @var Field $field */
    $field = $event->arguments(3);

    // Only for images that have a src corresponding to a PW Pageimage
    if($pageimage) {
        
        // The original full size image
        $imgoriginal = $pageimage;
        
        // Small image with a width of 390 px
        $imgsmall = $pageimage->width(390);
        
        // Set the code for the lightbox link and image
        $img->outertext = "<a data-lightbox='image-1' title='zoom in' href='{$imgoriginal->url}'><img alt='{$pageimage->description}' src='{$imgsmall->url}' width='{$imgsmall->width}'></a>";
    }
    
});
?>

THANKS!!!