Jump to content
gebeer

Module ImageReference - Pick images from various sources

Recommended Posts

Hello all,

sharing my new module FieldtypeImageReference. It provides a configurable input field for choosing any type of image from selectable sources. Sources can be: 

  • a predefined folder in site/templates/
  • and/or a  page (and optionally its children)
  • and/or the page being edited
  • and/or any page on the site

CAUTION: this module is under development and not quite yet in a production-ready state. So please test it carefully.

UPDATE: the new version v2.0.0 introduces a breaking change due to renaming the module. If you have an older version already installed, you need to uninstall it and install the latest master version.

Module and full description can be found on github https://github.com/gebeer/FieldtypeImageReference
Install from URL: https://github.com/gebeer/FieldtypeImageReference/archive/master.zip

Read on for features and use cases.

Features

  • Images can be loaded from a folder inside site/templates/ or site/assets
  • Images in that folder can be uploaded and deleted from within the inputfield
  • Images can be loaded from other pages defined in the field settings
  • Images can be organized into categories. Child pages of the main 'image source page' serve as categories
  • mages can be loaded from any page on the site
  • From the API side, images can be manipulated like native ProcessWire images (resizing, cropping etc.), even the images from a folder
  • Image thumbnails are loaded into inputfield by ajax on demand
  • Source images on other pages can be edited from within this field.
  • Markup of SVG images can be rendered inline with `echo $image->svgcontent`
  • Image names are fully searchable through the API
$pages->find('fieldname.filename=xyz.png');
$pages->find('fieldname.filename%=xy.png');
  • Accidental image deletion is prevented. When you want to delete an image from one of the pages that hold your site-wide images, the module searches all pages that use that image. If any page contains a reference to the image you are trying to delete, deletion will be prevented. You will get an error message with links to help you edit those pages and remove references there before you can finally delete the image.
  • This field type can be used with marcrura's Settings Factory module to store images on settings pages, which was not possible with other image field types

When to use ?
If you want to let editors choose an image from a set of images that is being used site-wide. Ideal for images that are being re-used across the site (e.g. icons, but not limited to that).
Other than the native ProcessWire images field, the images here are not stored per page. Only references to images that live on other pages or inside a folder are stored. This has several advantages:

  • one central place to organize images
  • when images change, you only have to update them in one place. All references will be updated, too. (Provided the name of the image that has changed stays the same)

Installation and setup instructions can be found on github.

Here's how the input field looks like in the page editor:

inputfield-in-editor.thumb.png.3d86af07fe9f4e67a50b385cf0e8803b.png

If you like to give it a try, I'm happy to hear your comments or suggestions for improvement. Install from URL: https://github.com/gebeer/FieldtypeImageReference/archive/master.zip

Eventually this will go in the module directory, too. But it needs some more testing before I submit it. So I'd really appreciate your assistance.

Thanks to all who contributed their feedback and suggestions which made this module what it is now.

 

  • Like 17
  • Thanks 1

Share this post


Link to post
Share on other sites
8 hours ago, gebeer said:

It can also be used to offer a choice of images that are used site-wide without having to upload them to individual pages.

Pretty cool, thanks for sharing!

Share this post


Link to post
Share on other sites

Thanks @gebeer - this looks really useful! I wonder whether it would be useful to have an "Upload Image" option so that site editors can easily add images to this global directory so they don't need to resort to FTP or engaging their developer to add new images. I suppose the alternative would be to create a "Global Images" page in the page tree and point this module to the /assets/files/xxxx/ directory for this page - maybe that's actually the better approach?

Anyway, I can definitely see using this quite often!

  • Like 3

Share this post


Link to post
Share on other sites
1 hour ago, adrian said:

I suppose the alternative would be to create a "Global Images" page in the page tree and point this module to the /assets/files/xxxx/ directory for this page - maybe that's actually the better approach?

If @gebeer has time to add additional features to this module, I would vote for something like this, because it sounds simple enough. The simpler the better 🙂

Share this post


Link to post
Share on other sites
Just now, szabesz said:

If @gebeer has time to add additional features to this module, I would vote for something like this, because it sounds simple enough. The simpler the better 🙂

I just implemented it here:

image.png.4efb9b512f512c441c9269f9217208b9.png

The only changes I had to make to the module were to set the root path higher than the default site/templates/ so that I could point it to /site/assets/files/xxxx and it works brilliantly!

BTW, this is what the Global Images page looks like:

image.png.492f50134e968310fe5d66e9f4241251.png

  • Like 4

Share this post


Link to post
Share on other sites

@szabesz Actually I was thinking about making this change, too 🙂

@adrian Great job! Could you make a PR with your changes? I'd like to implement them.

This will also make the images instances of Pageimage and we get all image manipulation methods.

  • Like 1

Share this post


Link to post
Share on other sites
1 minute ago, gebeer said:

Great job! Could you make a PR with your changes? I'd like to implement them

I could, but I am not sure if you want to refine things a little more than my quick hack. I just replaced all instances of $this->config->paths->templates and $this->config->urls->templates with $this->config->paths->root and $this->config->urls->root 

I think perhaps it would be better to have an option in the field's settings to actually choose a page rather than manually /site/assets/files/xxxx - what do you think?

  • Like 1

Share this post


Link to post
Share on other sites
Just now, adrian said:

I think perhaps it would be better to have an option in the field's settings to actually choose a page rather than manually /site/assets/files/xxxx - what do you think?

Exactly the same thought came to my mind. Will implement this as an option.

  • Like 3

Share this post


Link to post
Share on other sites

