Jump to content

Tagging multiple images


Go to solution Solved by horst,

Recommended Posts

Hello!

I just found processwire yesterday (actually i heard about it before, but never looked into it) and installed it to play around.

I'm really impressed, as a guy who only used wordpress i like it very much and i tried to replicate one of my sites in processwire and so far it seems doable, the taxonomies will be a little tricky i think.

Now to the main point, i've read a blog post here giving some tips, one tip was to use only one image field and to group images by tags.

The problem: there doesn't seem to be a way to add a tag to multiple images at once, making the process inconvenient.

Would it be possible to add a prompt for defining a tag before selecting the images and the uploaded images will have that tag.

Link to post
Share on other sites

Hi welcome to the forums,

I never dived into this, because I prepare my images before uploading and all other is done automagically. There are also solutions like somas Images Manager, and others too. But I don't know what or how these tools work out in this regard.

But just a question: "Would you be able to add IPTC keywords locally to your images before uploading?" If yes, then I can give you a codesnippet that imports all keywords into image tags, and (optionally) another IPTC field into the image description, on uploading.

Locally programs can be Adobe Bridge, IrfanView, and many others.

Link to post
Share on other sites
7 minutes ago, horst said:

Would you be able to add IPTC keywords locally to your images before uploading?

I probably could, but i don't think this will improve my work flow.

But still, please share the code.

Link to post
Share on other sites
  • Solution

Ok. :)

 

// code snippet that belongs into the site/ready.php file:

// a hook that reads IPTC keywords on images upload and populates them into the images tags field
$wire->addHookBefore("InputfieldFile::fileAdded", function(HookEvent $event) {

    $inputfield = $event->object;                      // handle to the image field
    if(!$inputfield instanceof InputfieldImage) {      // we need an images field, not a file field
        return;                                        // early return
    }

    if(version_compare(wire('config')->version, '2.8.0', '<')) {
        $p = $inputfield->value['page'];               // get the page, PW < 2.8
    } else {
        $p = $inputfield->attributes['value']->page;   // get the page, PW >= 2.8 | 3.0 (or only from 3.0.17+ ??)
    }

    $image = $event->argumentsByName('pagefile');      // get the image

    // check for IPTC data
    $additionalInfo = array();
    $info = @getimagesize($image->filename, $additionalInfo); // read image markers
    if($info !== false && is_array($additionalInfo) && isset($additionalInfo['APP13'])) { // APP13 is the IPTC marker
        $iptc = iptcparse($additionalInfo['APP13']);
        // IPTC field 025 = keywords collection
        if(is_array($iptc) && isset($iptc['2#025']) && is_array($iptc['2#025']) && count($iptc['2#025']) > 0) {
            $tags = array();
            foreach($iptc['2#025'] as $k => $v) {
                if(empty($v)) continue;
                $tags[] = trim(strtolower($v));
            }
            $p->get($inputfield->name)->trackChange('tags');  // prepare page to keep track for changes
            $image->tags = implode(' ', $tags);               // add the tags list as string
            $p->save($inputfield->name);                      // save the page images field
        }
    }
});

 

EDIT:

code was modified to detect $page also with PW version >= 2.8 | 3.0

EDIT 2:

Now it is working for all PW versions again. Had have the wrong HookEvent used here (addHokkAfter, but must be: addHookBefore!)

  • Like 3
Link to post
Share on other sites
15 minutes ago, fbg13 said:

@horst $p seems to be false for me

 

Why? This code is running for me over different PW versions from 2.3 till today. (at least 2.7.2)

What PW version are you on?

Link to post
Share on other sites

Oh, you were right. WIth PW 3, p was false. I have updated the snippet and the page is now detected. But unfortunately, the tags don't get saved, what puzzles me a bit. ???

I try to find out what may have changed here and will update the code then.

We have had changes to the images field with PW 3.17 / 3.18. Maybe that's why it is different now.

Link to post
Share on other sites

@horst i changed to v2.7 to test it and changed the code to add the tag if the file name matches a string:

//$wire->addHookAfter("InputfieldFile::fileAdded", function(HookEvent $event) {
$wire->addHookBefore("InputfieldFile::fileAdded", function(HookEvent $event) {

    $log = wire('log');
    $inputfield = $event->object;                     // handle to the image field
    if(!$inputfield instanceof InputfieldImage) {     // we need an images field, not a file field
        return;                                       // early return
    }
    $p = $inputfield->value['page'];                  // get the page
    $image = $event->argumentsByName('pagefile');     // get the image

	if(strpos($image->filename, 'string'))
	{
		$log->error('match');
		$p->get($inputfield->name)->trackChange('tags');  // prepare page to keep track for changes
		$image->tags = 'sss';              // add the tags list as string
		$p->save($inputfield->name);       // save the page images field
	}else{
		$log->error('no match');
	}

});

But the tag is not added, am I missing something?

The error log show that the string matches.

 

Link to post
Share on other sites

