Jump to content

Unique identifier for images


eutervogel
 Share

Recommended Posts

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.

likesfield.thumb.JPG.efbce2a49ab2d1565cff7dd1ddcac5b3.JPG

 

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.
heartbutton.thumb.JPG.4dff3ab7a19a086f142631af7a977eb7.JPG

 

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.

Link to comment
Share on other sites

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 by kongondo
  • Like 1
Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.

  • Like 4
Link to comment
Share on other sites

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 :

hookimages.thumb.gif.d82ce97b2c883cb64ad3055dd0ce38d5.gif

 

  • Like 4
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...