https://github.com/prdpx7/django-img-cache
A :zap: fast hack of image caching on django for progressive image loading
https://github.com/prdpx7/django-img-cache
django django-plugin python redis
Last synced: 10 months ago
JSON representation
A :zap: fast hack of image caching on django for progressive image loading
- Host: GitHub
- URL: https://github.com/prdpx7/django-img-cache
- Owner: prdpx7
- License: mit
- Created: 2018-06-03T18:50:40.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-09-09T17:31:12.000Z (over 7 years ago)
- Last Synced: 2025-01-29T07:32:14.377Z (11 months ago)
- Topics: django, django-plugin, python, redis
- Language: Python
- Homepage:
- Size: 176 KB
- Stars: 1
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# django-img-cache
> A quick hack for faster image caching at back-end for progressive image loading on django website.
## Features
* supports image resizing for all formats
* faster image caching at backend on redis/memcached db
* saving your CDN cost ;)
* Tested on django >=1.10
## Installation
```shell
pip install django-img-cache
```
## Usage
### Project Setting
* After installation, register the app in INSTALLED_APPS section of your project settings.
```
INSTALLED_APPS = (
'blog',
'news',
'all_auth',
'img_cache',
)
```
### Default Settings for app
* These are default `settings`, you can overwrite them in Project `settings` as per requirement.
```
IMGCACHE_DEFAULT_STYLE='width:100%' # used in imgcache and imgcache_src
IMGCACHE_DEFAULT_CLASS='img-responsive'
IMGCACHE_DEFAULT_Q='10' # default resizing percent
IMGCACHE_TMP_DIR='img-cache' # full path will be /tmp/img-cache
IMGCACHE_KEY_PREFIX='django-img-cache' # cache key prefix
IMGCACHE_DEFAULT_CONTENT_CLASS='img-blur' # used in imgcache_content
IMGCACHE_DEFAULT_CONTENT_STYLE='width:100%' # used in imgcache_content
```
* Resizing Percent `Q or q` Explaination:
```
intial image of width(W) and height(H) after resizing to Q percent say 20
final image will be of 0.2W and 0.2H, keeping aspect ratio same.
```
* You can also pass required width and height in pixels instead of resizing percentage.
### Template Usage
* first load the template tag:
```
{% load imgcache %}
```
* there are `imgcache` tag and two filter tag `imgcache_src` and `imgcache_content`
```html
{% load imgcache %}
.img-blur {
filter: blur(7px);
/* this is needed so Safari keeps sharp edges */
transform: scale(1);
width: 100%;
}
{% imgcache blog.image.url q="10" as img %}
{{img | safe}}
{% endimgcache %}
Description
This is blog contents....
{{blog.content | imgcache_content | safe}}
// show cached images of low quality with blur effect and do lazy loading of HQ img
// and replace them on loading.
// similar to medium.com, the blur effect on low quality image initialy and then full high quality image
window.onload = function() {
var images = document.querySelectorAll('.img-blur');
images.forEach(function(img){
var largeImage = new Image();
largeImage.src = img.dataset.src;
largeImage.onload = function(){
img.src = largeImage.src;
img.classList.remove('img-blur');
}
})
}
```
* There will be initially slow loading of page because it will take sometime to download and cache all those images, on successive loading it will be blazing fast.
* Screenshot of Redis-DB afer page loading:
