{"id":18031839,"url":"https://github.com/web-tiki/picture-builder","last_synced_at":"2025-10-28T20:33:24.647Z","repository":{"id":82379590,"uuid":"125355463","full_name":"web-tiki/picture-builder","owner":"web-tiki","description":"Joomla plugin to generate thumbnails and output a picture element for responsive images","archived":false,"fork":false,"pushed_at":"2018-03-29T07:15:30.000Z","size":56,"stargazers_count":3,"open_issues_count":2,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-23T04:41:25.390Z","etag":null,"topics":["image-processing","joomla","joomla-plugin","php","responsive-images"],"latest_commit_sha":null,"homepage":null,"language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/web-tiki.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-03-15T11:11:13.000Z","updated_at":"2021-04-22T06:00:38.000Z","dependencies_parsed_at":"2023-03-02T08:15:59.205Z","dependency_job_id":null,"html_url":"https://github.com/web-tiki/picture-builder","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/web-tiki%2Fpicture-builder","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/web-tiki%2Fpicture-builder/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/web-tiki%2Fpicture-builder/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/web-tiki%2Fpicture-builder/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/web-tiki","download_url":"https://codeload.github.com/web-tiki/picture-builder/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245791342,"owners_count":20672665,"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":["image-processing","joomla","joomla-plugin","php","responsive-images"],"created_at":"2024-10-30T10:11:10.750Z","updated_at":"2025-10-28T20:33:19.582Z","avatar_url":"https://github.com/web-tiki.png","language":"PHP","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Picture builder for joomla!\nThis is a Joomla! plugin to generate thumbnails and output a picture element for responsive images.  \nThe function uses parameteres to set:\n- the width of the thumbnails\n- the heights of the thumbnails\n- the breakpoints \n- the thumbnail compression quality.\n\nIt relies on the imagick or GD php image libraries.\n\n## Responsive image plugin usage\nThe plugin can be called in template overrides. You also need to trigger the content plugins if it hasen't already been done.   \nHere is an example:\n\n```\nJPluginHelper::importPlugin('content');\necho plgContentPicturebuilder::picturebuilder($imageUrl, $altText, $params);\n```\n### Function parameters\n\n`$imageUrl` is the original image all the thumbnails should be generated from.  \n`$altText` is the alternative text for the image.  \n`$params` is an array. It looks like this :\n\n\n```\n$params = array(\n    'thumbWidths'  =\u003e array( 600, 750, 1200, 1480, 2001),\n    'thumbHeights' =\u003e array( 600, 750, 1200, 1480, 2001),\n    'breakPoints'  =\u003e array( 450, 650, 950, 1500),\n    'quality'      =\u003e 70\n);\n```\n\nThis array defines the sizes of thumbnails, breakpoints and tumbnail compression. It is either an array of sizes as shown above, either an id or string that refers to parameters set in the plugin options in backend.\n\nAt this point, the thumb widths and heights must have 5 values and there must be 4 breakpoints. The plugin generates 10 thumbnails :\n- 5 thumbnails with the specified sizes\n- 5 thumbnails with these sizes multiplied by 1.5 for HD images (to be displayed on screens with a higher pixel ratio)\n\nThe thumbHeights can be `null` if you only need to specify the width of the thumbnails and keep the aspect ratio of the original image.\n\n## Picture element output\nThe plugin outputs a picture element for **responsive images**.   \nThis is an example HTML output :\n\n```\n\u003cpicture\u003e\n    \u003csource srcset=\"image-9-3001x2002q70.jpg 2x,image-8-2001x1335q70.jpg\" media=\"(min-width: 1500px)\"\u003e\n    \u003csource srcset=\"image-7-2220x1481q70.jpg 2x,image-6-1480x987q70.jpg\" media=\"(min-width: 950px) and (max-width: 1499px)\"\u003e\n    \u003csource srcset=\"image-5-1800x1201q70.jpg 2x,image-4-1200x800q70.jpg\" media=\"(min-width: 650px) and (max-width: 949px)\"\u003e\n    \u003csource srcset=\"image-3-1125x750q70.jpg 2x,image-2-750x500q70.jpg\" media=\"(min-width: 450px) and (max-width: 649px)\"\u003e\n    \u003csource srcset=\"image-1-900x600q70.jpg 2x,image-0-600x400q70.jpg\" media=\"(max-width: 449px)\"\u003e\n    \u003cimg src=\"image-8-2001x1335q70.jpg\" srcset=\"image-9-3001x2002q70.jpg 2x,image-8-2001x1335q70.jpg\" alt=\"This is a test image\" width=\"2001\" height=\"1335\"\u003e\n\u003c/picture\u003e\n```\n\n## Requirements and warning\n- Joomla! \u003e= 3.2\n- Imagick must be installed on your server (A fallback to the GD library has been implemented but see \"help need\" section to make it better)\n- This isn't a plug and play plugin yet. You need to know about template overrides to use it and call the apropriate function to build the responsive picture element.\n- The plugin generates thumbnails but it can't delete them\n- only tested on `.png` and `.jpeg` images but it should work on many more extensions (imagick supports a lot)\n\n\n## Issues end help needed to:\n- Make a fallback to the GD library (This is done but the compression isn't good, files are huge adn no compression for png files yet)\n- Redesign the plugin to let the user specify the number of thumbnails and breakpoints\n- Find a solution to update the thumbnails if original image changes but keeps the same size (width and height)\n- Delete the thumbnails when the original image changes or is deleted\n- Why does the parameters need to be nested in a second level of array when the event is called?\n- Joomla 4 will imprement the [event package](https://github.com/joomla-framework/event/tree/2.0-dev). Event call should be changed then.\n- Errors when there are a lot of images to generate at the same time\n-------------\n\nCreated by [web-tiki](https://web-tiki.com)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fweb-tiki%2Fpicture-builder","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fweb-tiki%2Fpicture-builder","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fweb-tiki%2Fpicture-builder/lists"}