Jump to content
SoccerGuy3

Image management in custom module

Recommended Posts

I have created a module for a client that allows them to insert real estate listings into a larger 'global' database (external to PW). The module works great for the text (address, city, property info, etc), but I am getting stuck wrapping my head around the images. The customer wants to upload a lot of images (think 20-30 in some cases). Currently (see code below) I am allowing 8 images to be uploaded, which works fine - BUT not the way it should.

Let me explain. The form is a simple file upload dialog (you know, "click here to choose file"). What's missing is the ability to display what has been uploaded previously (when they come back to edit a listing), the ability to delete an image previously uploaded and the ability to replace images. The images are currently stored in a special folder at: site/assets/files/_listings and saved as "listingID-1", "listingID-2", "listingID-3", etc.

I tried reading the code for the inputimagefield tag, but that just got me more confused (new to this level of using processwire). I am looking for some pointers or help in moving this forward if anyone is willing!

What I think would be great would be functionality like you get on pages using the images field. That would give the client the ability to add, delete, drag-n-drop, change the order, delete, etc. But I have no clue how you implement something like that inside a module.

What I have now (in part, obviously this is a much larger file):

The input part:

		//Add Property Description
		$f = $this->modules->get("InputfieldTextarea");
		$f->label = 'Property Description';
		$f->attr('name','prop_desc');
		$f->columnWidth = 100;
		$f->required = false;
		$f->value = $row['description'];
		$form->add($f);

		//Add pictures
		for ($x = 1; $x <= 8; $x++) {
			$f = $this->modules->get("InputfieldFile");
			$f->label = 'Property Picture #'.$x.' Import';
			$fieldName = 'prop_pix_'.$x;
			$f->attr('name',$fieldName);
			$f->extensions = 'jpg jpeg png gif';
			$f->maxFiles = 1;
			$f->descriptionRows = 0;
			$f->columnWidth = 25;
			$f->overwrite = true;
			$f->required = false;
			$f->destinationPath = $dPath;
			$form->add($f);
			}

		$f = $this->modules->get('InputfieldSubmit');
		$f->attr('name', 'submit_save');
		$f->attr('value', $this->_('Save'));
		$f->addClass('head_button_clone');
		$f->icon = 'save';
		$form->add($f);

The "saving" part:

			//Process photos

			function convertImage($originalImage, $outputImage, $quality) {
			    // jpg, png, gif or bmp?
			    $exploded = explode('.',$originalImage);
			    $ext = $exploded[count($exploded) - 1];

			    if (preg_match('/jpg|jpeg/i',$ext))
			        $imageTmp=imagecreatefromjpeg($originalImage);
			    else if (preg_match('/png/i',$ext))
			        $imageTmp=imagecreatefrompng($originalImage);
			    else if (preg_match('/gif/i',$ext))
			        $imageTmp=imagecreatefromgif($originalImage);
			    else if (preg_match('/bmp/i',$ext))
			        $imageTmp=imagecreatefrombmp($originalImage);
			    else
			        return 0;

			    // quality is a value from 0 (worst) to 100 (best)
			    imagejpeg($imageTmp, $outputImage, $quality);
			    imagedestroy($imageTmp);
				unlink($originalImage);

			    return 1;
			}

			for ($i = 1; $i <= 8; $i++) {
				if($form->get('prop_pix_'.$i)->value > '') {
					$uploadedFile = $form->get('prop_pix_'.$i)->value;
					//ensure image is jpg image and delete original upload
					convertImage($target_dir.$uploadedFile,$target_dir.$propNum.'-'.$i.'.jpg',70);
				}
			}

Any pointers or references to the correct tags would be much appreciated.

Screen Shot 2019-07-12 at 4.38.46 PM.png

Share this post


Link to post
Share on other sites

While that looks really cool, I don't see how it applies to my situation. I need the photo management within the same screen as the data...

Share this post


Link to post
Share on other sites

Well, instead of creating 8 InputfieldFile fields with maxFiles=1, why not just create one InputfieldImage field? Not sure about customizing your special file path for storing though - usually PW stores files/images under site/assets/files/page-id/ ...

Share this post


Link to post
Share on other sites

Wow! Is it really that easy? I changed the maxFiles to 0 and was able to upload 10 photos in the one dialog at the same time. But it only listed the first file in the window. Saving worked, although it didn't give them the formatted name I would desire, but I am sure I can address that.

Is there an input type/setting that would allow the use of the image type you normally find on a page with drag and drop and previews of the uploads?

Share this post


Link to post
Share on other sites

I've never tried, but a quick search suggests you can do this:

 

Share this post


Link to post
Share on other sites
On 7/13/2019 at 11:38 AM, SoccerGuy3 said:

But I have no clue how you implement something like that inside a module.

Why not use pages and proper Fieldtype fields to store the data? Seems like it would be much easier, and anything out-of-the-ordinary that you want to show within your Process module you could show within Page Edit by hooking the render of a markup inputfield, or by using one of the runtime field modules from kongondo, bernhard, kixe, or me.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...