Jump to content
fenton

max width + max height setting for images on upload (keeping aspect ratio)

Recommended Posts

Hi there,

is there a way to set a max-width + max-height setting for images on upload and keep the aspect ratio?

e.g. a landscape format picture shouldnd't be wider that 450px, as well as not exceed 320px in height and a portrait format image shouldn't be higer than 320px

currently image->size(450,320,$options) will always produce an image 450px wide and 320px high even when it's a portrait format image is

is this somehow possible?

thanks a lot, cheers, j

Share this post


Link to post
Share on other sites

There's a max width and max height settings on the image field input configuration.

So use size() and keep aspect ratio you can leave on empty or 0, or use width().

$image->size(450,0)->url

Share this post


Link to post
Share on other sites

thanks Soma!

but in that case a portrait image would have the desired width, but exceed the max-width of 320px. Ideally, in that case, the max-height of 320px should be taken into account)

(currently trying to port a modx MaxiGallery to processwire)

Share this post


Link to post
Share on other sites

You sentence doesn't make much sense, but anyway, the image fields max width and height settings is for when uploading images and nothing else.

Share this post


Link to post
Share on other sites

sorry for being unclear, I meant:

but in that case a portrait image would have the desired width, but exceed the max-height of 320px

Share this post


Link to post
Share on other sites

(currently trying to port a modx MaxiGallery to processwire)

Kunane,

If you have the time, when you are done, please do a short write-up how you approached/accomplished this. It will help others :). Thanks!

  • Like 1

Share this post


Link to post
Share on other sites

hey kongondo, absolutely! :)

(...although it's only a tiny gallery made with repeater fields)

  • Like 1

Share this post


Link to post
Share on other sites

I guess you are talking about template output only?

You'd then have to build some additional logik and check which side is larger and resize that. You can get the size by $image->height and width.

Share this post


Link to post
Share on other sites

$thumburl = $image->width > $image->height ? $image->size(450,0)->url : $image->size(0,320);

echo "<img src='$thumburl'/>";

  • Like 2

Share this post


Link to post
Share on other sites


Snippet variation to achieve a optical better result.
A little snippet addition to this older but maybe still useful post. If you use the orientation of an image to decide on your resize method you will often get an optical uneven impression, especially if aspect ratios of the images are very different (i.e. a row of logos).

In this case it could be better to define a maximum width and a maximum height value which both should not exceed. Here's the variaton of  @Soma's snippet to achieve that.

$mW = 180; // max width 
$mH = 80; // max height
$thumbUrl = ($mH / $image->height) > ($mW / $image->width) ? $image->size($mW,0)->url : $image->size(0,$mH)->url;

 

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 horst
      Hi, on a site I want to disable access to original images and only allow to access thumbnails and watermarked image variations.
      EDIT:
      A good solution for protecting original images can be found a bit down in this thread:
       
      Old content of this initial post:
       
    • By Guy Incognito
      I seem to be running into a repeated fatal error in a fresh PW install version 3.0.148. I can't quite put my finger on the pattern but it seems to be around deleting image fields or removing images from certain image fields.
      This is the trace from the log generated by trying to save a page and delete an image from an image field:
      Fatal Error: Uncaught Error: Cannot access protected property Pageimage::$original in /wire/core/PageimageVariations.php:256 Stack trace: 1. /wire/core/Pageimage.php(1327): PageimageVariations->getInfo() 2. /wire/core/Wire.php(386): Pageimage->___isVariation() 3. /wire/core/WireHooks.php(823): Wire->_callMethod() 4. /wire/core/Wire.php(450): WireHooks->runHooks() 5. /wire/core/Pageimage.php(1369): Wire->__call() 6. /wire/core/Pageimage.php(399): Pageimage->getOriginal() 7. /wire/core/WireData.php(333): Pageimage->get() 8. /wire/core/PageimageVariations.php(256): Pro Line 256 of /wire/core/PageimageVariations.php Earlier in the day I was experimenting with custom fields for images for the first time and kept running into this error, thinking it was me using this feature wrong and not having time to read up I deleted the custom image fields template and went about my business. So now I don't know if I triggered an issue or whether it was never related to the custom image fields in the first place?
      Any ideas?
    • By humanafterall
      I'm using some Custom fields for images: 
      https://processwire.com/blog/posts/pw-3.0.142/#custom-fields-for-files-images

      When I save the page, and return the fields are blank. When I re-add the text to the fields and save again then the fields save as expected.

      I know this is stated as being quite experimental but it's super useful feature I'd love to get working correctly.
      I have fields that are CKEditor fields but have overidden this on the image specific template. I've also tried it with regular text fields and I get the same bug.
      (currently using Processwire 3.0.155)
      **UPDATE**
      I've found this issue is specific to editing on pages using the PageTable fieldtype. The fields are not saving when I save the page in the PageTable.
    • By Robin S
      Displays image tags overlaid on the thumbnail using customisable colours. This makes it easier to see which images have which tags without needing to open the edit pane for individual images or changing to the list view.
      Screenshot

      Usage
      Enable tags for one or more image fields. Install the Image Thumbnail Tags module. Optionally configure colours for any of your tags.
       
      https://github.com/Toutouwai/ImageThumbnailTags
      https://modules.processwire.com/modules/image-thumbnail-tags/
    • By EyeDentify
      Hello dear PW gurus.

      I have stumbled over a strange error that i all of sudden got when trying to upload an image to a images field on a page.
      There where images allready stored in the field that i wanted to keep, but during the upload the error apear and after that all images are gone from the field and i can´t upload any, i just get the error every time.
      I am running ProcessWire 3.0.153 dev.
      Update:
      After looking in the assets folder i find the folder for the page and the image files seems to be there including the ones i tried to upload when the error occured.
      But they don´t show up in the images field in the page editor.
       
      The error reported:
       
      SQLSTATE[01000]: Warning: 1265 Data truncated for column 'ratio' at row 1 And here is a screenshot of the event:

      The TracyDebugger Error reporting:

      I hope you fine folks could point me in a direction.
      But it seems our old pal set_time_limit() is back.

      Regards, EyeDentify
×
×
  • Create New...