module Module ImageReference - Pick images from various sources

[gebeer]

New v1.1.3 is out. Following @adrian's request, in the field settings you can now choose multiple image fields to get images from. The tooltips on the thumbnails and the info below the preview image show the field name that this image belongs to.

[adrian]

On 12/21/2019 at 1:02 PM, gebeer said:

Just an idea: when you insert images into CKEditor with the pwimages plugin, you can choose an image from the page you are on but also from any other page of the site. Do you think this could be a useful feature for ImagePicker?

I feel like this should be a good idea, but at the moment I am not quite understanding how it will improve the current interface because it already shows thumbnails of images on the selected "other" page. Could you maybe describe in more detail please?

[adrian]

@gebeer - seems like there is an issue with the outline/border around the page selectors when expanded. It would be nice if that bottom border was still present to keep the pages separate. Thanks!

[gebeer]

6 hours ago, adrian said:

seems like there is an issue with the outline/border around the page selectors when expanded. It would be nice if that bottom border was still present to keep the pages separate. Thanks!

This is the way that InputfieldMarkup behaves inside an InputfieldWrapper. At least in my case. I amended it with some custom CSS. It's in the new master.

7 hours ago, adrian said:

I feel like this should be a good idea, but at the moment I am not quite understanding how it will improve the current interface because it already shows thumbnails of images on the selected "other" page. Could you maybe describe in more detail please?

ATM it only shows thumbnails for the page you define in the settings (and its children). What I mean, is a new option that allows you to pick images from any page on the site. So there would be an InputFieldPagelistSelect to select a page. Once selected, you get thumbnails for that page and can pick one. Just like in the pwimage plugin for CKEditor

 

[gebeer]

Updated the field settings. Before you had to choose the image fields both for the page you defined and for the optional edit page. I unified these into one setting. Images will be pulled from these fields for all relevant pages (if one of the fields exists on a page)

[bernhard]

24 minutes ago, gebeer said:

ATM it only shows thumbnails for the page you define in the settings (and its children). What I mean, is a new option that allows you to pick images from any page on the site. So there would be an InputFieldPagelistSelect to select a page. Once selected, you get thumbnails for that page and can pick one. Just like in the pwimage plugin for CKEditor

I think that would be a great addition!

[adrian]

6 hours ago, gebeer said:

ATM it only shows thumbnails for the page you define in the settings (and its children).

I know I am being dumb and missing something, but I can choose images from any page in the tree. Where is the setting you're talking about?

[gebeer]

5 hours ago, adrian said:

I know I am being dumb and missing something, but I can choose images from any page in the tree. Where is the setting you're talking about?

I'm not talking about the field settings. I mean the inputfield itself. Where you have all the options 'Choose an Image from...'. There will be a new option 'Choose an image from any page' This one will give you a PagelistSelect. After selecting a page you will be presented with thumbnails of all images from that page and can pick one.
Clear now?
Edit: The screenshot in your post is not from my inputfield, right?

[adrian]

Screenshot is from the Image Picker of a CkEditor field. Here is the collapsed state? It lets you select images from any other page in the tree. While I agree that it's confusing that the option is collapsed and so not obvious, I still don't understand how your version would provide different functionality. Maybe you should just create it - clearly I am just missing something still - sorry ?

[gebeer]

3 hours ago, adrian said:

Maybe you should just create it - clearly I am just missing something still - sorry

This I'll do 

 

[kongondo]

@gebeer,

Not sure if you know that a similar module shares the same class name as yours (FieldtypeImagePicker). I don't know if @theo's module is still being maintained. It also does not seem to be in the module's directory. It may not be an issue but just good to know, just in case.

[gebeer]

14 hours ago, kongondo said:

Not sure if you know that a similar module shares the same class name as yours (FieldtypeImagePicker). I don't know if @theo's module is still being maintained. It also does not seem to be in the module's directory. It may not be an issue but just good to know, just in case.

Thank you for this info. I was not aware of that. Will have a loock at that module and contact the author. Can rename mine if necessary because eventually I want to add it to the directory.

[gebeer]

I am working on the 'pick image from any page' feature. It have it basically working but it still needs some polishing. Here's a short preview (mainly for @adrian) so you see what I mean ?

[gebeer]

@kongondo let me know that there already is a fieldtype module ImagePicker authored by @theo. To avoid confusion, I am going to rename my module. Not 100% sure yet on the new name. What I think would fit the purpose and features of my module is ImageFromAnywhere.
With the upcoming addition of the 'Choose image from any page' feature, I think this name reflects quite well what the module does.

I'll be happy to receive your suggestions for a new name.

Note to forum admins: I can't make text bold or italic for quite some time now on latest Firefox and Chrome on Linux.

[szabesz]

6 hours ago, gebeer said:

I'll be happy to receive your suggestions for a new name.

These ones popped into my mind:

• AnyImagePicker
• GlobalPickerForImages
• GlobalImagePicker
• GlobalImages
• GlobalImageSource
• PickAnyPicture
• PicturePicker

And some creative ones too:

• ImagineGlobally
• ImageOutsorcerer (not misspelled but intentional ? )
• ImageSorcerer
• ImageOutsourcing

[bernhard]

What about ImageReference like the PageReference we already have?

On 12/25/2019 at 9:42 AM, gebeer said:

I am working on the 'pick image from any page' feature. It have it basically working but it still needs some polishing. Here's a short preview (mainly for @adrian) so you see what I mean ?

Thx for that preview. What came to my mind instantly was that it would be great to have an option to define a default. This would then be very similar to the "select image from page" option - so maybe these could be combined? Maybe that would be overengineering. Not sure ? Thx for your great work! I will definitely use your module a lot in the future.

[gebeer]

Thanks a lot for your suggestions @szabesz @bernhard

I really like ImageSorcerer and ImageReference. The former for its creativity, the latter for its clarity and reference to the page reference field. The more I think about it the more I tend towards ImageReference. It says it all clear what this fieldtype and inputfield are doing: allowing you to store a reference to an image that lives elsewhere in the system.

19 hours ago, bernhard said:

What came to my mind instantly was that it would be great to have an option to define a default. This would then be very similar to the "select image from page" option - so maybe these could be combined?

I had that thought, too. But I decided to leave them as separate options mainly because the 'select image from page' allows to setup a dedicated page with a set of images to choose from and to categorize them by using child pages. If I made this a flexible option it might not be obvious for developers and editors what is really happening here.

What I'm currently working on is having the PageListSelect remember the page that the image was selected from. Will release this feature before end of this year.

[gebeer]

New v2.0.0 is out on github. I renamed the module to ImageReference (as suggested by @bernhard) to avoid the naming conflict with @theo's module ImagePicker.

Version was bumped to 2.0.0 because it introduces breaking changes due to renaming. So if you have an older version installed, you need to first uninstall it and then install v2.0.0. Sorry for the inconvenience.

The new version also adds a new option. You can now choose images from any page on your site (similar behavior to choosing images when inserting into CKEditor).

Please give it a try and let me know if you run into any problems. After some more revision, I will add this fieldtype to the modules directory.

I would like to thank everybody who contributed their ideas to this module and wish everyone a good transition into the new year.

[szabesz]

4 hours ago, gebeer said:

I renamed the module to ImageReference (as suggested by @bernhard) to avoid the naming conflict with @theo's module ImagePicker.

What if – in the future – Ryan decides to implement a core module with the same name?

4 hours ago, gebeer said:

I would like to thank everybody who contributed their ideas to this module and wish everyone a good transition into the new year.

We thank you! ? 

[gebeer]

8 minutes ago, szabesz said:

What if – in the future – Ryan decides to implement a core module with the same name?

Then I can rename mine again ?

 

[LMD]

Hi @gebeer - thanks for this module.

I'm having an issue when using it with repeaters, though.

Previously I used the "FieldtypeImageFromPage" module which worked perfectly in repeaters, but swapped to this more flexible module and now get the following errors which prevents the field working (no image picker section available -- see screenshot after):

Notice: Trying to get property 'data' of non-object in 
\site\modules\FieldtypeImageReference\InputfieldImageReference.module on line 58

Warning: Invalid argument supplied for foreach() in 
\site\modules\FieldtypeImageReference\InputfieldImageReference.module on line 58

As you can see, there is no way to pick an image (clicking on the blank area does nothing) -- the field is set-up correctly, because it works outside of a repeater without problems!

 

I think the problem is that the module is getting the field settings data by fieldname, but of course, in a repeater the fieldname is changed to "fieldname_repeater####", causing the issue.

It appears to be this line (58) :

foreach($this->wire('fields')->get($this->name)->data as $key => $value) {

In a repeater, $this->name is looking for "fieldname_repeater####" which returns a non-object, making the foreach bork.

[gebeer]

@LMD thank you for reporting. Will look into it and upload a patch soon.

[mel47]

Thanks @gebeer, I tried your module and it works really well.

I was wondering if someone have an idea of a php code to fallback from ImageReferenceField to ImageField. I need to keep my "normal" images field in case I need to upload new images (and anyway I have too much images already uploaded to use exclusively ImageReference).

Thanks

[gebeer]

6 hours ago, mel47 said:

I was wondering if someone have an idea of a php code to fallback from ImageReferenceField to ImageField.

Do you need a fallback code in a template php file to render your normal image field if imagereference field is empty? an empty ImageReference field returns null. So you could do something like this

if($page->imagereference) { // the image reference field has an image
	echo "<img src='$page->imagereference->url'>";
} elseif(!$page->imagereference && $page->imagenormal) { // no image in image reference field but image in normal image field
	echo "<img src='$page->imagenormal->url'>";
}

6 hours ago, mel47 said:

I need to keep my "normal" images field in case I need to upload new images (and anyway I have too much images already uploaded to use exclusively ImageReference)

You can have the ImageReference field alongside your normal image field on one template. So it shouldn't be a problem to keep your normal images field and add a ImageReference field. The ImageReferenceField needs a normal image field to get images from. But the normal image field does not have to be on the same page since you can pick an image from any other page (depending on the field settings). Hope this clarifies it. If not, please try to explain your use case in more detail.

[gebeer]

Happy New Year to everybody!

New v.2.0.1 is out. It fixes the problem described by @LMD. Now the inputfield can be used inside repeaters again. Also I removed the option to load thumbnails via ajax. It didn't really make sense to have this as an option. They are now always loaded via xhr requests.

I did extensive testing with 2 fields of this type on one template and a repeater field on the same template, that also holds the 2 fields of this type and it went smoothly.

However, if you experience any problems, please let me know here or on github. Thank you.