Photo upload with resize, crop function

[drckarcher]

Hi,

we have a staff database with a photo upload field. 

Are there any solutions to realise a resize and crop function, similar to the photo upload in the contacts app on a Mac?

Many thanks, Christian

 

[Ulensr]

Hi @drckarcher have you checked https://howto.caspio.com/files-and-images/resize-images/#:~:text=In the Configure Fields screen,height or the width size. in the how to's ? This explains how you can add an extra file field to your table with a thumbnail  and configure this file field in the DataPage wizard. You can then use both the full or thumbnail pictures.

[Kurumi]

This post might help of styling:

 

[GoodBoy]

Hi. You may also try cropping plugins if you are knowledgeable in JavaScript:

https://www.cssscript.com/tag/image-cropping/

Or consult the Caspio developers if they can add it to your DataPage.

[drckarcher]

5 hours ago, Ulensr said:

Hi @drckarcher have you checked https://howto.caspio.com/files-and-images/resize-images/#:~:text=In the Configure Fields screen,height or the width size. in the how to's ? This explains how you can add an extra file field to your table with a thumbnail  and configure this file field in the DataPage wizard. You can then use both the full or thumbnail pictures.

Thank you, 

yes, I saw this. As far as I understand, his function however will keep the aspect ratio and will therefore stretch the thumbnail depending on whether the original pic is landscape or portrait.

[drckarcher]

3 hours ago, GoodBoy said:

Hi. You may also try cropping plugins if you are knowledgeable in JavaScript:

https://www.cssscript.com/tag/image-cropping/

Or consult the Caspio developers if they can add it to your DataPage.

Thank you!That's what I'm after. I'm not JS savvy (yet) but will investigate this further.

[IamNatoyThatLovesYou]

Hello Everyone, just want to mention that we have a new TechTip that you can checkout using images that will zoom in and out the image that may be useful for this.

- https://howto.caspio.com/tech-tips-and-articles/advanced-customizations/zooming-images-in-report-datapages/

- Natoy

[KwentenB]

Another option is resizing the image by applying CSS to the image

use object-fit: cover.  

The image will be clipped to fit the width and height you specify - see below.

In the css below I wanted to keep a consistent width of 100% (to suit responsive) but was happy to have the image cropped at a height of 300px.

Example css below

img {
  width: 100%;
  height: 300px;
  object-fit: cover;
}

https://www.w3schools.com/css/css3_object-fit.asp