Jump to content
picarica

[SOLVED] How do i add watermakr to image? cant seem to make it work with PW

Recommended Posts

so hello i am trying to combine my whole ass gallery with custom created watermark, i wanted to combine my images with simple text little opaque but that seemed harder and i couldnt make it work, well i cant make this work either, how are you handling watermarks? i would prefer if it would be plain PHP no imagemagick or some custom plugins scripts, but if neccesary i wont deny.

so here's my code

    $pa = $pages->find("template=basic-page|art_gallery, images.tags!=''");
    /* $pa = $pages->find("has_parent!=2,id!=2|7,status<".Page::statusTrash.",include=all"); */
    echo "<div BRUUH class='row gtr-50 gtr-uniform js-filter' id='gal'  >";
    foreach ($pa as $p) {
        foreach($p->images as $image) {
            $obrazok = $image->url;
            $image = imagecreatefromjpeg($obrazok);
            $frame = imagecreatefromjpeg($pages->get('/settings/')->watermark->url);
           /* echo $image;
           echo $frame; */
 
            # If you know your originals are of type PNG.
            
            imagecopymerge($image, $frame, 0, 0, 0, 0, 50, 50, 100);
            
            # Output straight to the browser.
            $img = imagepng($image);
 
 
            $options = array('quality' => 70, 'upscaling' => true, 'cropping' => 'center', 'sharpening'=>'medium');
            $thumb = $img->size(400, 300, $options);
            $large = $img->size(1200, 0, $options);
            echo "<div class='$image->tags' class='col-4'>";
            echo "<span style='overflow:hidden;'class='image fit'>";
            echo "<a href='$large->url'>";
            echo "<img class='uk-transform-origin-top-right' uk-scrollspy='cls: uk-animation-fade; repeat: false' src='$thumb->url'  alt='$image->tags'>";
            echo "</a>";
            echo "</span>";
            echo "</div>";
        }
    };

 

Edited by picarica
made is solved

Share this post


Link to post
Share on other sites

