Package: retina
👁 RetinaRetina takes an image and a thumbnail alias and generates a dict with resized images. So if youreasy_thumbnailsalias looks something like this'portrait': {'size': (150, 200)}you'll get the resized version of the original image
plus a retina version of it.image=File(user.profile_image).srcset('portrait')# image holds now the following dict:{'urls':{'default':['path/to/images/profile_image__150x200.jpg','path/to/images/profile_image__300x400.jpg',]},'alt':'John Doe',}InstallationFirst, install the latest release:$ pip install retinaRegister the adapters you want to use somewhere at boot:fromfiler.modelsimportImageasFilerImagefromfiler.modelsimportFileasFilerFilefromretina.adapters.filerimportFilerImageAdapter,FilerFileAdapterfromretinaimportmanagermanager.update_adapters({FilerImage:FilerImageAdapter,FilerFile:FilerFileAdapter,})Or if you're usingdjangowithdjango-filer(which is the use-case Retina was developed for) this is even easier:fromretinaimportmanagermanager.load_default_adapters()UsageInitiate theretina.Fileclass with adjango-filerFileorImagemodel and call thesrcsetmethod with aeasy_thumbnailsalias as parameter on it. This will always return a dict with aurlsandaltkey. Whereurlsis again a dict of different sizes (defaultbeing the default if nothing else specified) andaltis just a string containing the alt text for the image. Retina tries to get the alt text by accessing any of the following properties on thefiler.Imagemodel:default_alt_text,name,original_filenameBasicimage=File(user.profile_image).srcset('portrait'){'urls':{'default':['path/to/images/profile_image__150x200.jpg','path/to/images/profile_image__300x400.jpg',]},'alt':'John Doe',}DensityYou can chain an additional density method to get a @3, @4, e.t.c version of the source image.image=File(user.profile_image).density(3).srcset('portrait'){'urls':{'default':['path/to/images/profile_image__150x200.jpg','path/to/images/profile_image__300x400.jpg','path/to/images/profile_image__450x600.jpg',]},'alt':'John Doe',}SizesIf you're website needs different image dimensions, say on mobile than on desktop, you can do that as well:THUMBNAIL_ALIASES={'':{'portrait_sm':{'size':(100,100)},'portrait_xl':{'size':(150,200)},}},image=File(user.profile_image).srcset('portrait',['sm','xl']){'urls':{'sm':['path/to/images/profile_image__100x100.jpg','path/to/images/profile_image__200x200.jpg',],'xl':['path/to/images/profile_image__150x200.jpg','path/to/images/profile_image__300x400.jpg',]},'alt':'John Doe',}Notice how the alias is now a combination ofportrait+_+[size]Additional DataPass in any arbitary additional data to the returned dict:image=File(user.profile_image)).additional(foo='bar',bar='baz').srcset('portrait'){'urls':{'default':['path/to/images/profile_image__150x200.jpg','path/to/images/profile_image__300x400.jpg',],},'foo':'bar','bar':'baz','alt':'John Doe',}Notice how the alias is now a combination ofportrait+_+[size]AdaptersRetina uses the concept of adapters. Each adapter implements a set of methods that define how an image instance (whatever it may be) should be resized. Retina ships with two adapters out of the box:FilerImageAdapterandFilerFileAdapter. This means, that if you followed the installation steps above you can pass in anydjango-filerFileorImagemodel and it will output you resized versions of given file (if resizable at all).You're free two write your own adapters and register them on the manager via theupdate_adaptersmethod. Just pass in a dict where the key is a pythontype(like str, dict or any other object) and the value is your adapter.