Jump to content

Module ImageReference - Pick images from various sources


gebeer

Recommended Posts

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

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

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

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

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

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

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

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

Link to comment
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 6
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
      This module lets you add some custom menu items to the main admin menu, and you can set the dropdown links dynamically in a hook if needed.
      Sidenote: the module config uses some repeatable/sortable rows for the child link settings, similar to the ProFields Table interface. The data gets saved as JSON in a hidden textarea field. Might be interesting to other module developers?
      Custom Admin Menus
      Adds up to three custom menu items with optional dropdowns to the main admin menu.
      The menu items can link to admin pages, front-end pages, or pages on external websites.
      The links can be set to open in a new browser tab, and child links in the dropdown can be given an icon.
      Requires ProcessWire v3.0.178 or newer.
      Screenshots
      Example of menu items

      Module config for the menus

      Link list shown when parent menu item is not given a URL

      Advanced
      Setting child menu items dynamically
      If needed you can set the child menu items dynamically using a hook.
      Example:
      $wire->addHookAfter('CustomAdminMenus::getMenuChildren', function(HookEvent $event) { // The menu number is the first argument $menu_number = $event->arguments(0); if($menu_number === 1) { $colours = $event->wire()->pages->findRaw('template=colour', ['title', 'url', 'page_icon']); $children = []; foreach($colours as $colour) { // Each child item should be an array with the following keys $children[] = [ 'icon' => $colour['page_icon'], 'label' => $colour['title'], 'url' => $colour['url'], 'newtab' => false, ]; } $event->return = $children; } }); Create multiple levels of flyout menus
      It's also possible to create multiple levels of flyout submenus using a hook.

      For each level a submenu can be defined in a "children" item. Example:
      $wire->addHookAfter('CustomAdminMenus::getMenuChildren', function(HookEvent $event) { // The menu number is the first argument $menu_number = $event->arguments(0); if($menu_number === 1) { $children = [ [ 'icon' => 'adjust', 'label' => 'One', 'url' => '/one/', 'newtab' => false, ], [ 'icon' => 'anchor', 'label' => 'Two', 'url' => '/two/', 'newtab' => false, 'children' => [ [ 'icon' => 'child', 'label' => 'Red', 'url' => '/red/', 'newtab' => false, ], [ 'icon' => 'bullhorn', 'label' => 'Green', 'url' => '/green/', 'newtab' => false, 'children' => [ [ 'icon' => 'wifi', 'label' => 'Small', 'url' => '/small/', 'newtab' => true, ], [ 'icon' => 'codepen', 'label' => 'Medium', 'url' => '/medium/', 'newtab' => false, ], [ 'icon' => 'cogs', 'label' => 'Large', 'url' => '/large/', 'newtab' => false, ], ] ], [ 'icon' => 'futbol-o', 'label' => 'Blue', 'url' => '/blue/', 'newtab' => true, ], ] ], [ 'icon' => 'hand-o-left', 'label' => 'Three', 'url' => '/three/', 'newtab' => false, ], ]; $event->return = $children; } }); Showing/hiding menus according to user role
      You can determine which menu items can be seen by a role by checking the user's role in the hook.
      For example, if a user has or lacks a role you could include different child menu items in the hook return value. Or if you want to conditionally hide a custom menu altogether you can set the return value to false. Example:
      $wire->addHookAfter('CustomAdminMenus::getMenuChildren', function(HookEvent $event) { // The menu number is the first argument $menu_number = $event->arguments(0); $user = $event->wire()->user; // For custom menu number 1... if($menu_number === 1) { // ...if user does not have some particular role... if(!$user->hasRole('foo')) { // ...do not show the menu $event->return = false; } } });  
      https://github.com/Toutouwai/CustomAdminMenus
      https://processwire.com/modules/custom-admin-menus/
    • By tcnet
      This module for ProcessWire sends a notification email for each failed login attempt. Similar modules exists already in the module directory of ProcessWire. However, this module is designed to notify, even if specified user doesn't exist.
      Settings
      The settings for this module are located in the menu Modules=>Configure=>LoginFailNotifier.
      Notification email
      Specifies the email address to which the notification emails should be sent.
        Email subject
      Specifies the subject line for the notification email.
        Post variables
      Specifies the $_POST variables to be included in the notification email. Each variable must be separated by a comma. For example: login_name,login_pass
        Server variables
      Specifies the $_SERVER variables to be included in the notification email. Each variable must be separated by a comma. For example: REMOTE_ADDR,HTTP_USER_AGENT
      Link to ProcessWire module directory:
      https://processwire.com/modules/login-fail-notifier/
      Link to github.com:
      https://github.com/techcnet/LoginFailNotifier
    • By Fokke
      ProcessWire 3.x markup module for rendering meta tags in HTML document head section. Note that this module is not a full-blown SEO solution, but rather a simple tool for rendering meta tags based on module configuration. Adding custom meta tags is also supported.
      Built-in meta tags
      The following meta tags are supported out-of-the-box:
      Document title consisting of page title and site name Character set Canonical Viewport Description Keywords Hreflang tags Open Graph og:title og:site_name og:type og:url og:description og:image og:image:width og:image:height Twitter meta tags twitter:card twitter:site twitter:creator twitter:title twitter:description twitter:image Facebook meta tags fb:app_id The full documentation with configurable options can be found here: https://github.com/Fokke-/MarkupMetadata
       
      Requirements:
      ProcessWire>=3.0.0 PHP >=7.1 Installation using Composer
      composer require fokke/markup-metadata Manual installation
      Download latest version from https://github.com/Fokke-/MarkupMetadata/archive/master.zip Extract module files to site/modules/MarkupMetadata directory.
    • By m.sieber
      ITRK-Service for ProcessWire
      Module for the automated transfer of imprint, data protection declaration and terms and conditions from IT-Recht Kanzlei to your ProcessWire installation
      What is ITRK Service for ProcessWire?
      ITRK-Service for ProcessWire is a free module for ProcessWire CMS. It provides an interface to the update service of IT-Recht Kanzlei, via which the legal texts of your online presence are automatically updated. In this way, the texts remain legally secure and warning-proof in the long term. Imprint, data protection declaration, revocation and general terms and conditions are currently supported.
      You can find our documentation (in german language) here: https://www.pupit.de/itrk-service-for-processwire/dokumentation/

      Download: https://www.pupit.de/itrk-service-for-processwire/
      Github: https://github.com/pupit-de/pwItrkServiceConnector
    • 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.

       
      https://github.com/Toutouwai/InputfieldSelectImages
      https://processwire.com/modules/inputfield-select-images/
×
×
  • Create New...