Forum

Thread tagged as: Question, Discussion

High-DPI images in a template that houses different size images

Hi All,

i have a couple of related-ish questions, one is perch form related, the other is generally about what image size i should upload to perch, but they both relate to High-DPI uploads.

Question 1

I have a template that houses a grid of items that are varying sizes and dimensions. In that grid you can have images, so for example you might have a 640x640px grid item or a 640x320 or even a 320x320 grid item and i would like to offer the user one field to upload the images. I have a form template (shown below, this is for an app hence the :casestudy namespace) and uploaded an image (640x320) which only uploads the original and a x2 image, but that x2 image is reduced to 300x150px. with a specific width, you get all three images at the same size (640x320). In instances like this, should i just give the user 3 input boxes to upload manually the x1, x2 and x3 versions of the image?

<perch:casestudy id="tileImage" type="image" label="Tile Image" divider-before="Image Tile Section"  />
<perch:casestudy id="tileImage" type="image" density="2" />
<perch:casestudy id="tileImage" type="image" density="3" />

Question 2

if you can specificy the width (there are other areas in the site where i can define a width for images) what should the default uploaded be? foe example, for a 320x320 image, should the default image be 960x960 and then perch will scale it correctly, or am i getting this all wrong?

Thanks,

Rob

Roberto Modica

Roberto Modica 0 points

  • 3 years ago

If you want (3) different size images to be available then you need to add the image field (3) times with each tag having the attributes for each image. The admin will only have to upload a single image but all the variations will be created. Then the matching tag will be used in your template that matches the image size your wanting in that setting.

Drew McLellan

Drew McLellan 2638 points
Perch Support

You also need to specify a width and/or height for an image to be resized at all. Perch never scales up, so following the logic that the original is 1x, your suggested 2x and 3x images would never be generated.

As for fixed sizes. If you have an image you want no larger then xx then you would specify an image width and height, but don’t specify to crop and the size will be no larger the specified, but it will be scaled so think of this as max width/height

If the original is smaller the the specified sizes then nothing will be done to resize/scale the image. So your upload must be as big as setting to be scaled or bigger, otherwise the scale will be skipped.

Drew McLellan said:

You also need to specify a width and/or height for an image to be resized at all. Perch never scales up, so following the logic that the original is 1x, your suggested 2x and 3x images would never be generated.

So we’re on the same track... lol

Understood, may need to rethink how images are uploaded here as the design doesn't give me a specific size reference point so they may have to upload a couple of versions of the image instead of perch doing it for them due to the ambiguity of the design, and also seperate out at least a 2x option for them to upload.

Thanks you both for the input, gives me a path to go down.