{"id":18156176,"url":"https://github.com/artsunique/sage-image-component","last_synced_at":"2025-04-07T01:51:16.196Z","repository":{"id":260249761,"uuid":"880774193","full_name":"artsunique/sage-image-component","owner":"artsunique","description":"\u003cx-picture\u003e Component for Optimized Image Handling in WordPress (Sage Roots.io)","archived":false,"fork":false,"pushed_at":"2024-10-30T10:58:34.000Z","size":15,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-13T07:18:56.928Z","etag":null,"topics":["acf","media-handling","spatie","wordpress"],"latest_commit_sha":null,"homepage":"","language":"Blade","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/artsunique.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":"2024-10-30T10:33:54.000Z","updated_at":"2024-11-20T14:01:05.000Z","dependencies_parsed_at":"2024-10-30T11:43:43.259Z","dependency_job_id":null,"html_url":"https://github.com/artsunique/sage-image-component","commit_stats":null,"previous_names":["artsunique/sage-image-component"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/artsunique%2Fsage-image-component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/artsunique%2Fsage-image-component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/artsunique%2Fsage-image-component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/artsunique%2Fsage-image-component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/artsunique","download_url":"https://codeload.github.com/artsunique/sage-image-component/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247578618,"owners_count":20961270,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["acf","media-handling","spatie","wordpress"],"created_at":"2024-11-02T05:05:40.387Z","updated_at":"2025-04-07T01:51:16.176Z","avatar_url":"https://github.com/artsunique.png","language":"Blade","funding_links":[],"categories":[],"sub_categories":[],"readme":"###  \u003cx-picture\u003e Component for Optimized Image Handling in WordPress (Sage Roots.io)\n\nThe \u003cx-picture\u003e component provides a refined and efficient solution for image handling in WordPress projects based on the Roots.io Sage framework. It minimizes reliance on default WordPress media processing, focusing instead on custom-optimized image rendering and management. This component bypasses WordPress’s default media handling and enables full control over image optimization, format, dimensions, and focal cropping—ideal for developers aiming for performance-driven, streamlined WordPress solutions.\n\n## Why \u003cx-picture\u003e?\n\nWordPress’s built-in media processing generates multiple sizes for each upload, which often leads to redundant image files and storage inefficiencies. By switching to \u003cx-picture\u003e, you gain:\n\n- Custom, lean image generation with no redundant WordPress-generated versions.\n- High-quality, adaptive image optimization with flexible parameters for precise control.\n- Automatic cleanup of all optimized image versions when the original is deleted.\n- Enhanced SEO and accessibility with custom alt, title, and aria-label attributes.\n- Native compatibility with Sage to ensure a modern and developer-friendly integration.\n\n## Key Features\n- Customized Image Generation (components/picture.blade.php):\n- Create responsive, optimized images directly within Blade templates.\n- Configure dimensions, quality, format (WebP, JPG), and focal cropping as needed.\n- Automate optimized image caching for quick re-use.\n- Image Cleanup Function in functions.php:\n- Automatically removes all optimized versions of an image upon deletion of the original.\n- Simplifies storage management by removing unused files, ensuring minimal footprint.\n\n## Advantages\n- Full Control: Override WordPress’s default media handling to generate only the images you need.\n- Customizable Quality and Formats: Configure dimensions, format, and quality without bloating storage.\n- Automatic Cleanup: Optimized image versions are deleted alongside the original image, keeping storage tidy.\n- SEO and Accessibility: Set alt, title, and aria-label attributes for each image instance.\n\nSeamless Integration with Sage: Works natively with Roots.io’s Sage theme, providing modern image handling that aligns with Sage’s philosophy.\n\nSwitching to \u003cx-picture\u003e replaces WordPress’s default, size-intensive media handling with a focused, optimized image workflow. \nThis approach ensures your images are responsive, SEO-friendly, and streamlined for a more efficient and effective WordPress experience.\n\n## Installation and Setup\n##### Add Spatie Dependencies to Your Theme Folder:\ncomposer require spatie/image\ncomposer require spatie/image-optimizer\n\n##### Add the Custom Cleanup Function to functions.php:\nThis function ensures that optimized images are automatically deleted when the original is removed. Place this code in your functions.php file:\n\n```\nadd_filter('intermediate_image_sizes_advanced', function($sizes) {\n    return []; // Disables automatic generation of WordPress intermediate sizes\n});\n\nadd_action('delete_attachment', function($attachment_id) {\n    $upload_dir = wp_get_upload_dir();\n    $original_path = get_attached_file($attachment_id);\n\n    if ($original_path) {\n        $filename = pathinfo($original_path, PATHINFO_FILENAME);\n        $patterns = [\n            $upload_dir['basedir'] . '/' . $filename . '-*',\n            $upload_dir['basedir'] . '/optimized-' . $filename . '-*'\n        ];\n\n        foreach ($patterns as $pattern) {\n            foreach (glob($pattern) as $file) {\n                if (file_exists($file)) {\n                    unlink($file);\n                }\n            }\n        }\n    }\n});\n```\n\n##### Add picture.blade.php to Your Theme:\nPlace picture.blade.php in resources/views/components/ within your theme directory.\n\n\n##### Usage Examples\n\n##### WordPress Thumbnail (Featured Image)\nTo use \u003cx-picture\u003e with a featured image, pass in the thumbnail ID\n\n```\n\u003cx-picture \n    :src=\"get_post_thumbnail_id()\" \n    width=\"800\" \n    height=\"600\" \n    quality=\"80\" \n    format=\"jpg\" \n    alt=\"Featured Image\"\n/\u003e\n```\n\n##### ACF Image Field\nIf using ACF to manage images, simply pass in the field name:\n```\n\u003cx-picture \n    :src=\"'my_acf_image_field'\"  {{-- Replace with your ACF field name --}}\n    width=\"400\" \n    height=\"300\" \n    quality=\"70\" \n    format=\"webp\" \n    alt=\"Custom ACF Image\"\n/\u003e\n```\n##### Static Image\nFor static images hosted on your site or a CDN, provide the full URL:\n```\n\u003cx-picture \n    src=\"https://yourwebsite.com/wp-content/uploads/2024/10/static-image.jpg\" \n    width=\"600\" \n    height=\"400\" \n    quality=\"90\" \n    format=\"png\" \n    alt=\"Static Image\"\n/\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fartsunique%2Fsage-image-component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fartsunique%2Fsage-image-component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fartsunique%2Fsage-image-component/lists"}