Jump to content

Tagging multiple images


Recommended Posts


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 comment
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 comment
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 comment
Share on other sites

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



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


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 comment
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 comment
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'))
		$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
		$log->error('no match');


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

The error log show that the string matches.


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

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By Robin S
      Select Images
      An inputfield that allows the visual selection and sorting of images, intended for use with the FieldtypeDynamicOptions module. Together these modules can be used to create a kind of "image reference" field.

      Integration with FieldtypeDynamicOptions
      InputfieldSelectImages was developed to be used together with FieldtypeDynamicOptions (v0.1.3 or newer):
      Create a Dynamic Options field. Choose "Select Images" as the "Inputfield type". Select Images appears in the "Multiple item selection" category but you can set "Maximum number of items" to 1 if you want to use Select Images for single image selections. Define selectable options for the field via a FieldtypeDynamicOptions::getSelectableOptions hook. See some examples below. FieldtypeDynamicOptions is recommended but is not a strict requirement for installing InputfieldSelectImages in case you want to use an alternative way to store the field data.
      Selection of Pageimages
      In this example the field allows selection of Pageimages that are in the "images" field of the home page.
      The field will store URLs to the Pageimages so it works as a kind of "image reference" field. You can use the "Format as Pagefile/Pageimage object(s)" option for the Dynamic Options field to have the formatted value of the field be automatically converted from the stored Pageimage URLs to Pageimage objects.
      $wire->addHookAfter('FieldtypeDynamicOptions::getSelectableOptions', function(HookEvent $event) { // The page being edited $page = $event->arguments(0); // The Dynamic Options field $field = $event->arguments(1); // For a field named "select_images" if($field->name === 'select_images') { $options = []; // Get Pageimages within the "images" field on the home page foreach($event->wire()->pages(1)->images as $image) { // Add an option for each Pageimage // When the key is a Pageimage URL the inputfield will automatically create a thumbnail // In this example the label includes the basename and the filesize /** @var Pageimage $image */ $options[$image->url] = "{$image->basename}<br>{$image->filesizeStr}"; } $event->return = $options; } }); Selection of image files not associated with a Page
      When not working with Pageimages you must add a "data-thumb" attribute for each selectable option which contains a URL to a thumbnail/image.
      In this example the field allows selection of image files in a "/pics/" folder which is in the site root.
      $wire->addHookAfter('FieldtypeDynamicOptions::getSelectableOptions', function(HookEvent $event) { // The page being edited $page = $event->arguments(0); // The Dynamic Options field $field = $event->arguments(1); // For a field named "select_images" if($field->name === 'select_images') { $options = []; // Get files that are in the /pics/ folder $root = $event->wire()->config->paths->root; $path = $root . 'pics/'; $files = $event->wire()->files->find($path); // Add an option for each file foreach($files as $file) { $basename = str_replace($path, '', $file); $url = str_replace($root, '/', $file); // The value must be an array with the following structure... $options[$url] = [ // The label for the image 'label' => $basename, 'attributes' => [ // An image URL in the "data-thumb" attribute 'data-thumb' => $url, ], ]; } $event->return = $options; } }); The field values don't have to be image URLs
      The values stored by the Dynamic Options field don't have to be image URLs. For example, you could use the images to represent different layout options for a page, or to represent widgets that will be inserted on the page.
      Also, you can use external URLs for the thumbnails. In the example below the options "calm" and "crazy" are represented by thumbnails from placecage.com.
      $wire->addHookAfter('FieldtypeDynamicOptions::getSelectableOptions', function(HookEvent $event) { // The page being edited $page = $event->arguments(0); // The Dynamic Options field $field = $event->arguments(1); // For a field named "calm_or_crazy" if($field->name === 'calm_or_crazy') { $options = []; // Add options that are illustrated with thumbnails from placecage.com $options['calm'] = [ // The label for the option 'label' => 'Nicolas Cage is a calm man', 'attributes' => [ // An image URL in the "data-thumb" attribute 'data-thumb' => 'https://www.placecage.com/260/260', ] ]; $options['crazy'] = [ // The label for the option 'label' => 'Nicolas Cage is a crazy man', 'attributes' => [ // An image URL in the "data-thumb" attribute 'data-thumb' => 'https://www.placecage.com/c/260/260', ] ]; $event->return = $options; } }); Field configuration
      You can define labels for the button, notices, etc, that are used within the inputfield if the defaults don't suit.

    • By Robin S
      Process Images
      A basic, proof-of-concept Textformatter module for ProcessWire. When the Textformatter is applied to a rich text field it uses Simple HTML DOM to find <img> tags in the field value and passes each img node through a hookable TextformatterProcessImages::processImg() method.
      This is a very simple module that doesn't have any configurable settings and doesn't do anything to the field value unless you hook the TextformatterProcessImages::processImg() method.
      Hook example
      When added to /site/ready.php the hook below will replace any Pageimages in a rich text field with a 250px square variation and wrap the <img> tag in a link to the original full-size image.
      For help with Simple HTML DOM refer to its documentation.
      $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) { // Set the src to a 250x250 variation $img->src = $pageimage->size(250,250)->url; // Wrap the img in a lightbox link to the original $img->outertext = "<a class='lightboxclass' href='{$pageimage->url}'>{$img->outertext}</a>"; } });  
      GitHub: https://github.com/Toutouwai/TextformatterProcessImages
      Modules directory: https://processwire.com/modules/textformatter-process-images/
    • 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?
      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 🤞
  • Create New...