{"id":21330519,"url":"https://github.com/friendsofredaxo/media_srcset","last_synced_at":"2025-07-12T08:32:35.906Z","repository":{"id":10690494,"uuid":"66644015","full_name":"FriendsOfREDAXO/media_srcset","owner":"FriendsOfREDAXO","description":"Media-SrcSet implementiert SRCSET-Funktionalität.","archived":false,"fork":false,"pushed_at":"2024-08-09T16:08:46.000Z","size":85,"stargazers_count":40,"open_issues_count":0,"forks_count":4,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-04-06T17:12:12.478Z","etag":null,"topics":["addon","media","php","redaxo","redaxo-addon","srcset","srcset-builder"],"latest_commit_sha":null,"homepage":"","language":"PHP","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/FriendsOfREDAXO.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}},"created_at":"2016-08-26T11:55:34.000Z","updated_at":"2025-04-04T09:38:49.000Z","dependencies_parsed_at":"2024-08-09T16:22:54.963Z","dependency_job_id":null,"html_url":"https://github.com/FriendsOfREDAXO/media_srcset","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"purl":"pkg:github/FriendsOfREDAXO/media_srcset","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FriendsOfREDAXO%2Fmedia_srcset","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FriendsOfREDAXO%2Fmedia_srcset/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FriendsOfREDAXO%2Fmedia_srcset/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FriendsOfREDAXO%2Fmedia_srcset/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/FriendsOfREDAXO","download_url":"https://codeload.github.com/FriendsOfREDAXO/media_srcset/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FriendsOfREDAXO%2Fmedia_srcset/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264962498,"owners_count":23689822,"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":["addon","media","php","redaxo","redaxo-addon","srcset","srcset-builder"],"created_at":"2024-11-21T22:20:38.323Z","updated_at":"2025-07-12T08:32:33.826Z","avatar_url":"https://github.com/FriendsOfREDAXO.png","language":"PHP","funding_links":[],"categories":[],"sub_categories":[],"readme":"# media_srcset\n\nAddon das einen neuen Effekt namens SRCSET hinzufügt (basierend auf dem resize-Effekt) und zusätzlich die Angabe eines SRCSET-Attributs ermöglicht.Rewrite URLs von YRewrite werden unterstützt.\n\n## Installation\n\n* Release herunterladen und entpacken.\n* Ordner umbenennen in `media_srcset`.\n* In den AddOns-Ordner legen: `/redaxo/src/addons`.\n\n## Hintergrund und Funktionsweise\n\n### Erklärung der `srcset`-Attribute für optimale Bilddarstellung\n\nWenn du Bilder auf deiner Website einfügst und sicherstellen möchtest, dass sie sowohl auf Desktop- als auch auf Mobilgeräten optimal angezeigt werden, ohne tausende neue MediaManager-Typen anzulegen, kannst du mit diesem Addon automatisiert die `srcset`- und `sizes`-Attribute in HTML verwenden. \n\n#### Beispiel für einen `srcset`-Eingabe-String im Addon:\n\n```\n470 470w, 940 470w 2x, 1410 470w 3x\n```\nDieser String wird im MM-Typ angegeben. \n\n### Was bedeutet dieser `srcset`-String?\n\n1. **470 470w**\n   - **470**: Die Breite des Bildes in Pixeln (470px).\n   - **470w**: Diese Größe ist für Bildschirme mit normaler (1x) Auflösung gedacht. Das Bild wird in 470px Breite angezeigt.\n\n2. **940 470w 2x**\n   - **940**: Die Breite des Bildes in Pixeln (940px), das für Bildschirme mit doppelter (2x) Auflösung gedacht ist.\n   - **470w**: Das Bild wird im Layout 470px breit angezeigt, aber für hochauflösende (Retina) Displays verwendet.\n\n3. **1410 470w 3x**\n   - **1410**: Die Breite des Bildes in Pixeln (1410px), das für Bildschirme mit dreifacher (3x) Auflösung gedacht ist.\n   - **470w**: Das Bild wird im Layout 470px breit angezeigt, aber für hochauflösende Displays verwendet.\n\n### Welche Auswirkungen hat das?\n\n1. **Desktop-Bildschirme:**\n   - **Normale Displays (1x)**: Das Bild wird in seiner Basisgröße von 470px angezeigt.\n   - **Retina Displays (2x)**: Der Browser verwendet das Bild mit 940px Breite, aber zeigt es auf dem Bildschirm in 470px Breite an. Dies sorgt für eine schärfere Darstellung auf hochauflösenden Displays.\n   - **Displays mit 3x-Auflösung**: Der Browser verwendet das Bild mit 1410px Breite, aber zeigt es auf dem Bildschirm in 470px Breite an, um maximale Klarheit auf sehr hochauflösenden Displays zu gewährleisten.\n\n2. **Mobile Geräte:**\n   - Die gleiche Logik wie auf Desktops wird angewendet. Der Browser wählt das am besten passende Bild basierend auf der Bildschirmauflösung aus, um sicherzustellen, dass das Bild klar und scharf aussieht, egal wie groß oder klein der Bildschirm ist.\n\n### Einfluss auf das `sizes`-Attribut\n\nDas `sizes`-Attribut gibt an, wie groß das Bild in verschiedenen Layouts angezeigt wird. Hier ein einfaches Beispiel:\n\n```html\n\u003cimg src=\"/path/to/default.jpg\" \n     srcset=\"/path/to/image-470.jpg 470w, \n             /path/to/image-940.jpg 940w 2x, \n             /path/to/image-1410.jpg 1410w 3x\" \n     sizes=\"(max-width: 600px) 100vw, 470px\" \n     alt=\"Beispielbild\"\u003e\n```\n\n- **`(max-width: 600px) 100vw`**: Wenn der Bildschirm maximal 600px breit ist (z.B. auf Mobilgeräten), wird das Bild die volle Breite des Bildschirms einnehmen (100vw).\n- **`470px`**: Für größere Bildschirme wird das Bild auf 470px Breite angezeigt.\n\nMit den richtigen `srcset`- und `sizes`-Attributen sorgt das Addon automatisch dafür, dass deine Bilder auf allen Geräten und Auflösungen scharf ausgespielt wird. Der `srcset`-String gibt dem Browser verschiedene Bildgrößen zur Auswahl, abhängig von der Bildschirmauflösung und Größe. Das `sizes`-Attribut hilft dem Browser zu entscheiden, welche Bildgröße am besten für die aktuelle Anzeige geeignet ist, basierend auf festen Pixelwerten.\n\n## Verwendung\n\nIm Feld SRCSET-Attribut die entsprechenden SRCSET-Angaben einfügen, allerdings statt eines Dateinamens die\ngewünschte Breite einfügen:\n\nz.B. `400 480w, 800 480w 2x, 700 768w`\n\nDie einzelnen SRCSET-Attribute lassen sich dann innerhalb des Templates über den Profilnamen einfügen:\n\n### Image-Tag\n\n#### Eingabe:\n\n```html\n\u003cimg src=\"index.php?rex_media_type=ImgTypeName\u0026rex_media_file=ImageFileName\"\n    srcset=\"rex_media_type=ImgTypeName\" /\u003e\n```\n\noder\n\n```php\necho '\u003cimg src=\"'.rex_media_manager::getUrl('ImgTypeName', 'ImageFileName').'\" srcset=\"rex_media_type=muh\" /\u003e';\n```\n\noder\n\n```php\necho rex_media_srcset::getImgTag('ImageFileName', 'ImgTypeName');\n```\n\n\n#### Generierte Ausgabe:\n\n```html\n\u003cimg src=\"index.php?rex_media_type=ImgTypeName\u0026rex_media_file=ImageFileName\"\n    srcset=\"index.php?rex_media_type=ImgTypeName__400\u0026rex_media_file=ImageFileName 480w\n            index.php?rex_media_type=ImgTypeName__700\u0026rex_media_file=ImageFileName 768w\n            index.php?rex_media_type=ImgTypeName__800\u0026rex_media_file=ImageFileName 960w\n    \"\u003e\n```\n\n### Picture-Tag\n\n#### Eingabe:\n\n```html\n\u003cpicture\u003e\n    \u003csource media=\"(min-width: 56.25em)\" srcset=\"rex_media_type=ImgTypeName\"\u003e\n    \u003csource srcset=\"rex_media_type=ImgTypeName\"\u003e\n    \u003cimg src=\"index.php?rex_media_type=ImgTypeName\u0026rex_media_file=ImageFileName\" alt=\"\"\u003e\n\u003c/picture\u003e\n```\n\noder\n\n```php\necho rex_media_srcset::getPictureTag('ImageFileName', 'ImgTypeName', ['(min-width: 56.25em)' =\u003e 'ImgTypeName']);\n```\n\n#### Generierte Ausgabe:\n\n```html\n\u003cpicture\u003e\n    \u003csource media=\"(min-width: 56.25em)\"\n        srcset=\"index.php?rex_media_type=ImgTypeName__400\u0026rex_media_file=ImageFileName 480w\n                index.php?rex_media_type=ImgTypeName__700\u0026rex_media_file=ImageFileName 768w\n                index.php?rex_media_type=ImgTypeName__800\u0026rex_media_file=ImageFileName 960w\n        \"\u003e\n    \u003csource\n        srcset=\"index.php?rex_media_type=ImgTypeName__400\u0026rex_media_file=ImageFileName 480w\n                index.php?rex_media_type=ImgTypeName__700\u0026rex_media_file=ImageFileName 768w\n                index.php?rex_media_type=ImgTypeName__800\u0026rex_media_file=ImageFileName 960w\n        \"\u003e\n    \u003cimg src=\"index.php?rex_media_type=ImgTypeName\u0026rex_media_file=ImageFileName\" alt=\"\"\u003e\n\u003c/picture\u003e\n```\n\n## srcset.js\n\nDas SRCSET Attribut kann auch als data-srcset Attribut eingebunden werden. Dann lädt der Browser zunächst das Standardbild (im SRC-Attribut). Wird das Script aus\n\n`assets/addons/media_srcset/srcset.js`\n\neingebunden, wird beim Laden der Seite sowie nach einem Resize eine Routine ausgeführt, die die Anzeigebreite jedes Elements checkt und ggf. eine neue Datei dazu lädt. So lässt sich im SRCSET Attribute eine Breite nicht abhängig vom Viewport sondern von der tatsächlich angezeigten Breite des Elements nutzen. Bitte beachten, dass das Bild dann als CSS-Eigenschaft\n\n```css\nwidth : 100%;\nheight: auto;\n```\n\nerhalten muss.\n\n### Eingabe:\n\n```html\n\u003cscript type=\"text/javascript\" src=\"assets/addons/media_srcset/srcset.js\"\u003e\u003c/script\u003e\n\n\u003cimg width=\"500\" src=\"index.php?rex_media_type=ImgTypeName\u0026rex_media_file=ImageFileName\"\n    data-srcset=\"rex_media_type=ImgTypeName\"\u003e\n```\n\n### Ausgabe:\n\n```html\n\u003cimg src=\"index.php?rex_media_type=ImgTypeName__700\u0026rex_media_file=ImageFileName\"\n    data-srcset=\"index.php?rex_media_type=ImgTypeName__400\u0026rex_media_file=ImageFileName 480w\n                 index.php?rex_media_type=ImgTypeName__700\u0026rex_media_file=ImageFileName 768w\n                 index.php?rex_media_type=ImgTypeName__800\u0026rex_media_file=ImageFileName 960w\n    \"\u003e\n```\n\nEingabe:\n\n```html\n\u003cimg width=\"200\" … \u003e\n```\n\nAusgabe:\n\n```html\n\u003cimg src=\"index.php?rex_media_type=ImgTypeName__400\u0026rex_media_file=ImageFileName\" … \u003e\n```\n\nEingabe:\n\n```html\n\u003cimg width=\"1200\" … \u003e\n```\n\nAusgabe:\n\n```html\n\u003cimg src=\"index.php?rex_media_type=ImgTypeName__960\u0026rex_media_file=ImageFileName\" … \u003e\n```\n\n## Credits\n\n* [GitHub page](https://github.com/FriendsOfREDAXO/media_manager_srcset)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffriendsofredaxo%2Fmedia_srcset","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffriendsofredaxo%2Fmedia_srcset","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffriendsofredaxo%2Fmedia_srcset/lists"}