{"id":37262323,"url":"https://github.com/frontycore/responsive-images","last_synced_at":"2026-01-15T23:20:21.903Z","repository":{"id":62507591,"uuid":"379062561","full_name":"frontycore/responsive-images","owner":"frontycore","description":"Library that will make working with images in your responsive Wordpress template a breeze.","archived":false,"fork":false,"pushed_at":"2025-06-03T22:28:46.000Z","size":93,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2026-01-14T13:57:41.564Z","etag":null,"topics":["bootstrap","images","php-library","responsive","wordpress"],"latest_commit_sha":null,"homepage":"","language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/frontycore.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2021-06-21T21:05:03.000Z","updated_at":"2025-06-03T22:28:47.000Z","dependencies_parsed_at":"2023-12-18T03:30:00.281Z","dependency_job_id":"0b667d29-f168-46cb-9552-2d4f360fa249","html_url":"https://github.com/frontycore/responsive-images","commit_stats":null,"previous_names":[],"tags_count":22,"template":false,"template_full_name":null,"purl":"pkg:github/frontycore/responsive-images","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/frontycore%2Fresponsive-images","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/frontycore%2Fresponsive-images/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/frontycore%2Fresponsive-images/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/frontycore%2Fresponsive-images/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/frontycore","download_url":"https://codeload.github.com/frontycore/responsive-images/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/frontycore%2Fresponsive-images/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28473974,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-15T22:27:41.514Z","status":"ssl_error","status_checked_at":"2026-01-15T21:54:47.910Z","response_time":62,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: 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":["bootstrap","images","php-library","responsive","wordpress"],"created_at":"2026-01-15T23:20:20.806Z","updated_at":"2026-01-15T23:20:21.897Z","avatar_url":"https://github.com/frontycore.png","language":"PHP","funding_links":[],"categories":[],"sub_categories":[],"readme":"# RESPONSIVE IMAGES FOR WORDPRESS\n\nLibrary that will make working with images in your responsive Wordpress template a breeze.\n\n**What's in the box:**\n- Generates \\\u003cimg\\\u003e tags with precise `srcset` and `sizes` attributes for images from WP Media Library.\n- Generates \\\u003cimg\\\u003e tags wrapped in aspect-ratio preserving wrapper for both WP Media images and theme images. Great to prevent CLS with lazyloaded images.\n- Clean API to define responsive image sizes in either mobile-first (min-width) or desktop-first (max-width) manner.\n- Helper to define images sizes based on taken colums in Bootstrap grid for each breakpoint.\n- Replace responsive image in Gutenberg image block.\n- Generates sanitized and minified \\\u003csvg\\\u003e code, which can be safely inlined to HTML.\n\n\n**Code**\n```php\n\u003c?php\n$sizes = img_sizes([\n\t0 =\u003e [400, 250], // 400x250px cropped image for viewport 0 - 575px\n\t576 =\u003e 500, // 500px wide, proportional height image for viewpoer 576 - 767px\n\t768 =\u003e 700, // ...\n\t992 =\u003e 900,\n\t1200 =\u003e 1100\n]);\nimg_upload($attachment_id)-\u003eresponsiveImgTag($sizes, ['class' =\u003e 'img-fluid', 'alt' =\u003e 'My image']);\n```\n\n**Output**\n```html\n\u003cimg\n\tsrc=\"https://res.cloudinary.com/your-name/q_auto:eco,f_auto,w_1100,c_fit/your-project/2021/05/your-image.jpg\"\n\tsizes=\"(min-width: 1200px) 1100px,\n\t\t(min-width: 992px) 900px,\n\t\t(min-width: 768px) 700px,\n\t\t(min-width: 576px) 500px,\n\t\t400px\"\n\tsrcset=\"https://res.cloudinary.com/your-name/q_auto:eco,f_auto,w_1100,c_fit/your-project/2021/05/your-image.jpg 1100w,\n\t\thttps://res.cloudinary.com/your-name/q_auto:eco,f_auto,w_900,c_fit/your-project/2021/05/your-image.jpg 900w,\n\t\thttps://res.cloudinary.com/your-name/q_auto:eco,f_auto,w_700,c_fit/your-project/2021/05/your-image.jpg 700w,\n\t\thttps://res.cloudinary.com/your-name/q_auto:eco,f_auto,w_500,c_fit/your-project/2021/05/your-image.jpg 500w,\n\t\thttps://res.cloudinary.com/your-name/q_auto:eco,f_auto,w_400,h_250,c_fill/your-project/2021/05/your-image.jpg 400w\"\n\twidth=\"1100\" height=\"619\"\n\talt=\"My image\"\n\tclass=\"img-fluid\"\u003e\n```\n\n\u003e **Thanks a lot to [Adam Laita](https://github.com/adam-laita) and [his post](https://naswp.cz/mistrovska-optimalizace-obrazku-nejen-pro-wordpress/) about image optimization (in Czech only). It was the original inspiration for this library.**\n\n# Instalation\n\n## Option 1: with Composer\n\nRecommended way to install the library is using Composer:\n\n```\ncomposer require fronty/responsive-images\n```\n\nInclude composer's autoload in `functions.php`:\n\n```php\n// functions.php\nrequire_once(__DIR__ . '/vendor/autoload.php');\n```\n\n## Option 2: without Composer\n\n1. [Download source code of the library](https://github.com/frontycore/responsive-images/archive/refs/heads/master.zip) and unzip it into your theme directory.\n1. Require files manually in `functions.php`\n\n```php\n// functions.php\n\nrequire_once(__DIR__ . '/responsive-images-master/src/Sizes/ImageSize.php');\nrequire_once(__DIR__ . '/responsive-images-master/src/Sizes/ImageSizeList.php');\nrequire_once(__DIR__ . '/responsive-images-master/src/Sizes/BootstrapSizes.php'); // Required only if you use Bootstrap\n\nrequire_once(__DIR__ . '/responsive-images-master/src/BaseImage.php');\nrequire_once(__DIR__ . '/responsive-images-master/src/UploadImage.php');\nrequire_once(__DIR__ . '/responsive-images-master/src/ThemeImage.php');\n```\n\n\n## WP Plugins\n\n1. Install **[Fly Dynamic Image Resizer](https://cs.wordpress.org/plugins/fly-dynamic-image-resizer/)** and activate it on local development version. You can use this on production as well, but you would miss the speed of CDN.\n\n1. On production version install, activate and configure **[Auto Cloudinary](https://wordpress.org/plugins/auto-cloudinary/)**, which will automatically upload all your images to [Cloudinary](https://cloudinary.com/) using it's fetch API.\n\nThis library decides whether to use *Fly Dynamic Image Resizer* or *Auto Cloudinary* plugin, but make sure **only one of these plugins is activated at a time**. If none of these plugins is activated, library will fall back to default Wordpress attachment getter `wp_get_attachment_image_src()` with size given as array.\n\nThe library can work with SVGs as well. To support SVGs in WP Media Library, install **[SVG Support](https://wordpress.org/plugins/svg-support/)**.\n\n\n\u003e **With this, you are ready to instantiate all classes described below directly in your template files.** However to optimize your images and code as much as possible, there are [more steps suggested](./readme/configuration.md).\n\n\n# Working with image sizes\n\nTo work with responsive images, we first has to prepare one or more image sizes for various breakpoints. Image sizes can be defined using following classes:\n- [`Fronty\\ResponsiveImages\\Sizes\\ImageSize`](./readme/image-sizes.md#imagesize-object) is representation of image dimensions and transformations. This class alone is used for non-responsive images, where only one size is required.\n- [`Fronty\\ResponsiveImages\\Sizes\\ImageSizeList`](./readme/image-sizes.md#imagesizelist-object) is representation of group of ImageSize objects and is used for responsive images, where different size is required for each breakpoint.\n- [`Fronty\\ResponsiveImages\\Sizes\\BootstrapSizes`](./readme/image-sizes.md#bootstrapsizes-object) is helper class to generate ImageSizeList according to specified container width and grid columns.\n\nSee [detailed documentation of these objects](./readme/image-sizes.md).\n\n\n# Working with images\n\nLibrary includes two main classes for work with images:\n- [`Fronty\\ResponsiveImages\\UploadImage`](./readme/images.md#uploadimage-object) for images uploaded by user in WP Media Gallery\n- [`Fronty\\ResponsiveImages\\ThemeImage`](./readme/images.md#themeimage-object) for images located inside your theme directory (logos, backgrounds, etc.)\n\nSee [detailed documentation of these objects](./readme/images.md).\n\n\n# WP filters\n\nBoth ThemeImage and UploadImage objects allows you to change some of their outputs using [WP filter mechanism](https://developer.wordpress.org/plugins/hooks/filters/).\n\nSee [list of all filters available](./readme/wp-filters.md).\n\n\n# Dependencies\n\n### Nette\\Utils\nThe code depends on lightweight utility classes from [Nette\\Utils](https://github.com/nette/utils), especially following classes:\n- [HTML elements](https://doc.nette.org/en/3.1/html-elements) for img HTML tags handling\n- [Strings](https://doc.nette.org/en/3.1/strings) for safe UTF-8 strings manipulation\n- [ArratHash](https://doc.nette.org/en/3.1/arrays#toc-arrayhash) for smart array-like object\n\n\n### Other dependencies\n- [enshrined/svg-sanitize](https://github.com/darylldoyle/svg-sanitizer): Remove ids and classes of uploded SVGs before they are inlined to template.\n- [paquettg/php-html-parser](https://github.com/paquettg/php-html-parser) Replace responsive image tag in Gutenberg image block.\n\n---\n\n@todo\n\t- nemazat src v lazyloadingu, misto toho dat placeholder (doplnit do konfigurace)\n\t- UploadImage ","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffrontycore%2Fresponsive-images","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffrontycore%2Fresponsive-images","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffrontycore%2Fresponsive-images/lists"}