I have updated the code in the first post of it to also work with PW 3. But now I also get the tags not saved. I have asked on GitHub why this is not working anymore: https://github.com/ryancramerdesign/ProcessWire/issues/1920

I will investigate a bit more, but also hope that someone reads it on Github and can answer it. I have tested the code on a site with PW 2.7.2 and it worked for me before I posted it. I also will test your version on that site and report back.

Link to post
Share on other sites

Now I found out that the Tags get saved for me also under PW 3, but the form fields (Tags, Descriptions) got not populated via AJAX, so when the page finally gots saved in the page editor, the previously saved values get blanked out again.

I HAVE USED THE WRONG HOOK! Damn! It has to be addHookBefore and not addHookAfter.

I changed the code in the first post so that it now is working with PW 2 and PW 3.

Sorry for the confusion. (I copied the function out of an old module into a $wire->hook for site/ready.php. Hereby I must have accidently changed to the wrong hook event. Damn!)

  • Like 5
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 spercy16
      These issues should be fairly easy for any intermediate to advanced ProcessWire developer to answer. I'm new to PHP and relatively new to ProcessWire and just need a bit of help. What I'm trying to do is bring in a couple of cards from my Projects page to display on my home page. I finally got the code right to bring in the cards but right now they're using my original images instead of my resized "variations". So firstly, I would like to know how to reference the variations of my images instead of using the original. Secondly, I need to grab only four of the cards from the Project page and not import in all ten. It should be just two small changes to my code to do these things (I would imagine). Here is the code I currently have for that section:
      <?php // https://processwire.com/api/arrays/ // check if the array of images has items if (count($pages->get("/projects/")->images)) : // get array of images from the field $images = $pages->get("/projects/")->images; $count = 0; // iterate over each one foreach ($images as $image) : $count++; $sectionText = $pages->get("/projects/")->get("paragraph_$count"); $img = $image; $buttonCode = $pages->get("/projects/")->get("url_$count"); ?> <span id="card<?php echo $count?>" class="card"> <img class="cardThumb" src="<?php echo $img->url; ?>" alt="<?php echo $image->description; ?> Thumbnail" /> <div class="cardBody"> <div class="cardText"> <h2><?php echo $img->description; ?></h2> <?php echo $sectionText; ?> </div> <div class="primaryBtn"> <a href="https://www.paypal.com/donate?hosted_button_id= <?php echo $buttonCode; ?> &source=url"> <button> <i class="fas fa-donate"></i> Donate </button> </a> </div> </div> </span> <?php endforeach; endif; ?> Thanks in advance for any help!
    • By skeltern
      WebP image support is great and works fine. But once created I've issues to get rid of all API generated WebP variations.
      The backend image field variations "Delete" works and I can remove all variations JPEG plus WebP. Image list is clean but all WebP API variations are still stored in file system (for instance files/12345/84.900x675.webp etc). I can only use ImageSizer with temp 'force' option to request fresh WebP variations or have to delete WebP files from folders. No other way so far. Tested with 2 sites and latest master PW 3.0.165.
      Is there somewhere a "magic button" or config/setup thing to solve my sticky WebP issue?
    • By psy
      I've searched, and maybe missed, the solution. I have a 'normal' images field and uploading images with a file size greater than 10Kb is fine. Any image size smaller results in the never-ending spinner and no upload.
      No min/max width/height set on image uploads in admin, ie just the defaults.
      Any ideas on how to fix?
      Using:
      PW: 3.0.175
      PHP: 7.3
      Marking it as "Resolved" rather than "Solved" as it auto-magically fixed itself. No idea whether PW, PHP, or just an internet hiccough... All good now 🤞
    • By totoff
      Dear all,
      tomorrow I'll have to introduce some editors on how to upload and edit images in image fields in Processwire. The site in question is quite image rich and I've spent some time to serve the appropriate images via scrcset already cropped for different screen sizes.
      However, the backend offers a lot of possibilities to manipulate images and most of them I'm not familiar with because as a developer I've never spent much thinking on what all the features might be good for … Yet I'm concerned that my editors work on images in the backend may interfere with my optimization strategies in the templates.
      Is there a general rule of thumb what content editors should do or not do with images in order not to break srcset strategies etc.? Maybe there is already a source of information you could point me to?
      Your recommendations are much appreciated!
    • By totoff
      Dear all,
      I'm upgrading an older side with the new custom fields for images feature as of 3.0.142. My image field is set to "Automatic" and holds a bunch of images together with their respective description on each page. New custom fields include "caption" among others and to make my live easier I I'm trying to populate "caption" with the value from the (default) description field. But unfortunately I can't seem to find out how to save the newly set values. This is my code:
      <?php foreach (page()->images as $image) { $image->set('caption', $image->description); bd($image->caption); echo files()->render("markup/views/view-card-image-fancybox.php", array('image'=>$image)); } ?> <?php $page->save(); bd($page->save()); ?> This sets the value as intended (see screenshot) but doesn't save it permanently to the database. What am I doing wrong?
      Thanks!
       

×
×
  • Create New...