Jump to content
gebeer

Module ImageReference - Pick images from various sources

Recommended Posts

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.

  • Like 2

Share this post


Link to post
Share on other sites
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?

  • Like 1

Share this post


Link to post
Share on other sites

@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!

image.png.ee6f26d7180142e4b046d6f8b8fbc8ba.png

Share this post


Link to post
Share on other sites
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

select-from-any-page.thumb.png.cb34ae74e26b6b01b5f92bd5a16220a8.png

 

  • Like 2

Share this post


Link to post
Share on other sites

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)

choose-fields.thumb.png.f5c94382d6ea00777f12c748b48dec47.png

Share this post


Link to post
Share on other sites
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!

  • Like 1

Share this post


Link to post
Share on other sites
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?

image.png.07c83f252d0e515a8d8f53f7b94e5e9a.png

Share this post


Link to post
Share on other sites
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?

Share this post


Link to post
Share on other sites

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 🙂

image.png.d47bd112ddcb4280210f8fd64783d002.png

Share this post


Link to post
Share on other sites
3 hours ago, adrian said:

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

This I'll do 

 

Share this post


Link to post
Share on other sites

@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.

  • Like 1

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

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 😉

  • Like 3

Share this post


Link to post
Share on other sites

@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.

  • Like 1

Share this post


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

Share this post


Link to post
Share on other sites

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.

  • Like 4

Share this post


Link to post
Share on other sites

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.

  • Like 5

Share this post


Link to post
Share on other sites

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.

  • Like 7

Share this post


Link to post
Share on other sites
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! 🙂 

  • Like 1

Share this post


Link to post
Share on other sites
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 🙂

 

  • Like 1
  • Haha 1

Share this post


Link to post
Share on other sites

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!

inputfield-img-ref-v200-issue.png.c437bf293beb11ce96168e554532f8b3.png

 

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

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.

  • Like 5

