ZGD

Secondary Image in Image Field

Recommended Posts

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

  • Like 1

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 chuckymendoza
      Hello together,
      I have a problem with the image field and in my case it seems that there is a limit of how much images can be in such field.
      The following case:
      I have around 20 pages. Each has a usual image field, where I can upload an unlimited number of images (array).
      Most of the pages got 50-200 images but one page got 411 images (I know, it’s much  )

      Now, when I change the order of one image (let’s say I drag & Drop the first image after the third) or delete one image by clicking on the trashcan, everything runs fine. BUT when I click SAVE the image won’t be deleted or moved to it’s new place. You can change anything else on the page - I have a text field there - and save it, no problem.
      Interestingly I can add (upload) new images but I’m not able to delete or move them.
      - The file size of the images are between 200kb and 1.7MB, RGB, JPGs.
      - When I duplicate the page and try to delete/move I got the same problem.
      - I also created a whole new page and got the same problem
      - Also tried a different server (virtual and online): same problem
      - ProcessWire 3.0.62
      So, is there a limited to the images field? Any clues except limiting the image files to max. +-200 images?
       
      Thanks so much in advance and have a great weekend.
      Thomas
    • By ridgedale
      Reference: PW 3.0.62 and uikit3 based site using the Regular-Master profile.
      I wonder if anyone has come across the problem of displaying images within the <figure> element before.
      When editing a page:
      If an image is added inside <p></p> tags without any align assigned, it displays normally at the size the user has specified. See screen grab example 1.
      If an image is placed inside the <figure> element and left or right alignment applied, the size the image is displayed as in the editing view is significantly reduced. See screen grab example 2.
      If an image is placed inside the <figure> element and center alignment applied, the size the image completely disappears in the editing view with only the caption text showing. See screen grab example 3.
      The code used to display an image in <p></p> tags without aligment assigned is standard:
      <p><img alt="" src="/<path-to-image>/image.jpg" width="128" /></p> Examples of the code automatically being generated by PW3/UiKit3 from within the image editing interface are:
      <figure class="align_left"><img alt="" src="/<path-to-image>/image.jpg>" width="128" /> <figcaption>Caption text</figcaption> </figure> <figure class="align_right"><img alt="" src="/<path-to-image>/image.jpg>" width="128" /> <figcaption>Caption text</figcaption> </figure> <figure class="align_center"><img alt="" src="/<path-to-image>/image.jpg>" width="128" /> <figcaption>Caption text</figcaption> </figure> Important Note: The images and and captions actually do display correctly when the website is browsed, but from the editing perspective it is not practical.
      Any thoughts or advice would be appreciated.



    • By jploch
      Hi!
      I have a problem with uploading animated GIFs again.
      The upload starts, but never finishes and just loads forever.
      Iam running PW 3.0.62 and have the Image Animated GIF Module installed.

      I also increased the memory limit in the htaccess file in PW root directory like this:
      <IfModule mod_php5.c>
      php_value memory_limit 256
      php_value upload_max_filesize 64M
      php_value post_max_size 64M
      php_value max_execution_time 300
      php_value max_input_time 1000
      </IfModule> 
      I had this problem before, but was able to fix it with the Animated GIF Module and the modification of the htaccess file.
      So maybe this is related to the provider (strato).
      Here is the error I get, when uploading the GIF (1.1 MB filesize)
      Warning: preg_match_all() expects at least 3 parameters, 2 given in /mnt/web216/a2/50/51925650/htdocs/processwire/wire/core/PWGIF.php on line 252 Warning: preg_match_all() expects at least 3 parameters, 2 given in /mnt/web216/a2/50/51925650/htdocs/processwire/site/assets/cache/FileCompiler/site/modules/ImageAnimatedGif/ImageAnimatedGif.module on line 285 Warning: preg_match_all() expects at least 3 parameters, 2 given in /mnt/web216/a2/50/51925650/htdocs/processwire/wire/core/PWGIF.php on line 252 Warning: preg_match_all() expects at least 3 parameters, 2 given in /mnt/web216/a2/50/51925650/htdocs/processwire/wire/core/PWGIF.php on line 252 Warning: preg_match_all() expects at least 3 parameters, 2 given in /mnt/web216/a2/50/51925650/htdocs/processwire/site/assets/cache/FileCompiler/site/modules/ImageAnimatedGif/ImageAnimatedGif.module on line 285 Warning: preg_match_all() expects at least 3 parameters, 2 given in /mnt/web216/a2/50/51925650/htdocs/processwire/wire/core/PWGIF.php on line 252 [{"error":false,"message":"Added file: test.gif","file":"\/processwire\/site\/assets\/files\/1098\/test.gif","size":101734,"markup":"<li id='file_daf280af792fd5b906511363ae2bc39d' class='ImageOuter gridImage ui-widget'><div class='gridImage__tooltip'><table><tr><th>Dimensions<\/th><td>500x333<\/td><\/tr><tr><th>Filesize<\/th><td>99&nbsp;kB<\/td><\/tr><tr><th>Variations<\/th><td>0<\/td><\/tr><\/table><\/div>\n\t\t\t<div class='gridImage__overflow'>\n\t\t\t\t<img src=\"\/processwire\/site\/assets\/files\/1098\/test.0x260.gif?nc=1509109293\" alt=\"\" data-w=\"500\" data-h=\"333\" data-original=\"\/processwire\/site\/assets\/files\/1098\/test.gif?nc=1509109293\" \/>\n\t\t\t<\/div>\n\t\t\t\n\t\t\t\t<div class='gridImage__hover'>\n\t\t\t\t\t<div class='gridImage__inner'>\n\t\t\t\t\t\t<label for='' class='gridImage__trash'>\n\t\t\t\t\t\t\t<input class='gridImage__deletebox' type='checkbox' name='delete_thumbnail_daf280af792fd5b906511363ae2bc39d' value='1' title='Delete' \/>\n\t\t\t\t\t\t\t<span class='fa fa-trash-o'><\/span>\n\t\t\t\t\t\t<\/label>\n\t\t\t\t\t\t<a class='gridImage__edit'>\n\t\t\t\t\t\t\t<span>Edit<\/span>\n\t\t\t\t\t\t<\/a>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\n\t\t\t\t<div class='ImageData'>\n\t\t\t\t\t<h2 class='InputfieldImageEdit__name'><span contenteditable='true'>test<\/span>.gif<\/h2>\n\t\t\t\t\t<span class='InputfieldImageEdit__info'>99&nbsp;kB, 500&times;333 <\/span>\n\t\t\t\t\t<div class='InputfieldImageEdit__errors'><\/div>\n\t\t\t\t\t<div class='InputfieldImageEdit__buttons'><small><button type='button' data-href='\/processwire\/admin\/page\/image\/edit\/?id=1098&file=1098,test.gif&rte=0&field=thumbnail' class='InputfieldImageButtonCrop ui-button ui-corner-all ui-state-default pw-modal-large pw-modal' data-buttons='#non_rte_dialog_buttons button' data-autoclose='1' data-close='#non_rte_cancel'><span class='ui-button-text'><span class='fa fa-crop'><\/span> Crop<\/span><\/button><button type='button' data-href='\/processwire\/admin\/page\/image\/variations\/?id=1098&file=test.gif&modal=1&varcnt=varcnt_thumbnail_daf280af792fd5b906511363ae2bc39d' class='ui-button ui-corner-all ui-state-default pw-modal-large pw-modal' data-buttons='button'><span class='ui-button-text'><span class='fa fa-files-o'><\/span> Variations <span class='ui-priority-secondary'>(0)<\/span><\/span><\/button><\/small><\/div>\n\t\t\t\t\t<div class='InputfieldImageEdit__core'><div class='InputfieldFileDescription'><label for='description_thumbnail_daf280af792fd5b906511363ae2bc39d' class='detail'>Description<\/label><input type='text' name='description_thumbnail_daf280af792fd5b906511363ae2bc39d' id='description_thumbnail_daf280af792fd5b906511363ae2bc39d' value='' \/><\/div><\/div>\n\t\t\t\t\t<div class='InputfieldImageEdit__additional'><\/div>\n\t\t\t\t\t<input class='InputfieldFileSort' type='text' name='sort_thumbnail_daf280af792fd5b906511363ae2bc39d' value='1' \/>\n\t\t\t\t\t<input class='InputfieldFileReplace' type='hidden' name='replace_thumbnail_daf280af792fd5b906511363ae2bc39d' \/>\n\t\t\t\t\t<input class='InputfieldFileRename' type='hidden' name='rename_thumbnail_daf280af792fd5b906511363ae2bc39d' \/>\n\t\t\t\t<\/div>\n\t\t\t<\/li>","replace":true,"overwrite":0}]  
    • By mike62
      I am new to PW, and am trying to get an image to display, from a field in my template. Here's the code I'm using:
      <?php $image = $page->home_header_image; echo "<img src='{$image->url}' alt='{$image->description}' />"; ?> I'm following the tutorial on this here.
      When I save the template and reload the page, the path to the image is incomplete. If just echoes:
      <img src="/site/assets/files/1/" alt=""> It omits the name of the image, at the end of the path.
      Here's the site I'm working on:
      http://dev.delucaswpg.webfactional.com
      A couple caveats:
      I'm using ProcessWire 2.3.0 (tried updating the site and everything went berserk because of some plugin dependencies; point being: I can't update to the latest PW). I tried using the ->size thing and it gave me an error, saying it couldn't use 'size' in this context. Which I also thought was weird. Any ideas? Thanks!
    • By prestoav
      Hi all,
      PW: 3.0.42
      I'm trying to have responsive images in the body field. First I need to stop the image tag generated by CKEditor adding the width attribute to the image tag on insertion. I found the 'Skip width attributes on image tags?' in the settings of ProcessPageEditImage and that suggests it does exactly what I'm after.
      Sadly, even when this checkbox is checked and a new image is inserted the width attribute is still added.
      Am I missing something?
      TIA.