Create a Module: image upload to another page and autocomplete

[Qualtext]

Hi community,

i'am not a pro in module creation and i need someone, who build it better.

What my stuff at this time does:

• there is a page "Standard". This Page can upload into OR select Images from "Image Library".
• The pages inside "Image Library" are simple pages with a imageField (single) inside.

The page "Standard" looks like this:

• "Select existing Images" ist a pageField. The Inputfield is a AutocompleteField with preview oh the selected pages (from "Image Library").
• "Image (add if not exists)" is a imageField (multiple)
• this two fields togehter and some hooks are the core of my project.
• select a image form the list, or upload a new one.  

The Module has to parts: The new Autocomplete Inputfield for FieldtypePage and a processing for the imagefield via hooks.

Lets start with the ImageField:

1. Upload a Image(s) like everytime in Processwire.
2. After hit "Save":
   1. a "Page:saved" hook is checking if the image is already in the Library
      1. is checking the basename. if basename already exists, the code compares the two images by pixelanalysis(!)
   2. if in Library already: then add the existing Page with this image to the PageField field
   3. if not: create a new page with template "Image", add the image there, and add the new page to PageField
   4. after all: remove the image from this page (because we linked the image via a page)

The pageField is a clone of the existing InputfieldPageAutocomplete, but i extended that with little new function: display images in ___rendeListItem() and the javascript-version after AJAX loading. In my module, you can use as a new label specific string img:{a_image_field.url}:img. 
This pageField automatically controls the imageField. The selected Parent and Template is the path for new Pages and there Templates.

I'am testing a lot with this new components. Works fine. I Like this solution for pages where many images are allways the same (like a product-catalog).

Download the zip and have a look.

Installation

Follow this steps:

1. Install module "InputfieldPageAutocomplete2"
2. install module "ImageUploadOrSelect"
3. create a Template "Image"
4. now we need a unique name for three fields. For example: "loremipsum".
5. create a field of type image, call it "imageuploadorselect_imagetarget_loremipsum".
   1. this field is single image field. no array output!
6. add the field "imageuploadorselect_imagetarget_loremipsum" to template "Image".
7. create a field of type image, call it "imageuploadorselect_imagestemporary_loremipsum".
   1. this field is multiple. array output!
8. add this field to a template you decide. For example "basic-page".
9. create a new field of type Page, call it "imageuploadorselect_pages_loremipsum".
   1. set up this field like in the image above.
   2. Parent: a page you decide (where pages with template "Image" will be created)
   3. Template: Image
   4. Labelfield: custom
   5. Custom page label format: {title} img:{imageuploadorselect_imagetarget_loremipsum.url}:img
   6. Inputfieldtype: "PageAutocomplete2".
10. add this field to template from step 8, where the imageField also is.

I would be very happy if someone could help.

How i sad before, i'am not the pro. I looking for somebody who could help me to merge this stuff in one module to share it in the community.
I commented all the things in the files. There are a lot of detailed information.

Have nice weekend!

modules.zip

[Robin S]

Hi @Qualtext,

Nice job on the modules! Most of us around here are not true pros, and I don't think you need a pro to finish off your modules - you're doing great so far and you're nearly done. Just stick at it.

You've probably seen it already, but this is the docs page that is particularly useful for module development: https://processwire.com/api/ref/module/
The bits I quote below are from this page.

 

On 10/12/2016 at 10:32 AM, Qualtext said:

I looking for somebody who could help me to merge this stuff in one module

It isn't necessary to merge everything into a single module file. It's not unusual for a single module release to actually contain two or more modules. Put both modules inside the same directory, decide which is the primary module and have that module install the other automatically by using the "installs" property in the getModuleInfo() array.

Quote

installs (array|string): Array or CSV string of module class names that this module will handle install and uninstall for. This causes ProcessWire's dependency checker to ignore them and it is assumed your module will handle them. If your module does not handle them, ProcessWire will automatically install/uninstall them immediately after your module.

This takes care of item 1 or 2 in your list of installation steps.

 

Another thing you could do to finish off your modules for release is add code that creates some of the required pages and templates. You can use the ___install() method to do this.

Quote

The method should prepare the environment with anything else needed by the module, such as newly created fields, pages, templates, etc. or installation of other modules.

In your list of installation steps I think your install method could potentially take care of the following items: 3,4,5,6,7,9. Items 8 and 10 you leave up the user.

Search the forum and API docs and look at the code of other modules to understand how to create templates, fields and pages via the API. Give your auto-created templates/fields/pages names that are unlikely to be already in use, e.g. prefix them with the name of your module class. The labels/titles can be anything though.

Here are some links to start with:

 

[Macrura]

i didn't study your posts, but i'm pretty sure what you are doing is all easy to accomplish with the Selectize input field; i do that all the time, in fact i have (e.g.) a media select field that dynamically shows all of the media in my media library, including the media type (image, file, audio, video) and can dynamically show images if/when they exist, as well as image dimensions, and any other info. Maybe take a look at this and see:

 

[Robin S]

