ZGD

Secondary Image in Image Field

5 posts in this topic

I'm currently developing a site where some image fields need to be able to have two images associated with them, a thumbnail and a full sized image (which is often a different crop) which will be shown in a lightbox view.

This is fine for most templates, I'm just using normal image fields that return an array and support up to two images. If a second image is present in the field then it will be used as the alternative image for the lightbox. If only one image is present, it will be used for both thumbnail and full sized (the template resizes for the thumbnail using the API). However I have templates with flexible layouts using a repeater matrix, and one of the matrix types is an 'image grid'. This is an image field that supports an unlimited number of images, so obviously this method is not suitable here.

I've tried creating a repeater in this matrix type which contains an image field (each supporting two images, as above), but this means that I can no longer drag and drop multiple images at once. Each image in the grid has to be uploaded individually which is a big problem as there are many instances of these grids with a large number of images.

I've tried the ImageExtra module but it seems you can't add an image field as a secondary field.

Any suggestions as to how I might solve this problem?

Share this post


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

I've tried creating a repeater in this matrix type which contains an image field (each supporting two images, as above), but this means that I can no longer drag and drop multiple images at once.

Are you saying that an images field inside a repeater does not allow drag-and-drop uploading? I'm not aware of any such limitation and with a quick test it seems to be working for me, even inside nested repeaters.

I think you should check out the Croppable Image 3 module for managing your different crops.

https://github.com/horst-n/CroppableImage3

1 person likes this

Share this post


Link to post
Share on other sites
12 hours ago, Robin S said:

Are you saying that an images field inside a repeater does not allow drag-and-drop uploading? I'm not aware of any such limitation and with a quick test it seems to be working for me, even inside nested repeaters.

Nope not quite, sorry I probably wasn't very clear there. Drag-and-drop does indeed work inside repeaters, my problem is that if I need to separate each image and its associated crop in the image grid into a separate repeater with an image field then I can't drag-and-drop say 20 images at once. I have to manually drag each image to the associated field in the repeater array.

An ideal situation would be the ability to store a secondary image with each image. For example each image has an input for alt text, I would somehow like there to be another input for another image. Essentially nested images.

CroppableImage3 is great but it also won't work for this as the images are prepared outside of PW as they have various other applications. The crops also aren't systematic and we also need to support the option for the crop being a completely different image entirely.

Share this post


Link to post
Share on other sites

What you want the system to do is simply not possible with core features. Image fields are file storage fields and even the description for them is more of a convenience functionality rather than a good way to store information. I've not used ImageExtra by now, so I'm not sure how it does save it's additional data, but it seems it doesn't do what you need as well.

For such an image grid you should still go with single pages holding the image / thumbnail and additional info. Maybe you can use a pagetable to display those imagepages and keep the convenience of drag&drop / nice overview over items, which is not so nice with repeaters.

17 hours ago, ZGD said:

Each image in the grid has to be uploaded individually which is a big problem as there are many instances of these grids with a large number of images.

If this is the case, how does that go together with each/lots of those images having custom made thumbnails as well? It probably either going to be a lot of manual uploading work or you strip the feature of custom thumbnails. If both is not possible you probably wont get around building something custom to create those grids.

Share this post


Link to post
Share on other sites

Thanks @LostKobrakai. That all makes sense.

28 minutes ago, LostKobrakai said:

If this is the case, how does that go together with each/lots of those images having custom made thumbnails as well? It probably either going to be a lot of manual uploading work or you strip the feature of custom thumbnails. If both is not possible you probably wont get around building something custom to create those grids.

