Jump to content

How to wrap all images in an a tag


tires
 Share

Recommended Posts

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!

Link to comment
Share on other sites

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...

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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!
 

 

Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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!!!

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...