I might be getting carried away, but I think it might also be nice to be able to select images from child pages of this page as well - I can see a use case for categorizing images and I think this would be a decent way of doing it. Perhaps the picker could even have a dropdown that lets you filter by child page (category). What do you think?

  • Like 1

Share this post


Link to post
Share on other sites

@adrian While I think that this is a good idea, I am not sure yet, if I want to go that far with this module. This would add additional complexity when installing and I wanted to keep it as simple as possible. This addition would make it kind of a "mini media manager" and I don't know how high the demand for it really would be since we have kongondo's excellent media manager already.

But if more people would like to have that option, I can implement it. Please vote.

Share this post


Link to post
Share on other sites
8 minutes ago, gebeer said:

This would add additional complexity when installing

I was thinking this would be optional - I don't think anyone has to set this up - the module would scan these only if they exist.

Share this post


Link to post
Share on other sites

@adrian I'm with you here.

After contemplating some more, I think the page approach should be the only option, discarding the folder option in site/templates/. Since PW is all about pages, this makes more sense. Also editors can easily add/remove images as they see fit without having to use other tools like FTP clients. This also provides the manipulation methods from Pageimage class to all images.

What do you all think?

  • Like 2

Share this post


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

@adrian I'm with you here.

After contemplating some more, I think the page approach should be the only option, discarding the folder option in site/templates/. Since PW is all about pages, this makes more sense. Also editors can easily add/remove images as they see fit without having to use other tools like FTP clients. This also provides the manipulation methods from Pageimage class to all images.

What do you all think?

Makes sense to me 🙂

Share this post


Link to post
Share on other sites

What about adding the image description, width, height, and filesize to the tooltip and under the selected image?

  • Like 1

Share this post


Link to post
Share on other sites
17 minutes ago, adrian said:

What about adding the image description, width, height, and filesize to the tooltip and under the selected image?

can do 🙂

  • Like 2

Share this post


Link to post
Share on other sites
5 hours ago, gebeer said:

While I think that this is a good idea, I am not sure yet, if I want to go that far with this module. This would add additional complexity when installing and I wanted to keep it as simple as possible. This addition would make it kind of a "mini media manager" and I don't know how high the demand for it really would be since we have kongondo's excellent media manager already.

But if more people would like to have that option, I can implement it. Please vote.

@kongondo's Media Manager module offers a lot more than this module would offer even with the child pages feature, so as far as I can see it you are not working on something like that.

The suggested child pages feature would be welcome but if you stick to the one page only solution than that is great too.

  • Like 2

Share this post


Link to post
Share on other sites

@gebeer - I am sure you have already thought of this, but if you're changing to only support selecting a page (and its children), you could make use of  PW's API to load up the images in the picker field, rather than scanning the server folder directly. I don't think there is a reason not to change.

  • Like 1

Share this post


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

you could make use of  PW's API to load up the images in the picker field, rather than scanning the server folder directly

Yes, I am using Pages and Pageimages to retrieve and list them. Everything is working fine so far. Doing some more fine tuning. Have to cater for cases where an image got deleted from the page that holds all images but is still referenced from my Fieldtype on a page. And things like that...

Can I make a fieldtype module autoload so that I can attach hooks to Pageimage and Pageimages from init() within my fieldtype? I tried, but it doesn't work.

  • Like 1

Share this post


Link to post
Share on other sites
6 minutes ago, gebeer said:

Can I make a fieldtype module autoload so that I can attach hooks to Pageimage and Pageimages from init() within my fieldtype? I tried, but it doesn't work.

I don't think it's possible. Two comments in the core code:

"Fieldtype modules are not automatically loaded, they are only loaded when requested"

"Inputfields are not loaded until requested"

I think you might need to add a helper module for those hooks. I guess otherwise you would need to check for the presence of the pageimage from init(), rather than hooking which I think could also work fine.

  • Like 1

Share this post


Link to post
Share on other sites

Or maybe you are looking to hook into the image deletion process to prevent an image from being deleted if it is used by an ImagePicker field? If so, that sounds like a smart thing to have 🙂

  • Like 1

Share this post


Link to post
Share on other sites
1 minute ago, adrian said:

Or maybe you are looking to hook into the image deletion process

This is what I'm trying to accomplish.

Also I want to add a new property to Pageimage that holds the svg markup for inlining. Even if I add my hook inside the formatValue() method, it is not executed. Still fiddling. Will find a solution, eventually...

  • Like 1

Share this post


Link to post
Share on other sites

@adrian @szabesz and everyone who followed this discussion. I opened a new thread for the Module FieldtypeImageFromPage which is the new module that evolves out of this one after the discussion. Had a happy weekend of module coding 😎. Please try the new module and let me know what you think. Cheers.

  • Like 2

Share this post


Link to post
Share on other sites

I just released v1.1.2 which has all the same features but removes dependency from MySQL >= 5.7.8 and fixes some minor issues. The module can now be used on any MySQL setup. You can update to or install from scratch the latest master version.

If you run into problems, please report here or open an issue on github. Thank you.

 

  • Like 6

Share this post


Link to post
Share on other sites

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?

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 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: PrivacyWire Git Repo
      Download as .zip
      I would love to hear your feedback 🙂
      CHANGELOG
      0.0.5 Multi-language support included completely (also in TextFormatter). Added possibility to async load other assets (e.g. <img type="optin" data-category="marketing" data-src="https://via.placeholder.com/300x300">) 0.0.4 Added possibility to add an imprint link to the banner 0.0.3 Multi-language support for module config (still in development) 0.0.2 First release 0.0.1 Early development
    • 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 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...