Unique identifier for images

[eutervogel]

Hi, 

I want to build a likesystem for images on my page. 

I've added a field called likes to my imagefield using ImageExtra module.

 

Now I have this field in all images in my gallery.
So far so good, but how can I update that field using the API?

If you hover a image a heart-button appears, If you click this heart, the likevalue should increase by one.

 

But how to identify which image is clicked, since there are no IDs for images. 

So the question is, how to identify an image inside a images field with lots of images?

 

I hope you could understand by brilliant english

Thanks in advance.

[eutervogel]

And for some reason this:

$page->galerie->get("name=rugen.jpg");

 always returns null.

[kongondo]

Images and Files do not have unique identifiers as such. Did you generate the gallery yourself? If yes, then you can assign 'UIDs' yourself. Here are some alternatives:

1. All images have a sort order. You can use that, although, if the order changes, that might distort previous likes count.
2. You can use image names as the UIDs...i.e. the my image_0x260_.jpg
3. Similar to sort, when outputting your images, use a counter $i; $i++; and use that with ProcessWire eq(n) to get the image you want
4. One page for each image. The page ID is the UID.

Sorry, I am in a hurry, can't explain further...

Edited January 8, 2018 by kongondo

[flydev]

5 minutes ago, eutervogel said:

So the question is, how to identify an image inside a images field with lots of images?

Two ideas, the first one, you can make a unique name for each image and identify them by their name. But eh.. if you can't control the image's name (eg: because there are some others editors) then you must go for the second.

The second, use a custom field - ID - on your image field and in your loop (the one which iterate all image to make the gallery), write the ID field value as data attribute to the images.

<?php
foreach($images as $image) {
    echo "<img src='$image->url()' data-id='$image->ID'>";
}

 

To automate the update of the custom ID field when images are added to the image field, you will have to hook and do your logic inside the hook: checking for existing ID and assigning a new one.

[eutervogel]

Thanks for your answer flydev,

I think adding a custom field for IDs would do the job. 

 

But,
 

Quote

To automate the update of the custom ID field when images are added to the image field, you will have to hook and do your logic inside the hook: checking for existing ID and assigning a new one.

I don't have any idea to do that. Can you please point me in the right direction?

[Soma]

There's no image ID, but the page ID plus the image name are unique. Also you code example works fine.

You could use a <img src="xxx/some.jpg" data-pageid="1001" data-imageid="some.jpg"> 

Then you know which page and image it is. 

$image = $pages->get(pageid)->images->get("name=imageid");

No need for extras fields or hooks.

[adrian]

You might also find https://processwire.com/talk/topic/4865-custom-upload-names/ useful - that way you can control the name of each image on the page and also append an ID to the end of the name using the ### formatting option.

[flydev]

2 hours ago, eutervogel said:

I don't have any idea to do that. Can you please point me in the right direction?

There is the solution with the hook.

In ready.php put the following code :

 

wire()->addHookBefore('InputfieldFile::fileAdded', function($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', '<')) { // horst code
        $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+ ??)
    }

    if($p->id == 1029) { // adjust page id which contain the gallery image field

        $image_id = 0;
        foreach($p->gallery as $image) {
            if(!empty($image->image_id)) $image_id = $image->image_id;
            $newimage = $image;
        }
        if(isset($image_id)) $image_id++;             // increment id
        else $image_id = 0;
        $p->get('gallery')->trackChange('image_id');  // prepare page to keep track for changes
        $newimage->set('image_id', $image_id);        // set the id
        $p->save('gallery');                          // save the field
    }

});

 

result :