Not plain PHP, but there are a couple of ProcessWire modules that can help you here:

  • Page Image Manipulator 2 has multiple methods for watermarking images.
  • AvbImage provides a method called insert(), which (to my best understanding, haven't used it myself) applies another image on top of the first one (so, basically, creates a watermark).
  • Like 1

Share this post


Link to post
Share on other sites

If you have a whole ass gallery (not sure, but I think that is a lot 😃) you may want to consider batch processing your images outside of Processwire. I have a few *nix shell scripts that watermark my whole ass gallery. Not poking fun, that is just really funny. Let me know if you would like to take a look at them.

Share this post


Link to post
Share on other sites

With the module PageimageManipulator you can find a description for "watermarkLogo" that will result in a code like this in your template file:

$frame = $pages->get('/settings/')->watermark;
foreach($images as $image) {
    $wmImage = $image->pim2Load('wm', ['quality'=>100, 'sharpening'=>'none', 'defaultGamma'=>-1])->watermarkLogo($frame, $position='NW', $padding=1.5)->pimSave();

	// do something with $wmImage

}

You can find the API explained here (look out for watermarkLogo): 

 

And there is a post about simple text here: https://processwire.com/talk/topic/4264-page-image-manipulator-1/?tab=comments#comment-41989

 

But if you want to use simple text on the images, it would be better not to use my module. Instead try Ukyos avbImage! There is more and better support for simple text watermarks:

 

  • Like 3

Share this post


Link to post
Share on other sites
6 hours ago, teppo said:

Not plain PHP, but there are a couple of ProcessWire modules that can help you here:

  • Page Image Manipulator 2 has multiple methods for watermarking images.
  • AvbImage provides a method called insert(), which (to my best understanding, haven't used it myself) applies another image on top of the first one (so, basically, creates a watermark).

avbimage seems fine but i have problems implementing it into my code beacuse
 

                $insert = $page->images()->first()->image()->insert($pages->get('/settings/')->watermark, 'bottom-right', 10, 10);
                echo "<img src='{$insert->encode('data-url')}' />";

cannot work so i edited it with

$insert = $image->images()->first()->image()->insert($pages->get('/settings/')->watermark, 'bottom-right', 10, 10);

yet i still get error

Breaking news… Error: Exception: Method Pageimage::images does not exist or is not callable in this context (in wire/core/Wire.php line 544)

not sure what i am doing wrong, i dont get it why there is images function the first function then AGAIN image function? is that all neccessary when i have it in foreach

so in my logic it should be like

$insert = $image->image()->insert($pages->get('/settings/')->watermark, 'bottom-right', 10, 10);

yet still error
 

Arrgh… Error: Exception: Image source not readable (in site-artgallerytaube_eu/modules/AvbImage/vendor/intervention/image/src/Intervention/Image/AbstractDecoder.php line 302)

not sure what to do with it.

 

5 hours ago, rick said:

If you have a whole ass gallery (not sure, but I think that is a lot 😃) you may want to consider batch processing your images outside of Processwire. I have a few *nix shell scripts that watermark my whole ass gallery. Not poking fun, that is just really funny. Let me know if you would like to take a look at them.

thanks but no thanks i need to processwire handle it, there will be over 1000 images and continuing to grow every day, and i want to make it work now and not bother with it never again. but yeah with unix scripts is easy as pie with imagemagick but i want it plainly php or somewhint to do with PW

 

4 hours ago, horst said:

With the module PageimageManipulator you can find a description for "watermarkLogo" that will result in a code like this in your template file:


$frame = $pages->get('/settings/')->watermark;
foreach($images as $image) {
    $wmImage = $image->pim2Load('wm', ['quality'=>100, 'sharpening'=>'none', 'defaultGamma'=>-1])->watermarkLogo($frame, $position='NW', $padding=1.5)->pimSave();

	// do something with $wmImage

}

You can find the API explained here (look out for watermarkLogo): 

 

And there is a post about simple text here: https://processwire.com/talk/topic/4264-page-image-manipulator-1/?tab=comments#comment-41989

 

But if you want to use simple text on the images, it would be better not to use my module. Instead try Ukyos avbImage! There is more and better support for simple text watermarks:

 

i really like your plugin actually wanted to try it out but only found docs for pim1 and not pim2, arent there many syntax differences? i might try it out just because avbImage is doing me naughty

Share this post


Link to post
Share on other sites
4 hours ago, horst said:

With the module PageimageManipulator you can find a description for "watermarkLogo" that will result in a code like this in your template file:


$frame = $pages->get('/settings/')->watermark;
foreach($images as $image) {
    $wmImage = $image->pim2Load('wm', ['quality'=>100, 'sharpening'=>'none', 'defaultGamma'=>-1])->watermarkLogo($frame, $position='NW', $padding=1.5)->pimSave();

	// do something with $wmImage

}

You can find the API explained here (look out for watermarkLogo): 

 

And there is a post about simple text here: https://processwire.com/talk/topic/4264-page-image-manipulator-1/?tab=comments#comment-41989

 

But if you want to use simple text on the images, it would be better not to use my module. Instead try Ukyos avbImage! There is more and better support for simple text watermarks:

 

just tried yout plugin works perfectly, i used it with premade tranparent iamge but one thing doesnt work the $position='NW', i tried changing it to 'center' or 'NE' but no changes, is it working properly? it seems like its defaulting ot the top left corner

Share this post


Link to post
Share on other sites
12 hours ago, picarica said:

i tried changing it to 'center' or 'NE' but no changes, is it working properly? it seems like its defaulting ot the top left corner

It is working as expected since the positioning first was implemented. Here is the announcement post:

There is also a tip and a photoshop action for download available in the second post of the thread.

Do you use lowercase? https://github.com/horst-n/PageImageManipulator/blob/master/ImageManipulator02.class.php#L151-L162

If not please try with lowercase and report back. 

------

12 hours ago, picarica said:

but only found docs for pim1 and not pim2, arent there many syntax differences?

No there are no API differences, only the opening method is different: $image->pimLoad() becomes $image->pim2Load(). Thats all.
I changed the title of the first post for more clarity.

Share this post


Link to post
Share on other sites
1 hour ago, horst said:

It is working as expected since the positioning first was implemented. Here is the announcement post:

There is also a tip and a photoshop action for download available in the second post of the thread.

Do you use lowercase? https://github.com/horst-n/PageImageManipulator/blob/master/ImageManipulator02.class.php#L151-L162

If not please try with lowercase and report back. 

------

No there are no API differences, only the opening method is different: $image->pimLoad() becomes $image->pim2Load(). Thats all.
I changed the title of the first post for more clarity.

yes i tried anything, also there is not center in the github link u sent me, not sure what's wrong

this is the syntax                

$wmImage = $image->pim2Load('wm', ['quality'=>70, 'sharpening'=>'none', 'defaultGamma'=>-1])->watermarkLogo($frame, $position='w', $padding=1.5)->brightness(50)->pimSave();

maybe the image is weird? but is 1000×100 image. by the image i mean the watermark i used, its just text mildly edited ill post the resulting picture

Screenshot_20201024_144113.thumb.png.4ead5655a44384965631763dc596af41.png

just tried $position='center' and $position='C', it doesnt seem like updating 😕 but why no errors or logs

Share this post


Link to post
Share on other sites
45 minutes ago, picarica said:

just tried $position='center' and $position='C', it doesnt seem like updating 😕 but why no errors or logs

It seems to me (based on a very quick glance at the code) that both 'center' and 'c' are acceptable. Could you try setting it to 'center', then removing the generated image variation, and then loading the page again? My initial guess would be that the image is not changing since you're getting the previously created image back.

Alternatively you can provide a different prefix value for pim2Load; something like pim2Load('wm2', [...]).

Share this post


Link to post
Share on other sites
1 minute ago, teppo said:

It seems to me (based on a very quick glance at the code) that both 'center' and 'c' are acceptable. Could you try setting it to 'center', then removing the generated image variation, and then loading the page again? My initial guess would be that the image is not changing since you're getting the previously created image back.

Alternatively you can provide a different prefix value for pim2Load; something like pim2Load('wm2', [...]).

yep just as i thought after changing different prefix it loaded correctly, i wonder are old images stored in assets folder? if so i dont have permission to delete them, is there some option to flush old unused pics ?

Share this post


Link to post
Share on other sites
9 minutes ago, picarica said:

is there some option to flush old unused pics ?

See the API post: 

$image->pim2Load('wm')->removePimVariations() should do it, though you'd want to make sure that you don't leave this code in place longer than you need it (probably won't do a lot of harm, but it'd be pointless). I'm not sure if pim stores the images as regular variations, but if it does, you can also remove them by hand from the admin (edit the image and you should see variations somewhere in the GUI).

I wouldn't worry too much about those old variations, though. Most likely you haven't generated so many of them that they'd take considerable space on the disk, and anyone opening them accidentally is also quite unlikely.

  • Like 1

Share this post


Link to post
Share on other sites
8 hours ago, teppo said:

I'm not sure if pim stores the images as regular variations, but if it does,

yep, it stores them as regular pageimage variations and you can remove them by hand when opening "variations" in an image inputfield. You also can remove them by calling the core method $image->removeVariations(), but this also removes other variations like the adminThumbnail and maybe variations from CKE-fields and others. Therefore there is the pim2Load('ALIAS')->removePimVariations(), so that you can remove only the pimvariations for that specific alias name.

If you are in experimental mode with pim2, you have the option to load it with a second param (called $forceRecreation in the API page) that automatically refreshes this single variation. If you use a specific options array as second param with pim2Load(), you can set $forceRecreation as third param. 🙂

$image->pim2Load('wm', true)-> ...

 

  • Like 1

Share this post


Link to post
Share on other sites
On 10/24/2020 at 3:39 PM, teppo said:

See the API post: 

$image->pim2Load('wm')->removePimVariations() should do it, though you'd want to make sure that you don't leave this code in place longer than you need it (probably won't do a lot of harm, but it'd be pointless). I'm not sure if pim stores the images as regular variations, but if it does, you can also remove them by hand from the admin (edit the image and you should see variations somewhere in the GUI).

I wouldn't worry too much about those old variations, though. Most likely you haven't generated so many of them that they'd take considerable space on the disk, and anyone opening them accidentally is also quite unlikely.

yes thanks that function works perfectly, i just run it once, and generate new variations its good,  and ye i generated many i have over 200 MB of images rn

Share this post


Link to post
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

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By fruid
      I'm using custom fields for images (as mentioned here: processwire.com/blog/posts/pw-3.0.142) for a specific images-field, the images of which need to have an HTML-caption. It works fine so far. Now I'm trying to import pages that use this field. I first exported some pages of that kind to see what the spreadsheet would look like. It seems to not separate the captions for each images but instead put all images in one cell and all captions in another.
      How could I go about importing these pages and assign the captions to the images accordingly?
    • By longtom
      I'm creating this site where a 'motherpage' renders all subpages.  I switched on frontend editing to make editing as easy as possible to end-users. 
      I'm stuck on adding images to the subpages.  The frontend editor suggests to add images to the motherpage (that has no images field on it, nor should it), so it asks for another page to add the images to/from. 
      Is there a way to make the frontend-editor context aware so that it looks for images in the correct subpage? 
      I already tried the 'type C' approach and added <edit field="body" page="id">, but that doesn't seem to do the trick. 
    • By Rossie
      Hi Everyone,
      I wish to display a gallery of images from multiple pages on the site.  These images have custom fields created through page reference called 'furniture_list_type'.  Each image now has a radio button which has been selected.
      In  the example code below all images appear from the "gallery20", however the selector  "gallery20.furniture_list_type=3390" does not have any effect.  "3390" is the id of the page reference "chair" selected through the page reference.  I wish only images selected as chair to show.
      Hope someone can help with this.
       
      Thanks,
       
      Calum
       
      $imagePages = $pages->find("template=makers-child, gallery20.furniture_list_type=3390") ;                     foreach($imagePages as $p) {     echo "<ul>";     foreach($p->gallery20 as $image) {         echo "<li><img src='{$image->url}'>{$image->furniture_list_type}</li>";     }     echo "</ul>";      }
    • By daniel_puehringer
      Hey,

      so we all know about SEO and the importance of performance. Basically we do it, because if no one finds the website we just built, it´s frustrating. We all try to write clean markup, css and js code and most might have a webpack/gulp/whatever pipeline to minimize css&js.
      But when thinking about it, optimizing your pipeline might save you a few (hundreds) of kb, compared to loading an image with 1 mb that´s literally nothing and frankly just ridiculous.

      Don´t get me wrong, frontend pipelines are great and should be used, but let´s shift your "I will optimize the shit out of that 3 css lines" focus to something different: try to serve images as fast as possible, this is where the performance boost really happens.

      I´m no pro on processwire so far, but I built a very easy to use picture element, which some of you could find interesting:

      1. the picture comes with 3 different sizes: one for mobile (keep in mind the double dpi, therefore width of 828px), one for tablet and one for desktop
      2. the picture generates a webp version and the original file extension as a fallback
      3. the filesize of each element is rendered within the "data" attribute
      4. lazy loading(sooo important!!!) is done via the native 'loading="lazy"' attribute.


      Please try it out and see the difference 🙂

      I posted this so others can easily optimize their images, but I would also like to hear your suggestions in making it better. Maybe you could decrease the rendering time or maybe you have some easy improvements.

      Please let me know.

      Greetings from Austria!


       
      <picture> <source data="<?php echo($oElement->repeater_image->width(828)->webp->filesize);?>" media="(max-width: 414px)" srcset="<?php echo($oElement->repeater_image->width(828)->webp->url) ?> 2x" type="image/webp"> <source data="<?php echo($oElement->repeater_image->width(828)->filesize) ?>" media="(max-width: 414px)" srcset="<?php echo($oElement->repeater_image->width(828)->url) ?> 2x" type="image/<?php echo($oElement->repeater_image->ext)?>"> <source data="<?php echo($oElement->repeater_image->width(767)->webp->filesize) ?>" media="(min-width: 415) and (max-width: 767px)" srcset="<?php echo($oElement->repeater_image->width(767)->webp->url) ?> 2x" type="image/webp"> <source data="<?php echo($oElement->repeater_image->width(767)->filesize) ?>" media="(min-width: 415) and (max-width: 767px)" srcset="<?php echo($oElement->repeater_image->width(767)->url) ?> 2x" type="image/<?php echo($oElement->repeater_image->ext)?>"> <source data="<?php echo($oElement->repeater_image->webp->filesize) ?>" media="(min-width: 768px)" srcset="<?php echo($oElement->repeater_image->webp->url) ?>" type="image/webp"> <source data="<?php echo($oElement->repeater_image->filesize) ?>" media="(min-width: 768px)" srcset="<?php echo($oElement->repeater_image->url) ?>" type="image/<?php echo($oElement->repeater_image->ext)?>"> <img data="<?php echo($oElement->repeater_image->filesize) ?>" class="img-fluid" loading="lazy" src="<?php echo($oElement->repeater_image->url) ?>" alt="<?php echo($oElement->repeater_image->description) ?>" type="image/<?php echo($oElement->repeater_image->ext)?>"> </picture>
    • By horst
      Hi, on a site I want to disable access to original images and only allow to access thumbnails and watermarked image variations.
      EDIT:
      A good solution for protecting original images can be found a bit down in this thread:
       
      Old content of this initial post:
       
×
×
  • Create New...