{"id":21277924,"url":"https://github.com/b13/picture","last_synced_at":"2025-04-06T15:13:37.408Z","repository":{"id":41085803,"uuid":"311275261","full_name":"b13/picture","owner":"b13","description":"A TYPO3 ViewHelper for flexible image renderings","archived":false,"fork":false,"pushed_at":"2025-03-23T14:42:43.000Z","size":451,"stargazers_count":20,"open_issues_count":3,"forks_count":7,"subscribers_count":12,"default_branch":"master","last_synced_at":"2025-04-05T18:11:39.466Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/b13.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","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":"2020-11-09T08:44:25.000Z","updated_at":"2025-03-23T14:42:47.000Z","dependencies_parsed_at":"2023-02-18T09:00:32.592Z","dependency_job_id":"9940062f-9785-434d-98c6-7d497989f1bc","html_url":"https://github.com/b13/picture","commit_stats":{"total_commits":62,"total_committers":11,"mean_commits":5.636363636363637,"dds":0.6290322580645161,"last_synced_commit":"ae2bc75da048c47f15e904bee50482508e1f3088"},"previous_names":[],"tags_count":22,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/b13%2Fpicture","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/b13%2Fpicture/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/b13%2Fpicture/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/b13%2Fpicture/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/b13","download_url":"https://codeload.github.com/b13/picture/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247500469,"owners_count":20948880,"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":[],"created_at":"2024-11-21T10:08:16.499Z","updated_at":"2025-04-06T15:13:37.384Z","avatar_url":"https://github.com/b13.png","language":"PHP","funding_links":[],"categories":[],"sub_categories":[],"readme":"![CI](https://github.com/b13/picture/actions/workflows/ci.yml/badge.svg)\n\n# b13 Image View Helper\n\n## What it does\nThe b13 image view helper is a massive extension of the regular Fluid image ViewHelper. Basically it processes images\nand renders a single src element or a picture element depending on the specified configuration.\n\n## Installation\n\nInstall the extension using composer: `composer req b13/picture`.\n\nInclude the TypoScript within your main template: \n\n```\n@import 'EXT:picture/Configuration/TypoScript/setup.typoscript'\n```\n\n## Use Fluid Namespace `B13\\Picture`\n\nUse a proper configured Fluid template adding the namespace when using this ViewHelper:\n\n```\n\u003chtml\n  xmlns:f=\"http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers\"\n  xmlns:i=\"http://typo3.org/ns/B13/Picture/ViewHelpers\"\n  data-namespace-typo3-fluid=\"true\"\n\u003e\n```\n\n## TypoScript setup\n\nSee `EXT:picture/Configuration/TypoScript/setup.typoscript` for possible configuration options (key: `plugin.tx_picture`):\n\n| TypoScript Configuration option | Description |\n|---------------------------------|-------------|\n| addWebp | Add webp alternative image files as sources. \u003cbr\u003e_default: 0_ |\n| onlyWebp | Enable only images in webp format and for all size variants. \u003cbr\u003e_default: 0_ |\n| useRetina | Add retina (2x) version of all images as sizes variants. \u003cbr\u003e_default: 0_ |\n| lossless | Enable lossless compression for webp images. \u003cbr\u003e_default: 0_ |\n| retina | Use custom or multiple multipliers for calculating retina image variants. \u003cbr\u003e_default: \u003cbr\u003eretina.2 = 2x\u003cbr\u003eOnly works in combination with `useRetina = 1` |\n| breakpoints | Use named breakpoints for easier markup of different image sizes for one picture element.\u003cbr\u003e_default: empty_. |\n| lazyLoading | Use the `loading` attribute with images. See [Browser Native Lazy Loading by Default](https://b13.com/blog/lazy-loading-just-got-lazier-in-typo3-v10)\u003cbr\u003e_default: {$types.content.image.lazyLoading}_ |\n\n## Attributes\n\n### All from f:image\nOur image ViewHelper mimics the Fluid Image ViewHelper, so it has all the same attributes, including:\n* `width` and `height`, including `c` option for crop scaling\n* `maxWidth` for proportional scaling, without upscaling\n* `fileExtension` to set a file extension (to force webp for example)\n* `alt` and `title`\n* `cropVariant`\n* `loading` to enable [browser native lazy loading by default](https://b13.com/blog/lazy-loading-just-got-lazier-in-typo3-v10).\n\n### useRetina\nIf useRetina is set and not further specified in TypoScript setup, the corresponding `img` tag's or `source` tag’s\nattribute `srcset` is extended by a 2x retina version of the image.\n\n### addWebp\nAdds rendering of additional images in webp format. If it is specified without a given sources attribute, it renders a\npicture tag instead of a single img tag in order to maintain a browser fallback. If it is specified together with\n`sources` it adds an additional `source` tag above any `source` tag rendered by a given `sources` element.\nThis attribute is ignored if `onlyWebp` option is active.\n\n### onlyWebp\nEnable only images in webp format and for all size variants.\nEnabling this option disables `addWebp` setting.\n\n### lossless\nEnable lossless compression for webp images. If you find your webp images lacking in quality compared to jpg/png images, enable\nthis option to overwrite default settings for ImageMagick/GraphicsMagick. \n\n### variants and sizes\nAdds multiple variants of an image with different image sizes, optionally add a sizes-attribute to image tags:\n\n```\nvariants=\"400, 600, 800, 1000\" sizes=\"(min-width: 600px) 400px, 100vw\"\n```\nThis can also be part of the `sources`-Array (see below).\n\n### sources\nSources must be notated as array. For each element given a source tag is rendered. It accepts the same attributes as\nthe fluid image view helper. The source tags are rendered in the same ordering as specified in the array. If you do not\nspecify additional TypoScript settings, any key can be used.\n```\nsources=\"{\n    0: {\n        width: '300c', height: '300c', media: 'min-width: 1000px', cropVariant: 'desktop', variants: '400, 600, 800', sizes: '100vw'\n    },\n    1: {\n        width: '250c', height: '250c', media: 'min-width: 600px', src: alternativefile.uid, treatIdAsReference: 1\n    },\n    2: {\n        width: '200c', height: '200c', media: 'min-width: 300px', cropVariant: 'teaser'\n    }\n}\"\n```\n\n### pictureClass\nAdd a CSS class used for the `picture` element (if rendered using `\u003cpicture\u003e`).\n\n## TypoScript Settings\n\n### In general\nThe following attributes can also be set in TypoScript as defaults for your whole site: `addWebp`, `useRetina`. \nA default setting can be overridden for each usage of the ViewHelper by setting the corresponding attribute.\n\n### retina\nThe `retina` option enables an extension of the default behaviour of the `useRetina` attribute. If `retina` is set, an\narray should be specified with the multiplier for the image size as key, and the multiplier value output in the\ncorresponding tag.\n\n```\nretina {\n    2 = 2x\n    3 = 3x\n}\n```\n\n### breakpoints\nWith the array `breakpoints` you can use those settings by using keys in your Fluid template (instead of adding media\nqueries for every key in your `sources` array). It simply adds a media query for min-width.\n\n```\nbreakpoints {\n    sm = 640\n    md = 1024\n    lg = 1280\n}\n```\n\n## Test rendering for demonstration purposes\nYou can include a test configuration to see the ViewHelper in your test instance frontend in action:\n\n`@import 'EXT:picture/Configuration/TypoScript/test.typoscript'`\n\nThis configuration enables frontend rendering of the test file with lots of different rendering examples using the \npage type `1573387706874`. \n\n`https://your.local.test.environment/?type=1573387706874`\n\nwill render a page with different options to showcase code examples. This is intended for demonstration and testing\npurposes, not meant for your production environment.\n\n## Credits\n\nThis extension was created by Andreas Hämmerl and David Steeb in 2019 for b13 GmbH, Stuttgart.\n\n[Find more TYPO3 extensions we have developed](https://b13.com/useful-typo3-extensions-from-b13-to-you) that help us\ndeliver value in client projects. As part of the way we work, we focus on testing and best practices ensuring long-term\nperformance, reliability, and results in all our code. \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fb13%2Fpicture","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fb13%2Fpicture","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fb13%2Fpicture/lists"}