gonzz

TIFF Support and backend jpg conversion

Recommended Posts

I'm doing an artist site and they want to be able to upload a large .tiff to their portfolio. I need to keep to a copy of the original file in the server for the art distributers, and of course serve jpg in the web front end.

I had the idea of extending the file or image upload input so that if the image is tiff, keep it, and also convert it to jpg, so I could access through something like $image->originalUrl or $image->size(100, 100)->url 

I was wondering if you thought this a good idea, or if i'm over-engineering something that could be done simply. Also, I've never extended an input, so any examples are welcome.

Thanks!

Share this post


Link to post
Share on other sites

For starters it appear that you would need ImageMagick installed on your server to make the format conversion. 

If time is an issue, I'd use two fields paired up in repeaters, or pages themselves, so the user can upload the pairing of jpeg and the tiff file. Though I understand making the user convert/upload the image is a pain point 🙂

You could add a method to the Pagefile class through a hook like this:

https://github.com/fbg13/FieldtypeFileS3/blob/master/InputfieldFileS3.module#L21

Share this post


Link to post
Share on other sites

thanks @elabx for the reply. Time is not an issue, and this is a core feature for the website. It's also key that this is easy to use, without the need to previously convert the file to png. Client is not computer savvy.

Thanks for pointing me to the s3 module. I should create the png with imagemagick, inside the ___fileAdded function (line 63) right?

..Can i create an image object on the fly? Or should I set an image field (maybe hidden) and set that in the ___fileAdded function? 

 

Please let me know if i'm not clear 🙂

thanks

Share this post


Link to post
Share on other sites

@gonzz I think the Pageimage Assistant module might help here.  At least it did for me when I wanted to convert PNG to JPG, which was helpful in my use-case for a particular site because I wanted to keep the lossless PNGs, but serve JPGs.  Not sure what the support for TIFF is.

https://modules.processwire.com/modules/pageimage-assistant/

Share this post


Link to post
Share on other sites

Converting a high-res tiff into a jpg will likely bring your server to an halt or crash it. If you did still want to go down that route - you can do this using ImageMagick, hook on the field and convert it at that point. But I would strongly encourage that you have a repeater with two fields, one for the JPG image and the other for the TIFF and do an offline conversion.

You could get your client to download a tool such as - http://www.easy2convert.com/tiff2jpg/ and let them convert it offline before upload.

Share this post


Link to post
Share on other sites

I think the Cloudinary image conversion service (they have a generous free tier) could take care of the conversion. They support TIFF. You can use their Fetch method to remotely transform your TIFFs.

  • Like 1

Share this post


Link to post
Share on other sites

I'd suggest using a file field for the tiff and on upload trigger the conversion of the image to a jpg, which is then stored in a image field. For the actual conversion I'd look outside of processwire, so you can scale independently or even more the conversion to a beefier node if needed.

Share this post


Link to post
Share on other sites

Thanks everyone for your responses, got me on track. I ended up making a module that hooks after saveReady. After some validation it does the following. Hope it helps anyone. This could be transformed into a more advanced module with options. Server needs Image Magick module installed.

// Lets generate a png image from this tiff
// imagen_tiff is a file field
$tiffImgPath = $page->imagen_tiff->first()->filename;
$tiffImgName = preg_replace('/\\.[^.\\s]{3,4}$/', '', $page->imagen_tiff->first()->name);
// Create an Imagick from the TIFF
$maxWidth = 1024;
$maxHeight = 768;
$img = new Imagick($tiffImgPath);
// Size calc
$d = $img->getImageGeometry();
$w = min($d['width'], $maxWidth);
$h = min($d['height'], $maxHeight);
// Convert image to PNG
$img->setImageFormat('png');
$img->setCompressionQuality(97);
$img->setImageResolution(72, 72);
$img->resizeImage($w,$h, Imagick::FILTER_LANCZOS, 1, true);
// Save the converted image to a cache folder
$tempDir = wire()->files->tempDir('tiffpng')->get() . $tiffImgName .'.png';
$img->writeImage($tempDir);
// I save the cached image in the image field imagen_web
$page->imagen_web->add($tempDir);

 

  • Like 1

Share this post


Link to post
Share on other sites

Obviously I don't have your complete code to check, but if you are doing on SaveReady, make sure it doesn't happen on every save - surely you only want it if the tiff has just been uploaded or replaced? Sorry if you have already taken care of this - just wanted to raise it in case.

I would probably go with hooking into InputfieldFile::fileAdded

  • Like 1

Share this post


Link to post
Share on other sites

Hi @adrian thanks for the heads up. I do have a couple of checks so it's not fired on every save, but i'm not handling the situation where the TIFF is replaced 🤔

My first attempt was using InputfieldFile::fileAdded but I wasn't sure how to get the uploaded file data and the page instance. Tried I couple of things googling around but nothing worked for me. Any working example to point me?

Share this post


Link to post
Share on other sites
3 hours ago, gonzz said:

Any working example to point me?

These are two modules that use it:

https://github.com/adrianbj/CustomUploadNames/blob/master/ProcessCustomUploadNames.module
https://github.com/matjazpotocnik/AutoSmush/blob/master/AutoSmush.module

Let me know if you can't figure out what you need from those and I can try to answer more specific questions.

  • Like 2
  • Thanks 1

Share this post


Link to post
Share on other sites

Thanks @adrian for the links. I have carefully read ProcessCustomUploadNames.module and put this together.

Here's a gist with the module I wrote: https://gist.github.com/gonzam88/2b0e8f850c469b48f4ea50fec29a4b1f

It's working for me but can't guarantee anything. Anyone is free to grab this code and continue developing into a full featured module.

Thanks for everyone's input

  • Like 2

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 Marcel
      Hey, 
      I am very new to processwire and bootstrap. I have a field (text area) and there I want to be able to insert an image which is responsive. I tryed it with Source but in the end the page doesn't seem to like it when I insert in Source the following code
      <img src="<?php echo $homepage->content_img->url; ?>" class="img-fluid" alt="Responsive image"> What can I do to make it possible to insert reponsive images in a text area?
      Thank you in advance.
      Marcel
    • By chcs
      In the page reference field, one can create new pages if they enable that option. However, the "new" page only gets the title field filled out.
      Q: Is there a way to expand on this so a user can fill in more fields from the new page? Either in-line or via modal?
       
    • By chcs
      I have a page with a good amount of fields on it, I have many other pages in the same template that have no issue, but one particular page just doesn't save changes to any of the fields. 
      I installed the clone page module, cloned the page, and everything cloned fine... but still when i try to make changes to the clone nothing saves either (just like the original page). 
      I expect some kind of notification to show up saying it saved, or not, but i get nothing as if the page reloaded fresh. The failure is silent, and there's nothing in the logs to direct me.
      This is a real head scratcher and I'm not sure how I should go about troubleshooting it further. Can someone help?
      Thank you kindly.
    • By Markus Breitinger
      I want to use Particle.js as background of my page. What modules do i need and where must i put the code?
      The usage of particle.js in plain HTML is in the attached files.
      index.css
      index.html
    • By rst
      I am having problems uploading svg images in the the latest pw 3.0.98. It shows the preview and has the spinner on top of it, and just gets stuck on that.
      Worked fine in the previous version of PW