Hello,

I am trying to set up a gallery that non-couch users can upload images to.

Basically, I have an existing gallery that is a clonable template with thumbnails that crop each image to a specific size. I would like for guests to be able to upload their own images directly from the gallery's page to the existing template so that they are cropped and fit with the rest of the images.

I looked at databound forms, but couldn't find what I was looking for.

I understand if this isn't possible to do and any alternatives would be appreciated!

Thanks,
Katie

[trendoman]

Hi Katie,

What was wrong with databound form in your situation? Maybe I could propose some solution to it. Could you please let us know about the routine? Do you require multi-uploading, are your visitors anonymous or registered guests? Thanks!

Edit:
Found more info about it for you here
viewtopic.php?f=2&t=9988&p=23241#p23242 and
viewtopic.php?f=4&t=9112&p=18939#p18939

Basically, uploading works with databound forms if using 'securefile' image region. Multi-uploads can be done with multiple inputs. If you use some solution for that, like Dropzone.js, we can try to adapt it. Anyways, to give any suggestions, more info is needed.

Cropping, resizing, resaving is done by Couch in the background according to your preferences, defined in cms:editable fields in template. This is nothing to worry about, as long as you manage to create uploading form.

thanks, I will try a few things and post some more info if it doesn't work

Ok, I have a databound form that uploads images to a database. Now I would like them to be displayed automatically on the website.

This is my code from my old gallery:

Code: Select all

<div id="masonryContainer" style="width: 0 auto;"><cms:pages masterpage='gallery.php'>
      <div class="masonry-brick" style="width: 220px; margin: 10px; float: left;"><div class="popup-gallery">
        <a href="<cms:show image />" title="<cms:show k_page_title />">
     <img src="<cms:show thumb2 />" style="border:1px solid #; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px;" />
   </a>
      </div>
     </div></cms:pages>
    </div>

and this was the old template:

Code: Select all

<cms:template title='Wedding Gallery' clonable='1'>
   <cms:editable
      name='image'
      label='Image'
      type='image'
   />

   <cms:editable
     name='thumb2'
     label='Image Thumbnail'
     width='500'
     show_preview='1'
     assoc_field='image'
     type='thumbnail' 
   />

</cms:template>

The new template looks like this:

Code: Select all

<cms:template title='Gallery' clonable='1'>
<cms:editable name='upload' required='1' allowed_ext='png, jpg' max_size='1024' type='securefile' />
</cms:template>

My problem is getting the images from the "upload" editable to display automatically on the webpage.

Taken from https://www.couchcms.com/forum/viewtopic.php?f=4&t=7830:

To show a securefile image on the frontend

Code: Select all

<cms:show_securefile 'name_of_your_securefile_region_here' >
    <cms:if file_is_image >
        <a href="<cms:cloak_url link=file_id />"><img src="<cms:cloak_url link=file_id thumbnail='1' />" /></a><br />
        <cms:show file_name /> (<cms:size_format file_size />)
    <cms:else />
        <a href="<cms:cloak_url link=file_id />"><cms:show file_name /></a> (<cms:size_format file_size />)
    </cms:if>
</cms:show_securefile>

Please let me know if this helps, to show the securefile on the front-end you must use the above tags. If you get stuck further please let us know

[trendoman]

For auto-sizing etc, I suggest to modify your editable definition with more parameters.

<cms:editable name='cover' type='securefile' label='Cover' desc='will be cropped to 1500x570' width='1500' height='570' crop='1' quality='99' allowed_ext='jpg, jpeg, png, gif' max_size='5120' thumb_width='200' thumb_quality='99' thumb_enforce_max='1' use_thumb_for_preview='1' show_preview='1' order='10' group='logo_group' />

Also, here is some sample code, I used it for lightbox to either view image or download it.

Code: Select all

<cms:show_securefile 'ref_image' >
   <cms:set refimage="<cms:cloak_url link=file_id thumbnail='0' />" scope='global' />
   <cms:set refimagedown="<cms:cloak_url link=file_id thumbnail='0' force_download='1'  />" scope='global' />
</cms:show_securefile>

<cms:if refimage >
<div class="thumb video-container content-group">
   <img src="<cms:show refimage />" alt="<cms:show k_page_title />"/>
   <div class="caption-overflow">
      <span>
         <a href="<cms:show refimage />" data-popup="lightbox" 
            class="btn border-white text-white btn-flat btn-icon btn-rounded" title="View"><i class="icon-plus3"></i>
         </a>
         <a href="<cms:show refimagedown />" class="btn border-white text-white btn-flat btn-icon btn-rounded ml-5" title="Download"><i class="icon-link2"></i></a>
      </span>
   </div>
</div>

Also, some servers can have problems with correctly reporting the file size for links without extensions. If you will experience that images are displayed correctly only with parameter <cms:cloak_url link=file_id thumbnail='1' />, and are not loading correctly with thumbnail='0', then PM me, I'll send a patch. Actually, this problem is very rare and happens mostly on local environments (windows?).

Have a nice day.

Yes! Thank you!

I think it is all working properly and should be ready for guests to upload photos.

Thanks again!

[trendoman]

Great to hear Can be your beta-tester