I'd estimate less than 5% of images will have alternatives, so the manual uploading for those would be manageable. Being able to drag and drop multiple images at once is really the priority, but I had a better look through all the core modules earlier and decided the development time to create something custom probably wasn't worth it for this project. I looks like we will have to go with a repeater or pagetable approach as you've suggested.

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 iNoize
      Hello, 
      i have a landingpage and need to reaname the images or save it to the filed images in the userpage 
      i have this script currently 
       
      if(isset($input->post->submit)) { $lptitle = $sanitizer->text($input->post->lptitle); $anrede = $sanitizer->text($input->post->anrede); $first_name = $sanitizer->text($input->post->first_name); $last_name = $sanitizer->text($input->post->last_name); $str = $sanitizer->text($input->post->str); $num = $sanitizer->text($input->post->num); $plz = $sanitizer->text($input->post->plz); $ort = $sanitizer->text($input->post->ort); $land = $sanitizer->text($input->post->land); $email = $sanitizer->text($input->post->email1); $fbname = $sanitizer->text($input->post->fbname); if ($page->id == '2328' ) { // Set a temporary upload location where the submitted files are stored during form processing $upload_path = $config->paths->assets . "files/stickers/"; // New wire upload $file = new WireUpload('file'); // References the name of the field in the HTML form that uploads the photo $file->setMaxFiles(1); $file->setOverwrite(false); $file->setDestinationPath($upload_path); $file->setValidExtensions(array('jpg', 'jpeg', 'png', 'gif')); // execute upload and check for errors $files = $file->execute(); // echo "Passt"; } // $group = $sanitizer->text($input->post->group2); if ($sanitizer->text($input->post->group2) == "on") { $group = "1"; }else{ $group = "0"; } $mail = \ProcessWire\wiremail(); $mail->to($email)->from("mymailhere@domain.com"); $mail->subject("Deine Anmeldung zur $page->title !"); $mail->bodyHTML("Hey $first_name,<br> <br> deine Anmeldung zur <b style='color: #4fc3f7;'>$page->titleaktion</b> war erfolgreich.<br> $page->mailoben Deine Angaben:<br> $anrede $first_name $last_name<br> $str $num<br> $land - $plz $ort<br> $email<br> $fbname<br> <br> Wir wünschen dir auf jeden Fall schonmal viel Erfolg und erfrischende Grüße!<br> $page->mailunten Gerne kannst du auch deinen Freunden von unserer $page->titleaktion per Facebook, Twitter, Google+, WhatsApp oder E-Mail berichten:<br>"); $mail->send(); $p = new Page(); // create new page object $p->template = 'fans'; // set template $p->parent = $page->id; $p->title = $first_name." ".$last_name."-".$page->numChildren; $p->gender = $anrede; $p->first_name = $first_name; $p->last_name = $last_name; $p->str = $str; $p->num = $num; $p->plz = $plz; $p->ort = $ort; $p->land = $land; $p->email = $email; $p->fbname = $fbname; $p->letter = $group; $p->save(); $p->images = $upload_path . $files[0]; $p->save(); @unlink($upload_path . $files[0]); } How to save the Image to the Userpage  ? 
       
      Thanks 
       
       
       
    • By FrancisChung
      Hi PW Community,
      I have a problem where a page is loading up fine on my local dev machine + 1 of the test sites, but not on another test site.

      They have identical PW (2.8.35?) and codebase installed.
      The 2 sites are hosted on the same hosting provider, as well as our other sites.
      1) Error Logs. There is nothing particularly strange logged on the PW Error log for all the sites. I am getting a "You must assign a template to the page before setting custom field values (title__data) [pageClass=Page, template=] (WireLog)" error, but I'm getting this error on working pages as well.
       However, there are some errors in our Hosting Provider's log. The error seems to point at some sort of permissioning issue regarding reading the image files?
      1.a) File / Dir permissions of Images  - I've checked file permissions on the normal and problematic sites. They are all identical
      2) .htaccess  -  I've tried running the .htaccess file from the working site on the problematic site - No Luck
      3)  codebase - I've done 3 comparisons. They are identical on all sites.
      4) wire directory - See above
      5) Behaviour - So the problematic site loads up most of its page as expected without problems. It's just a couple that it has issues with.
       
      Problematic URL Example  : http://kinder-reime.com/kindergedichte/kategorien/gedichte-fuer-kindergarten-und-schule/
      Working URL : http://finger-spiele.com/kindergedichte/kategorien/gedichte-fuer-kindergarten-und-schule/
      I've also attached the KIS Error Logs.
      Has anyone come across  behaviour like this before and what would be the way forward to fix this?
      KIS.Error.Logs
    • By cgohio
      We had an outside vendor help develop our website.  The vendor has closed their business.  I'm trying to modify 1 of the images near the bottom of our website but can't figure out how.  We're new to processwire.  I see how I can modify the individual pages but can't seem to figure out where to go to change this image n www.gchbs.com near the bottom  I attached the image that I need to change.  Thanks in advance for any of your help!

    • By Cody Connor
      I am currently working on a website in process wire.  I created an image field and added svg as a valid file extension and could upload a png image and a jpg image but when I try to upload a svg image it is stuck loading at 100%.  I figured out that the image field does not take the extension svg even if I add it as an extension. and I was wondering if their is any way to upload a svg image to an image field in processwire?
      I am working with processwire version 3.0.61

    • By alexcapes
      Hi,
      I just updated a site to 3.0.61 and it's breaking uploading images from a URL via the API.
      I get the following error:
      Recoverable Fatal Error: Method ProcessWire\Pageimage::__toString() must return a string value The code getting the image is very simple:
      $new_edition->work_cover = $cover_url; $new_edition->save('work_cover'); It works fine on 3.0.42 but returns the error on 3.0.61