SmileyChris / easy-thumbnails

Easy thumbnails for Django
http://easy-thumbnails.readthedocs.org/
BSD 3-Clause "New" or "Revised" License
1.37k stars 312 forks source link

Get _2x photos in django template #542

Closed webwinners closed 3 years ago

webwinners commented 4 years ago

I have problem with high resolution photos, and displaing it on my themplate. I don't see any function that return 2x photo, generated automatically when other thumbnails are created.

1x photo, like this: template:

{% load thumbnail %}
{{ object.manufacturer.photo | thumbnail_url:'96'  }}

settings:
THUMBNAIL_HIGH_RESOLUTION = True
THUMBNAIL_HIGHRES_INFIX = '_2x'

THUMBNAIL_ALIASES = {
   '': {
       '64': {'size': (64, 64), 'quality': 100},
       '96': {'size': (96, 96), 'quality': 100},
       '128': {'size': (128, 128), 'quality': 100},
       '160': {'size': (160, 160), 'quality': 100},
       '192': {'size': (192, 192), 'quality': 85},
       '256': {'size': (256, 256), 'quality': 100},
       '320': {'size': (320, 320), 'quality': 100},
       '640': {'size': (640, 640), 'quality': 100},
       '1280': {'size': (1280, 1280), 'quality': 100},

       'org': {'size': (10000, 10000), 'quality': 100},
       'org_autocrop': {'size': (10000, 10000), 'quality': 100, 'autocrop': True},
   },
}
jrief commented 4 years ago

Assuming that object.manufacturer.photo is of type filer.models.imagemodels.Image, then this approach may work for you:

{% load thumbnail %}
{% thumbnail object.manufacturer.photo 96x96 crop as thumb %}
{% thumbnail object.manufacturer.photo 192x192 crop as thumb2x %}
<img class="img" srcset="{{ thumb2x.url }} 2x" src="{{ thumb.url }}">

The option THUMBNAIL_HIGH_RESOLUTION and THUMBNAIL_HIGHRES_INFIX have been added at a time, when the srcset option was not available in most browsers. At that time (~2012), we had to use a JavaScript hack, for instance retina.js, which checked if the image was available in high resolution. Fortunately nowadays all browsers evaluate the underlying screen resolution and load the appropriate image.