search

codingjoe / django-pictures

Responsive cross-browser image library using modern codes like AVIF & WebP
BSD 2-Clause "Simplified" License
248 stars 20 forks source link

Wrong width and height #24

Closed pinpointconseil closed 2 years ago

pinpointconseil commented 2 years ago

I don't now if I'm doing wrong. Here is the model settings:

image_picture_width = models.PositiveIntegerField(default=266)
image_picture_height = models.PositiveIntegerField(default=150)
image = PictureField(verbose_name = _("Category Image"), upload_to='tag_images', blank=True, width_field="image_picture_width", height_field="image_picture_height", aspect_ratios=[None, None, None, "16/9"])

In my template:

                {% picture tag.image alt="tag_image" m=2 l=2 style="max-height: 98px;object-fit: cover;" width="266" height="150" %}

I uploaded the image, but image_picture_width and image_picture_height were overridden (800px, 600px)

In Chrome inspector got this:

<picture>
  <source type="image/webp" srcset="/_pictures/tag_image/3x2/800w.WEBP 800w, /_pictures/tag_image/3x2/100w.WEBP 100w, /_pictures/tag_image/3x2/200w.WEBP 200w, /_pictures/tag_image/3x2/300w.WEBP 300w, /_pictures/tag_image/3x2/400w.WEBP 400w, /_pictures/tag_image/3x2/500w.WEBP 500w, /_pictures/tag_image/3x2/600w.WEBP 600w, /_pictures/tag_image/3x2/700w.WEBP 700w" sizes="(min-width: 0px) and (max-width: 991px) 100vw, (min-width: 992px) and (max-width: 1199px) 16vw, 200px">
  <img src="https://trivaty-dev.s3.amazonaws.com/media/tag_images/languages.jpg" alt="tag_image" style="max-height: 98px;object-fit: cover;" width="800" height="600">
</picture>

why the image width are not set correctly? how to fix that?

Thank your to clarify as no information are available in the docs.

codingjoe commented 2 years ago

Hi @pinpointconseil,

Thank you for reaching out. I believe there seems to be a bit of confusion about how this library is supposed to work. Which tells me, I have to do a much better job explaining it in the docs.

There are a couple of things, that strike me as odd at first glance, and I'd really appreciate if you could give me a little more information. Understanding your line of thought will help me improve the documentation.

  1. Why do your width and height fields have default values? What would you expect those default values to do?
  2. Why do you have None defined 3 times as an aspect ratio?
  3. You didn't specify an aspect ratio in the template, was that intentional?
  4. You passed an explicit width and height in the template. What were your thoughts behind this?

Again, thanks for reaching out. Good documentation is key and with your help I believe we can make them much better.

Best Joe

pinpointconseil commented 2 years ago

Thank you for your reply. I have cards with images inside. Each card is related to an object. I tried to set a fixed width and height. I thought that setting the default values for width_field and height_field would fix these objectives. As it did not work, I tried to set them in css inline. This is why I put them as attributes in the picture filter. Certainly, I did not understand the usage of width_field, height_field, setting default height and width for images at the upload stage. My aim is to get pictures with fixed width and height when they are displayed in any browser (depending if xs, sm, m or l) as I'm using bootstrap grid. Hope i have clarified my current usage. Also, I can not understand how to use this module for static images (not depending on django model)? if you can tell me how to do this? Many thanks for your help and how to get this work as I hope.

Le mer. 1 juin 2022 à 11:55, Johannes Maron @.***> a écrit :

Hi @pinpointconseil https://github.com/pinpointconseil,

Thank you for reaching out. I believe there seems to be a bit of confusion about how this library is supposed to work. Which tells me, I have to do a much better job explaining it in the docs.

There are a couple of things, that strike me as odd at first glance, and I'd really appreciate if you could give me a little more information. Understanding your line of thought will help me improve the documentation.

  1. Why do your width and height fields have default values? What would you expect those default values to do?
  2. Why do you have None defined 3 times as an aspect ratio?
  3. You didn't specify an aspect ratio in the template, was that intentional?
  4. You passed an explicit width and height in the template. What were your thoughts behind this?

Again, thanks for reaching out. Good documentation is key and with your help I believe we can make them much better.

Best Joe

— Reply to this email directly, view it on GitHub https://github.com/codingjoe/django-pictures/issues/24#issuecomment-1143449518, or unsubscribe https://github.com/notifications/unsubscribe-auth/ALPERPKWIC6DCQBF5GDRSADVM46SRANCNFSM5XMUOG4A . You are receiving this because you were mentioned.Message ID: @.***>

codingjoe commented 2 years ago

Hi @pinpointconseil,

ah, I see. So, I believe it's worth reading a bit into the fundamentals of responsive images. I believe this is a great resource: https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

This package is built to work with grid systems, and you don't need to define a width and height. You rather define an aspect ratio and how many columns your image is wide in your grid.

EG, you if you want a 16/6 image this is 4 colums on m and 3 on l and full width on mobile, you'd do something like:

{% picture obj.picture_field ratio="16/9" m=4 l=3 alt="picture of a dog" %}

The library will calculate the proper media queries for you and make sure that you serve the perfect sized image on any device or screen size.

This is a very different approach to how we used to handle images in the old days. There is not a single size. You need to serve the perfect resolution for 460dpi iPhones or 72dpi desktop screens.

I hope this will help you a little. If you have any more questions, please ask. This is really helpful for me too.