Search

This field does two things:

  • uses code from Rowan’s incredibly useful Hashed Upload field to hash upload file names
  • provides an inline preview by means of a thumbnail when creating/editing an entry

After an image has been uploaded, instead of displaying the linked filename, the image thumbnailer is used. You can specify the width, height and crop mode of the thumbnail. This information is also output to XML in data sources.

Image Upload & Preview field XML

We have found this to be a useful way to provide clients with more accurate preview of what images will look like, before they publish an Article or Page. I generally set the thumbnail to the same aspect ratio as the resized image on the public site, so the preview is simply a scaled version of what they will see. This allows them to tweak the image if size or aspect ratio aren’t as they wish.

Image Upload & Preview field

Updates

1.1

  • fixed bug preventing preview/view original links working when Symphony is installed in a sub folder
Attachments:
imageuploadpreviewfield.zip

Awesome. Thanks.

This is indeed awesome! Thank you very much, Nick!

BTW: In Safari you can even drag and drop the preview image into your textarea fields, and - boom! - you will have the image's URL in your text! (This works in Firefox as well, at least on the Mac. Haven't tested it on Windows yet.)

Great, but work only on sites placed in the root directory. I'm currently writing website placed in subdirectory (www.example.com/new) and it doesn't work because it try to open directory workspace placed in root, not in "new" folder :/

I can confirm this bug.

I think I have fixed this by adding URL onto the URL of the thumbnailing script. Could you let me know if this is working for you? If not, please post the incorrect URL and I'll see how it should be amended.

v1.1 attached to original post.

I see the preview now, unfortunately the link to the original version is still broken because it does not use the correct URL. Add URL to that link and the script is fixed!

Ha, I completely missed that link. I have re-attached v1.1 with this fix.

Whoa. Nice.

nickdunn,

Could this be used to control the size of images required for certain sections? So ensuring the client does not upload massive files that do not display with the JIT Image Manipulator..

I.e setting the preview width and height to the required width and height and then using the preview as the value for the front end presentation of the image?

Also is it possible for relative width or height?

Might be missing a trick here.. but this seems the ideal place to be scaling the image for simple uploads.. the crop image extension looks promising but not ready for full deployment yet!

Any other recommendations for sizing on upload?

the crop image extension looks promising but not ready for full deployment yet!

I would recommend the crop extension. When that is fully released, I intend to retire this extension since it’s only an interim solution. I have no intention of adding any additional functionality since its desired functionality is to preview only.

When using the JIT extension on the frontend you can maintain aspect ratio by specifying “0” for either width or height.

Ok cool, thanks.. I am using JIT on the front end for images.. but an image was uploaded that was 1.4mb and it won’t play ball when JIT is used to make it the right size on the page.. is this the wrong way to go about it image/1/350/0 is the JIT for the file.. but I just get the error with broken image box..

Try viewing the image directly (paste the URL to the JIT resizer in your browser) and you might get a better error message.

Throws a wobbly when I type in the url..

http://localhost/image/1/350/0/submitted/
images/ef47ee7a2c4c26fc3dc01665bfc98c74.jpg

Is there a case where JIT does not work when testing locally?

The error refers to line 76 of the image.php file inside lib of the JIT extension

Sorry off topic here. Although it’s sort of related cos it’s using the extension above with hash upload to generate the filename.

And also it does happen on the live site when the file is larger than 1mb or there abouts

The error refers to line 76 of the image.php file inside lib of the JIT extension

What is the error?

Nice site by the way! I’ll check what the error is later on!

Nick, does this field have a GitHub repository?

But note my comment above:

I would recommend the crop extension. When that is fully released, I intend to retire this extension since it’s only an interim solution. I have no intention of adding any additional functionality since its desired functionality is to preview only.

:-)

Thanks Nick.

Maybe I’ll hijack your extension for an advanced image upload and preview field, if that’s okay.

P. S.: incrementnumberfield seems not to be the right field though …

Create an account or sign in to comment.

Symphony • Open Source XSLT CMS

Server Requirements

  • PHP 5.3-5.6 or 7.0-7.3
  • PHP's LibXML module, with the XSLT extension enabled (--with-xsl)
  • MySQL 5.5 or above
  • An Apache or Litespeed webserver
  • Apache's mod_rewrite module or equivalent

Compatible Hosts

Sign in

Login details