{"id":22096698,"url":"https://github.com/prdpx7/django-img-cache","last_synced_at":"2026-05-06T22:11:47.045Z","repository":{"id":83506536,"uuid":"135931399","full_name":"prdpx7/django-img-cache","owner":"prdpx7","description":"A :zap: fast hack of image caching on django for progressive image loading","archived":false,"fork":false,"pushed_at":"2018-09-09T17:31:12.000Z","size":180,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-24T01:17:39.577Z","etag":null,"topics":["django","django-plugin","python","redis"],"latest_commit_sha":null,"homepage":"","language":"Python","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/prdpx7.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-06-03T18:50:40.000Z","updated_at":"2023-03-04T08:52:20.000Z","dependencies_parsed_at":null,"dependency_job_id":"f2304a4c-afd2-4c65-b7b8-e6f14c0c60cf","html_url":"https://github.com/prdpx7/django-img-cache","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/prdpx7/django-img-cache","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prdpx7%2Fdjango-img-cache","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prdpx7%2Fdjango-img-cache/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prdpx7%2Fdjango-img-cache/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prdpx7%2Fdjango-img-cache/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/prdpx7","download_url":"https://codeload.github.com/prdpx7/django-img-cache/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prdpx7%2Fdjango-img-cache/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32713961,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-06T19:35:05.142Z","status":"ssl_error","status_checked_at":"2026-05-06T19:35:03.996Z","response_time":117,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["django","django-plugin","python","redis"],"created_at":"2024-12-01T04:12:18.041Z","updated_at":"2026-05-06T22:11:47.012Z","avatar_url":"https://github.com/prdpx7.png","language":"Python","funding_links":[],"categories":[],"sub_categories":[],"readme":"# django-img-cache\n\u003e A quick hack for faster image caching at back-end for progressive image loading on django website.\n\n## Features\n* supports image resizing for all formats \n* faster image caching at backend on redis/memcached db\n* saving your CDN cost ;)\n* Tested on django \u003e=1.10\n\n## Installation\n```shell\npip install django-img-cache\n```\n\n## Usage\n### Project Setting\n* After installation, register the app in INSTALLED_APPS section of your project settings.\n```\nINSTALLED_APPS = (\n    'blog',\n    'news',\n    'all_auth',\n\n    'img_cache',\n)\n```\n### Default Settings for app\n* These are default `settings`, you can overwrite them in Project `settings` as per requirement.\n```\nIMGCACHE_DEFAULT_STYLE='width:100%' # used in imgcache and imgcache_src\nIMGCACHE_DEFAULT_CLASS='img-responsive'\nIMGCACHE_DEFAULT_Q='10' # default resizing percent\nIMGCACHE_TMP_DIR='img-cache' # full path will be /tmp/img-cache\nIMGCACHE_KEY_PREFIX='django-img-cache' # cache key prefix\nIMGCACHE_DEFAULT_CONTENT_CLASS='img-blur' # used in imgcache_content\nIMGCACHE_DEFAULT_CONTENT_STYLE='width:100%' # used in imgcache_content\n```\n* Resizing Percent `Q or q` Explaination:\n```\nintial image of width(W) and height(H) after resizing to Q percent say 20\nfinal image will be of 0.2W and 0.2H, keeping aspect ratio same.\n```\n* You can also pass required width and height in pixels instead of resizing percentage. \n### Template Usage\n* first load the template tag:\n```\n{% load imgcache %}\n```\n* there are `imgcache` tag and two filter tag `imgcache_src` and `imgcache_content`\n```html\n\u003chtml\u003e\n{% load imgcache %}\n\u003chead\u003e\n    \u003cstyle\u003e\n        .img-blur {\n            filter: blur(7px);\n            /* this is needed so Safari keeps sharp edges */\n            transform: scale(1);\n            width: 100%;\n        }\n    \u003c/style\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n    \u003c!---\n        safe tag for rendering html of img,\n        q=10 -\u003e resize to 10% img width and height\n    !--\u003e\n    {% imgcache blog.image.url q=\"10\" as img %}\n        {{img | safe}}  \n    {% endimgcache %}\n    \u003ch2\u003eDescription\u003c/h2\u003e\n    \u003cimg class=\"img-responsive img-blur\" src=\"{{blog.header_image.url | imgcache_src:'10' }}\" data-src=\"{{blog.header_image.url}}\" /\u003e\n    \u003cp\u003eThis is blog contents....\u003c/p\u003e\n    \u003c!--\n    1. blog.content is full of html markup containing images and divs, so imgcache_content tag will replace existing img tags with img tags containing cached_img src and that is there is also safe filter after that to render html in browser.\n    2.you can class and style for imgcache_content in settings e.g: IMGCACHE_DEFAULT_CONTENT_CLASS='your-desired-class-of-css'\n    !--\u003e\n    {{blog.content | imgcache_content | safe}}\n\n    \u003c!--\n     imgcache_src:'3'; here 3 is q(resizing percent)\n    !--\u003e\n    \u003cimg class=\"img-responsive img-blur\" src=\"{{blog.footer_image.url | imgcache_src:'3' }}\" data-src=\"{{blog.footer_image.url}}\" /\u003e\n\u003c/body\u003e\n\u003cscript type=\"text/javascript\"\u003e\n// show cached images of low quality with blur effect and do lazy loading of HQ img\n// and replace them on loading.\n// similar to medium.com, the blur effect on low quality image initialy and then full high quality image\nwindow.onload = function() {\n  var images = document.querySelectorAll('.img-blur');\n  images.forEach(function(img){\n      var largeImage = new Image();\n      largeImage.src = img.dataset.src;\n      largeImage.onload = function(){\n        img.src = largeImage.src;\n        img.classList.remove('img-blur');\n      }\n  })\n}\n\u003c/script\u003e\n\u003c/html\u003e\n```\n* 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.\n\n* Screenshot of Redis-DB afer page loading:\n\n\u003cimg src=\"./redis_snap.png\"\u003e\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprdpx7%2Fdjango-img-cache","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fprdpx7%2Fdjango-img-cache","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprdpx7%2Fdjango-img-cache/lists"}