Share this post


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 Marco Ro
      Hi,
      I need to change the position of the label tag. In all render the input field look like this:
      <div class="Inputfield" id=""> <label class="InputfieldHeader" for="...">Email</label> <div class="InputfieldContent"> <input id="..." name="..." class="..." type="" maxlength="512" autocomplete="off"> </div> </div> I would like move the label tag inside the InputfieldContent after the input tag.
      I try to work around the render hook, but didn't found a solution, and also I'm not sure is this the way. 
      How can I do it?
      Thank you.
    • By MoritzLost
      This is a new module that provides a simple solution to clearing all your cache layers at once, and an extensible interface to perform various cache-related actions.
      The simple motivation behind this module was that I was tired of manually clearing caches in several places after deploying a change on a live site. The basic purpose of this module is a simple Clear all caches link in the Setup menu which clears out all caches, no matter where they hide. You can customize what exactly the module does through it's configuration menu:
      Expire or delete all cache entries in the database, or selectively clear caches by namespace ($cache API) Clear the the template render cache. Clear out specific folders inside your site's cache directory (/site/assets/cache) Refresh version strings for static assets to bust client-side browser caches (this requires some setup, see the full documentation for details). This is the basic function of the module. However, you can also add different cache management action through the API and execute them through the module's interface. For this advanced usage, the module provides:
      An interface to see all available cache actions and execute them. A system log and logging output on the module page to see verify what the module is doing. A CacheControlTools class with utility functions to clear out different caches. An API to add cache actions, execute them programmatically and even modify the default action. Permission management, allowing you granular control over which user roles can execute which actions. The complete documentation can be found in the module's README.
      Beta release
      Note that I consider this a Beta release. Since the module is relatively aggressive in deleting some caches, I would advise you to install in on a test environment before using it on a live site.
      Let me know if you're getting any errors, have trouble using the module or if you have suggestions for improvement!
      In particular, can someone let me know if this module causes any problems with the ProCache module? I don't own or use it, so I can't check. As far as I can tell, ProCache uses a folder inside the cache directory to cache static pages, so my module should be able to clear the ProCache site cache as well, I'd appreciate it if someone can test that for me.
      Future plans
      If there is some interest in this, I plan to expand this to a more general cache management solution. I particular, I would like to add additional cache actions. Some ideas that came to mind:
      Warming up the template render cache for publicly accessible pages. Removing all active user sessions. Let me know if you have more suggestions!
      Links
      https://github.com/MoritzLost/ProcessCacheControl ProcessCacheControl in the Module directory

    • By joshua
      This module is (yet another) way for implementing a cookie management solution.
      Of course there are several other possibilities:
      - https://processwire.com/talk/topic/22920-klaro-cookie-consent-manager/
      - https://github.com/webmanufaktur/CookieManagementBanner
      - https://github.com/johannesdachsel/cookiemonster
      - https://www.oiljs.org/
      - ... and so on ...
      In this module you can configure which kind of cookie categories you want to manage:

      You can also enable the support for respecting the Do-Not-Track (DNT) header to don't annoy users, who already decided for all their browsing experience.
      Currently there are four possible cookie groups:
      - Necessary (always enabled)
      - Statistics
      - Marketing
      - External Media
      All groups can be renamed, so feel free to use other cookie group names. I just haven't found a way to implement a "repeater like" field as configurable module field ...
      When you want to load specific scripts ( like Google Analytics, Google Maps, ...) only after the user's content to this specific category of cookies, just use the following script syntax:
      <script type="optin" data-type="text/javascript" data-category="statistics" data-src="/path/to/your/statistic/script.js"></script> <script type="optin" data-type="text/javascript" data-category="marketing" data-src="/path/to/your/mareketing/script.js"></script> <script type="optin" data-type="text/javascript" data-category="external_media" data-src="/path/to/your/external-media/script.js"></script> <script type="optin" data-type="text/javascript" data-category="marketing">console.log("Inline scripts are also working!");</script> The type has to be "optin" to get recognized by PrivacyWire, the data-attributes are giving hints, how the script shall be loaded, if the data-category is within the cookie consents of the user. These scripts are loaded asynchronously after the user made the decision.
      If you want to give the users the possibility to change their consent, you can use the following Textformatter:
      [[privacywire-choose-cookies]] It's planned to add also other Textformatters to opt-out of specific cookie groups or delete the whole consent cookie.
      You can also add a custom link to output the banner again with a link / button with following class:
      <a href="#" class="privacywire-show-options">Show Cookie Options</a> <button class="privacywire-show-options">Show Cookie Options</button> This module is still in development, but we already use it on several production websites.
      You find it here: https://github.com/blaueQuelle/privacywire/tree/master
      Download: https://github.com/blaueQuelle/privacywire/archive/master.zip
      I would love to hear your feedback 🙂
      Edit: Updated URLs to master tree of git repo
       
    • By David Karich
      Admin Page Tree Multiple Sorting
      ClassName: ProcessPageListMultipleSorting
      Extend the ordinary sort of children of a template in the admin page tree with multiple properties. For each template, you can define your own rule. Write each template (template-name) in a row, followed by a colon and then the additional field names for sorting.
      Example: All children of the template "blog" to be sorted in descending order according to the date of creation, then descending by modification date, and then by title. Type:
      blog: -created, -modified, title  Installation
      Copy the files for this module to /site/modules/ProcessPageListMultipleSorting/ In admin: Modules > Check for new modules. Install Module "Admin Page Tree Multible Sorting". Alternative in ProcessWire 2.4+
      Login to ProcessWire backend and go to Modules Click tab "New" and enter Module Class Name: "ProcessPageListMultipleSorting" Click "Download and Install"   Compatibility   I have currently tested the module only under PW 2.6+, but think that it works on older versions too. Maybe someone can give a feedback.     Download   PW-Repo: http://modules.processwire.com/modules/process-page-list-multiple-sorting/ GitHub: https://github.com/FlipZoomMedia/Processwire-ProcessPageListMultipleSorting     I hope someone can use the module. Have fun and best regards, David
×
×
  • Create New...