@Macrura, I also haven't looked in detail at Qualtext's module, and there are some similarities to both Selectize and Media Manager. But at a glance I can see some differences from Selectize:

• Image upload > page creation is included in the module.
• Uploaded images are pixel-compared for uniqueness to avoid duplicates.
• The ajax-loading features that come with extending InputfieldPageAutocomplete would be useful if you have thousands of image pages. Ajax-loading is possible with the jQuery Selectize plugin but not offered out-of-the-box in your PW module (please correct me if I'm wrong there).

So a very worthy contribution to the PW module ecosystem I think.

[Macrura]

thanks, i hadn't noticed there was actually a module (thought it was a mockup)

[Qualtext]

Hi,

thank you for reply. I decided to build this module in another way. I think this works nice and is efficent for projects with hundreds of images, like Product-Catalogs.

Ok, here is my brand new version module:

• image upload to another page
  • upload and add to pages field
• image comparison to prevent duplicates
  • basename comparison and
  • pixel comparison
• search images by text (or show all)
  • no more autocomplete-clone. A built a own Javascript to api logic to get images back.
  • select images in an easy way
  • drag n drop the imagepages like in imagefield to sort 

Because its extensive stuff, i decided to take a screen capture.
I dont know how add a videocontainer here, so you have to download or open the following link in browser:

Screen Capture

http://download.frech-und-artig.de/selectOrUpload.mp4 (mp4, 91 MB)
3:35 = upload and select images
5:48 = image comparison
7:18 = image comparison with new page
8:00 = testing change of LibraryParent

Image Preview

Things that i have done:

1. extended Image configuration fields
2. hook in Page::saved
   1. to push uploaded images to new/other page
   2. ans check if page and image fields connected right to each other
3. extended Page configuration fields
4. hook in PageField::saved to control PageField Config
5. hook in ProcessPageSearch to provide image thumbs instead of boring labels
6. created new InputField "InputfieldPageSelectOrUpload" without pageAutocomplete cloning
   1. i added own logic to sortable / add / remove events etc

I focused all the time to simplynes for user comfort. But one thing is anoying: that i have to use two fields: the image and the pagefield. I'd loving it, if there is a way, to setup only one field which is presenting two fields in one. How can i merge this?

I leaved the bunch of $this->messages("...") in the module for now, because they explain some things and reports errors.

What do you think? See zip in attachement. 
I hope you understand my amazing english skills.

 

 

SelectOrUpload-0.0.1.zip

[Robin S]

@Qualtext, I tried your module in PW 3.0.45 but I couldn't get it set up properly.

You'll see in the screenshot below that I have selected a parent page and an image field but the other settings are not applied automatically on save. Maybe this is due to the changes introduced to Page field settings in 3.0.45?

It would be helpful if you listed the steps that users should go through in order to get the revised version of your module set up and ready to use. Something that we can refer to more easily than the video (which you could upload to YouTube and embed here in the forum BTW).

The custom inputfield type seems to be unavailable?

[Qualtext]

Hi Robin,

i am using processwire 3.0.39 in the previous posts.

Quote

It would be helpful if you listed the steps that users should go through in order to get the revised version of your module set up and ready to use. 

Thats right. But there was no time to specify all steps before.

Quote

The custom inputfield type seems to be unavailable?

Is it installed?

Quote

other settings are not applied automatically on save

I dont know why thats happend, or not happend. Maybe the hook is not called or the fieldname in fieldoptions changed.
In the code of "SelectOrUploade.module" are these lines:

/...
$this->fields->addHookBefore('save', $this, 'extendPageFieldSave');
/...
public function extendPageFieldSave($event) {
  	$field = $event->arguments[0];

  	if($field->type=="FieldtypePage" && $field->useLibrary==1) {
    	$field->set('template_id', $this->templates->get('name='.$this->item_template_name)->id );
    	$field->set('parent_id', $field->pageLibraryParent_id);
    	$field->set('inputfield' , 'InputfieldPageSelectOrUpload');
    	$field->set('labelFieldName', '.');
    	$field->set('labelFieldFormat', '{title} {library_image.url}');
	}

}
/...

You could edit these lines to check, if the code is running, and the fields realy exists.

public function extendPageFieldSave($event) {
	$field = $event->arguments[0];

	if($field->type=="FieldtypePage" && $field->useLibrary==1) {
		$this->message('FieldtypePage with LibraryOption saving...');
		//or
		foreach(array('template_id','parent_id','inputfield','labelFieldName','labelFieldFormat') as $fieldname) {
			$fieldtest = $field->get($fieldname);
			if($fieldtest) {
				$this->message('Field '.$fieldname.' was found.');
			} else {
				$this->warning('Field '.$fieldname.' was NOT found.');
			}
		}

		$field->set('template_id', $this->templates->get('name='.$this->item_template_name)->id );
		$field->set('parent_id', $field->pageLibraryParent_id);
		$field->set('inputfield' , 'InputfieldPageSelectOrUpload');
		$field->set('labelFieldName', '.');
		$field->set('labelFieldFormat', '{title} {library_image.url}');
	}

}