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 20
  • 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 Neue Rituale
      https://github.com/neuerituale/FieldtypeOembed
    • By tcnet
      PageViewStatistic for ProcessWire is a module to log page visits of the CMS. The records including some basic information like IP-address, browser, operating system, requested page and originate page. Please note that this module doesn't claim to be the best or most accurate.
      Advantages
      One of the biggest advantage is that this module doesn't require any external service like Google Analytics or similar. You don't have to modify your templates either. There is also no Javascript or image required.
      Disadvantages
      There is only one disadvantage. This module doesn't record visits if the browser loads the page from its browser cache. To prevent the browser from loading the page from its cache, add the following meta tags to the header of your page:
      <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" /> <meta http-equiv="Pragma" content="no-cache" /> <meta http-equiv="Expires" content="0" /> How to use
      The records can be accessed via the Setup-menu of the CMS backend. The first dropdown control changes the view mode.

      Detailed records
      View mode "Detailed records" shows all visits of the selected day individually with IP-address, browser, operating system, requested page and originate page. Click the update button to see new added records.

      Cached visitor records
      View modes other than "Detailed records" are cached visitor counts which will be collected on a daily basis from the detailed records. This procedure ensures a faster display even with a large number of data records. Another advantage is that the detailed records can be deleted while the cache remains. The cache can be updated manually or automatically in a specified time period. Multiple visits from the same IP address on the same day are counted as a single visitor.

      Upgrade from older versions
      Cached visitor counts is new in version 1.0.8. If you just upgraded from an older version you might expire a delay or even an error 500 if you display cached visitor counts. The reason for this is that the cache has to be created from the records. This can take longer if your database contains many records. Sometimes it might hit the maximally execution time. Don't worry about that and keep reloading the page until the cache is completely created.
      Special Feature
      PageViewStatistic for ProcessWire can record the time a visitor viewed the page. This feature is deactivated by default. To activate open the module configuration page and activate "Record view time". If activated you will find a new column "S." in the records which means the time of view in seconds. With every page request, a Javascript code is inserted directly after the <body> tag. Every time the visitor switches to another tab or closes the tab, this script reports the number of seconds the tab was visible. The initial page request is recorded only as a hyphen (-).

      Settings
      You can access the module settings by clicking the Configuration button at the bottom of the records page. The settings page is also available in the menu: Modules->Configure->ProcessPageViewStat.
      IP2Location
      This module uses the IP2Location database from: http://www.ip2location.com. This database is required to obtain the country from the IP address. IP2Location updates this database at the begin of every month. The settings of ProcessPageViewStat offers the ability to automatically download the database monthly. Please note, that automatically download will not work if your webspace doesn't allow allow_url_fopen.
      Dragscroll
      This module uses DragScroll. A JavaScript available from: http://github.com/asvd/dragscroll. Dragscroll adds the ability in view mode "Day" to drag the records horizontally with the mouse pointer.
      parseUserAgentStringClass
      This module uses the PHP class parseUserAgentStringClass available from: http://www.toms-world.org/blog/parseuseragentstring/. This class is required to filter out the browser type and operating system from the server request.
    • By skeltern
      WebP image support is great and works fine. But once created I've issues to get rid of all API generated WebP variations.
      The backend image field variations "Delete" works and I can remove all variations JPEG plus WebP. Image list is clean but all WebP API variations are still stored in file system (for instance files/12345/84.900x675.webp etc). I can only use ImageSizer with temp 'force' option to request fresh WebP variations or have to delete WebP files from folders. No other way so far. Tested with 2 sites and latest master PW 3.0.165.
      Is there somewhere a "magic button" or config/setup thing to solve my sticky WebP issue?
    • By Mike Rockett
      TextformatterTypographer
      A ProcessWire wrapper for the awesome PHP Typography class, originally authored by KINGdesk LLC and enhanced by Peter Putzer in wp-Typography. Like Smartypants, it supercharges text fields with enhanced typography and typesetting, such as smart quotations, hyphenation in 59 languages, ellipses, copyright-, trade-, and service-marks, math symbols, and more.
      It's based on the PHP-Typography library found over at wp-Typography, which is more frequently updated and feature rich that its original by KINGdesk LLC.
      The module itself is fully configurable. I haven't done extensive testing, but there is nothing complex about this, and so I only envisage a typographical bug here and there, if any.
×
×
  • Create New...