General question with drag-upload images vs Matrix, dreaming of extension-based repeater matrix creation

[joe_g]

Hi there,

In almost every project I find myself wanting to use the images field for being able to drag many images at once to one field. It's super convenient. However then I loose the ability to be able to mix other filetypes in the same collection. Usually, after a while clients come back and want to have a video in there somewhere or perhaps even an embed. Then I have to rethink how that works and by using repeater matrix the interface becomes clunkier (new 'image' -> upload -> new 'video' -> upload, etc).

I'm dreaming now but it would be amazing with drag and drop support for repeater matrix, repeater items are automatically created from the file-type (jpg and mp4 mostly). Not sure where I'm going with this, mostly I wanted if I missed something or if this idea could work. I know there are some media library extensions around but I could never befriend them 100%. 

best J

[BrendonKoz]

@jploch's PAGEGRID sounds like a good match for what you're describing.

 

[joe_g]

Pagegrid looks like a great visual page builder, that's not what I'm after.

I'm after dragging multiple files and have them organize themselves after filetype, so I can have the simplicity of the images field but with the flexibility of the repeater matrix

[jploch]

@joe_g PAGEGRID would still work for this usecase check this post. You can setup the field, so the client can only sort the items and add new ones. I am happy to provide examples here if you want to try it.

An alternative to PAGEGRID is adding custom fields to your images/files field. This is a core feature, so no need for additional modules. This way you can let the client select a video/embed as an alternative for the image.

[gmclelland]

There is https://processwire.com/modules/repeater-images/, but that only works for images.

On 7/2/2024 at 12:54 PM, joe_g said:

I'm dreaming now but it would be amazing with drag and drop support for repeater matrix, repeater items are automatically created from the file-type (jpg and mp4 mostly).

 

[joe_g]

Thank you both

@jploch using the custom field is clever. Then the mp4 automatically have an image to be used as poster. If it's only a series of mp4's and images this could work really well!

@gmclelland I didn't know about this one! Could potentially be interesting if there is a lot of extra fields per image. If I understand correctly it create a repeater item for each image, but since it's a regular repeater it's not possible to insert a non-image in betwee, or similar. Still interesting within it's use-case.

 

[Robin S]

@joe_g, you could use a similar approach to that used by the Repeater Images module. Demo...

Repeater Matrix field config:

Hook in /site/ready.php:

$wire->addHookBefore('Pages::saveReady', function(HookEvent $event) {
	/** @var Page $page */
	$page = $event->arguments(0);
	if($page->template == 'demo_matrix_upload') {
		// File extension to Repeater Matrix type and subfield mapping
		$matrix_types = [
			'jpg' => [
				'type' => 'jpg',
				'subfield' => 'image',
			],
			'mp4' => [
				'type' => 'mp4',
				'subfield' => 'file',
			],
		];
		// For each file in the "Upload files to Matrix" field
		foreach($page->upload_files_to_matrix as $pagefile) {
			// Skip file if it does not have an allowed file extension
			// It also makes sense to configure the upload field to only allow
			// the extensions you have matrix types for
			if(!isset($matrix_types[$pagefile->ext])) continue;
			// Add a Repeater Matrix item of the matching type for the file
			$item = $page->matrix_files->getNewItem();
			$item->setMatrixType($matrix_types[$pagefile->ext]['type']);
			// Save the item so it is ready to accept files
			$item->save();
			// Add the file
			$item->{$matrix_types[$pagefile->ext]['subfield']}->add($pagefile->filename);
			// Save the item again
			$item->save();
		}
		// Remove all the uploaded files from the upload field
		$page->upload_files_to_matrix->removeAll();
	}
});

Result:

[joe_g]

Ha, this looks fantastic! I'm going to try this next time that I inevitably run into the same situation again.

[joe_g]

I'm trying this now but running into 

..you wouldn't happen to know why this happens?

[joe_g]

Hey solved it like this, a bit more low-tech: Added the $page-id != 0 check

And this is FANTASTIC. Having to choose between image upload (with drag and drop) and the flexibility of the repeater matrix have been my #1 annoyance for a decade!!

 $wire->addHookBefore('Pages::saveReady', function(HookEvent $event) {
	/** @var Page $page */

	$page = $event->arguments(0);
	
	if($page->template == 'fragments') {
		
		if($page->id != 0) {
			foreach($page->upload_files_to_matrix as $pagefile) {
				if($pagefile->ext == 'mp4') {
					$item = $page->fragments->getNewItem();
					$item->save();
					$item->setMatrixType('mp4_block');
					$item->mp4->add($pagefile->filename);
				}
				if($pagefile->ext == 'jpg' || $pagefile->ext == 'jpeg') {
					$item = $page->fragments->getNewItem();
					$item->save();
					$item->setMatrixType('image_block');
					$item->image->add($pagefile->filename);
				}
				$item->save();
			}
			$page->upload_files_to_matrix->removeAll();
		}
		
	}
	
});