{"id":2297,"date":"2017-07-28T15:51:11","date_gmt":"2017-07-28T13:51:11","guid":{"rendered":"https:\/\/www.clickstorm.de\/blog\/?p=2297"},"modified":"2020-12-02T22:49:49","modified_gmt":"2020-12-02T21:49:49","slug":"crop-funktion-fuer-bilder-in-typo3-8-7","status":"publish","type":"post","link":"https:\/\/www.clickstorm.de\/blog\/crop-funktion-fuer-bilder-in-typo3-8-7\/","title":{"rendered":"Crop-Funktion f\u00fcr responsive Bilder in TYPO3 8.7"},"content":{"rendered":"<p>Seit TYPO3 7.6 gibt es im Backend eine Crop-Funktion f\u00fcr Bilder. Die Funktion ist in dem Bildelement verankert. Die Crop-Funktion erm\u00f6glicht den Redakteuren einen Ausschnitt des Bildes festzulegen. In unserem Blogbeitrag erkl\u00e4ren wir Ihnen, wie Sie die beschnittenen Bilder ausgeben k\u00f6nnen. Au\u00dferdem zeigen wir Ihnen, wie Sie die Crop-Funktion f\u00fcr Ihre Bed\u00fcrfnisse anpassen k\u00f6nnen. Doch zuerst zeigen wir Ihnen ein Video, damit Sie leicht erkennen, was wir meinen.<\/p>\n<div class=\"privacy-container js-privacy-msg-video\"><img decoding=\"async\" class=\"privacy-text-image\" src=\"https:\/\/www.clickstorm.de\/blog\/wp-content\/plugins\/clickstorm-embed\/images\/comment-alt-exclamation.svg\" alt=\"Info Icon\"><\/p>\n<p class=\"privacy-text\">Dieses Video wird \u00fcber eine externe Plattform (YouTube) gehostet. Das Laden bedarf der Zustimmung unserer <a class=\"privacy-text-link\" href=\"https:\/\/www.clickstorm.de\/blog\/datenschutz\/\" target=\"_blank\">Datenschutzbestimmungen.<\/a><\/p>\n<p><a class=\"btn btn-primary btn-cookie js-cookie-open-modal\" data-cs-cookie-anchor=\"externalMedia\" href=\"#\">Einstellung vornehmen<\/a><\/div>\n<div class=\"iframe\"><iframe class=\"js-iframe-privacy-video\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen src=\"\" data-src=\"https:\/\/www.youtube-nocookie.com\/embed\/H8zOKUOE9hk\"><\/iframe><\/div>\n<h2>Crop-Funktion anpassen<\/h2>\n<p>In diesem Abschnitt erkl\u00e4ren wir Ihnen, wie Sie in Inhaltselementen die Crop-Funktionen anpassen k\u00f6nnen. Die Funktion wird hier dem Feld &#8222;image&#8220; hinzugef\u00fcgt. Wir nutzen die Option &#8222;columnsOverrides&#8220;. Somit \u00fcberschreiben wir die Cropeinstellungen von &#8222;image&#8220;.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"php\">\/\/CROP FUNCTION\r\n$GLOBALS['TCA']['tt_content']['types']['extkey_element']['columnsOverrides']['image']['config']['overrideChildTca']['columns']['crop']['config']['cropVariants'] = [\r\n    'dektop' =&gt; [\r\n        'title' =&gt; 'LLL:EXT:extkey\/Resources\/Private\/Language\/locallang_db.xlf:imageManipulation.desktop',\r\n        'allowedAspectRatios' =&gt; [\r\n            '76 : 25' =&gt; [\r\n                'title' =&gt; '76 : 25',\r\n                'value' =&gt; 76 \/ 25\r\n            ]\r\n        ]\r\n    ]\r\n];<\/pre>\n<p>Mit diesen Einstellungen k\u00f6nnen Sie ein Bild f\u00fcr Desktop z.B. auf 1140 x 375 Pixel zuschneiden. F\u00fcr die Berechnung der Seitenverh\u00e4ltnisse benutzen wir das\u00a0<a href=\"http:\/\/andrew.hedges.name\/experiments\/aspect_ratio\/\" target=\"_blank\" rel=\"noopener noreferrer\">Online Tool &#8222;Aspect Ratio Calculator&#8220;<\/a>.<\/p>\n<h2>Ausgabe von dem beschnittenen Bild<\/h2>\n<p>Das beschnittene Bild k\u00f6nnen Sie mit Fluid ausgeben. Daf\u00fcr wird der bekannte ViewHelper &#8222;f:image&#8220; benutzt. Die Ausgabe erfolgt mit der Hilfe von dem Parameter &#8222;cropVariant&#8220;. Hier tragen Sie den Namen der Variante ein. In unserem Fall ist es der Name &#8222;desktop&#8220;. Das Resultat sieht so aus.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"php\">&lt;f:image src=\"{image.0.uid}\" treatIdAsReference=\"1\" width=\"1140\" height=\"375\" cropVariant=\"desktop\"  \/&gt;<\/pre>\n<p>In unserem Beispiel geben wir nur das erste Bild aus. Da es sich hier um eine Referenz auf die Datei handelt, muss der Parameter &#8222;treatIdAsReference&#8220; angegeben werden. So erhalten wir auch automatisch weitere Daten wie den <a href=\"https:\/\/www.clickstorm.de\/blog\/alt-attribute-bei-bildern\/\" target=\"_blank\" rel=\"noopener noreferrer\">alternativen Text<\/a> aus der Referenz.<\/p>\n<h2>Verwendung der Crop-Funktion f\u00fcr Responsivedesign<\/h2>\n<p>Die Crop-Funktion kann ebenso f\u00fcr Responsive Design verwendet werden. Hier erm\u00f6glichen wir den Redakteuren f\u00fcr die verschiedenen Aufl\u00f6sungen, verschiedene Bilderausschnitte anzugeden. Daf\u00fcr m\u00fcssen die weiteren Optionen lediglich mit angegeben werden.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"php\">$GLOBALS['TCA']['tt_content']['types']['extkey_element']['columnsOverrides']['image']['config']['overrideChildTca']['columns']['crop']['config']['cropVariants'] = [\r\n    'desktop' =&gt; [\r\n        'title' =&gt; 'LLL:EXT:extkey\/Resources\/Private\/Language\/locallang_db.xlf:imageManipulation.desktop',\r\n        'allowedAspectRatios' =&gt; [\r\n            '625:204' =&gt; [\r\n                'title' =&gt; '625 : 204',\r\n                'value' =&gt; 625 \/ 204\r\n            ]\r\n          ]\r\n        ],        \r\n    'landscape' =&gt; [\r\n        'title' =&gt; 'LLL:EXT:extkey\/Resources\/Private\/Language\/locallang_db.xlf:imageManipulation.landscape',\r\n        'allowedAspectRatios' =&gt; [\r\n            '76:25' =&gt; [\r\n                'title' =&gt; '76:25',\r\n                'value' =&gt; 76 \/ 25\r\n            ]\r\n        ]\r\n    ],\r\n    'tablet' =&gt; [\r\n        'title' =&gt; 'LLL:EXT:extkey\/Resources\/Private\/Language\/locallang_db.xlf:imageManipulation.tablet',\r\n        'allowedAspectRatios' =&gt; [\r\n            '767:255' =&gt; [\r\n                'title' =&gt; '767 : 255',\r\n                'value' =&gt; 767 \/ 255\r\n            ]\r\n        ]\r\n    ],\r\n    'mobile' =&gt; [\r\n        'title' =&gt; 'LLL:EXT:extkey\/Resources\/Private\/Language\/locallang_db.xlf:imageManipulation.mobile',\r\n        'allowedAspectRatios' =&gt; [\r\n            '124:51' =&gt; [\r\n                'title' =&gt; '124 : 51',\r\n                'value' =&gt; 124 \/ 51\r\n            ]\r\n        ]\r\n    ]\r\n];\r\n<\/pre>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-2316 size-full\" src=\"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2017\/07\/cropFunktion.png\" alt=\"Crop-Funktion in TYPO3 8.7\" width=\"1680\" height=\"935\" srcset=\"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2017\/07\/cropFunktion.png 1680w, https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2017\/07\/cropFunktion-300x167.png 300w, https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2017\/07\/cropFunktion-768x427.png 768w, https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2017\/07\/cropFunktion-1024x570.png 1024w\" sizes=\"auto, (max-width: 1680px) 100vw, 1680px\" \/><\/p>\n<p>Die Ausgabe der Crop-Funktion erfolgt mit dem Picture-Element.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"php\">&lt;f:if condition=\"{files}\"&gt;\r\n &lt;picture class=\"js-picture\"&gt;\r\n  &lt;!--[if IE 9]&gt;&lt;video style=\"display: none;\"&gt;&lt;![endif]--&gt;\r\n  &lt;source srcset=\"{f:uri.image(image:files.0,width:'2500',height:'816',cropVariant:'desktop')}\" media=\"(min-width:1141px)\" \/&gt;\r\n  &lt;source srcset=\"{f:uri.image(image:files.0,width:'1140',height:'375',cropVariant:'landscape')}\" media=\"(min-width:768px)\" \/&gt;\r\n  &lt;source srcset=\"{f:uri.image(image:files.0,width:'767',height:'255',cropVariant:'tablet')}\" media=\"(min-width:620px)\" \/&gt;\r\n  &lt;source srcset=\"{f:uri.image(image:files.0,width:'620',height:'255',cropVariant:'mobile')}\" media=\"(min-width:0px)\" \/&gt;\r\n  &lt;!--[if IE 9]&gt;&lt;\/video&gt;&lt;![endif]--&gt;\r\n  &lt;img src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAA=\" srcset=\"{f:uri.image(image:files.0,width:'2500',height:'816',cropVariant:'desktop')}\" alt=\"{files.0.alternative}\" \/&gt;\r\n &lt;\/picture&gt;\r\n&lt;\/f:if&gt;<\/pre>\n<h2>Cover Areas<\/h2>\n<p>Bei der Crop-Funktion f\u00fcr Bilder gibt es noch die M\u00f6glichkeit &#8222;Cover Areas&#8220; festzulegen. Mit dieser Funktion k\u00f6nnen vordefinierte Bereiche f\u00fcr die Redakteure festgelegt werden. Der Redakteur sieht anhand der Bereiche, dass hier auf der Webseite was \u00fcber dem Bild liegt, z.B ein Text oder ein Button. Wichtige Informationen im Bild sollten demnach nicht in diesem Bereich liegen.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"php\">$GLOBALS['TCA']['tt_content']['types']['extkey_element']['columnsOverrides']['image']['config']['overrideChildTca']['columns']['crop']['config']['cropVariants'] = [\r\n    'desktop' =&gt; [\r\n        'title' =&gt; 'LLL:EXT:extkey\/Resources\/Private\/Language\/locallang_db.xlf:imageManipulation.desktop',\r\n        'allowedAspectRatios' =&gt; [\r\n            '625:204' =&gt; [\r\n                'title' =&gt; '625 : 204',\r\n                'value' =&gt; 625 \/ 204\r\n            ]\r\n        ],\r\n        'coverAreas' =&gt; [\r\n            [\r\n                'x' =&gt; 0.7,\r\n                'y' =&gt; 0.2,\r\n                'width' =&gt; 0.05,\r\n                'height' =&gt; 0.1,\r\n            ],\r\n            [\r\n                'x' =&gt; 0.25,\r\n                'y' =&gt; 0,\r\n                'width' =&gt; 0.1,\r\n                'height' =&gt; 0.3,\r\n            ],\r\n            [\r\n                'x' =&gt; 0.25,\r\n                'y' =&gt; 0.5,\r\n                'width' =&gt; 0.3,\r\n                'height' =&gt; 0.3,\r\n            ],\r\n            [\r\n                'x' =&gt; 0,\r\n                'y' =&gt; 0,\r\n                'width' =&gt; 1,\r\n                'height' =&gt; 0.1,\r\n            ],\r\n            [\r\n                'x' =&gt; 0,\r\n                'y' =&gt; 0.9,\r\n                'width' =&gt; 1,\r\n                'height' =&gt; 0.1,\r\n            ]\r\n        ],\r\n    ]\r\n]<\/pre>\n<p>Der Eintrag &#8222;coverAreas&#8220; kommt nach den &#8222;allowedAspectRatios&#8220;. Anzugeben sind vier Eingabewerte &#8222;x&#8220;, &#8222;y&#8220;, &#8222;width&#8220;, &#8222;height&#8220;. Die Werte &#8222;x&#8220; und &#8222;y&#8220; geben die Position des Bereichs an. &#8222;width&#8220; und &#8222;height&#8220; stehen f\u00fcr die Breite und die H\u00f6he. Die Werte liegen jeweils zwischen 0 und 1. &#8222;x=0&#8220; bedeutet, dass das Element am linken Rand zu positionieren ist, &#8222;x=0.5&#8220; in der Mitte usw.<\/p>\n<h2><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-2324\" src=\"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2017\/07\/typo3_8_7_cover_areas.png\" alt=\"TYPO3 8.7 Cover Areas beim Image Croping\" width=\"998\" height=\"585\" srcset=\"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2017\/07\/typo3_8_7_cover_areas.png 998w, https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2017\/07\/typo3_8_7_cover_areas-300x176.png 300w, https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2017\/07\/typo3_8_7_cover_areas-768x450.png 768w\" sizes=\"auto, (max-width: 998px) 100vw, 998px\" \/><\/h2>\n<h2>Fazit<\/h2>\n<p>Die Crop-Funktion erleichtert den Redakteuren das t\u00e4gliche Arbeiten mit Bildern. Die Implementierung ist einfach und der Bearbeiter sieht direkt, wie das Bild zugeschnitten wird. Er kann nun den Fokus des Bildes unmittelbar bestimmen und f\u00fcr verschiedene Endger\u00e4te optimieren.<\/p>\n<p>M\u00f6chten Sie auch Ihre Website mit TYPO3 8.7 entwickeln lassen, dann nehmen Sie mit uns\u00a0<a href=\"https:\/\/www.clickstorm.de\/kontakt\/\" target=\"_blank\" rel=\"noopener noreferrer\">Kontakt<\/a>\u00a0auf.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Responsive Bilder zuschneiden in TYPO3 8.7 leicht gemacht<\/p>\n","protected":false},"author":3,"featured_media":2336,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[135,137],"tags":[23,124,51,9],"class_list":["post-2297","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-cms","category-frontend","tag-cms","tag-crop-funktion","tag-redakteur","tag-typo3"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.9 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Crop-Funktion f\u00fcr responsive Bilder in TYPO3 8.7 - clickstorm Blog<\/title>\n<meta name=\"description\" content=\"Mit der Crop-Funktion in TYPO3 8.7 w\u00e4hlen Sie Bildausschnitte f\u00fcr verschiedene Endger\u00e4te. Nutzen Sie das Zuschneiden von Bildern f\u00fcr ihr responsives Design!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.clickstorm.de\/blog\/crop-funktion-fuer-bilder-in-typo3-8-7\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Crop-Funktion f\u00fcr responsive Bilder in TYPO3 8.7 - clickstorm Blog\" \/>\n<meta property=\"og:description\" content=\"Mit der Crop-Funktion in TYPO3 8.7 w\u00e4hlen Sie Bildausschnitte f\u00fcr verschiedene Endger\u00e4te. Nutzen Sie das Zuschneiden von Bildern f\u00fcr ihr responsives Design!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.clickstorm.de\/blog\/crop-funktion-fuer-bilder-in-typo3-8-7\/\" \/>\n<meta property=\"og:site_name\" content=\"clickstorm Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/de-de.facebook.com\/clickstorm\/\" \/>\n<meta property=\"article:published_time\" content=\"2017-07-28T13:51:11+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-12-02T21:49:49+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2017\/07\/image_crop_typo3_clickstorm.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1170\" \/>\n\t<meta property=\"og:image:height\" content=\"779\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Andreas\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@clickstorm_gmbh\" \/>\n<meta name=\"twitter:site\" content=\"@clickstorm_gmbh\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Andreas\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"4\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/crop-funktion-fuer-bilder-in-typo3-8-7\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/crop-funktion-fuer-bilder-in-typo3-8-7\\\/\"},\"author\":{\"name\":\"Andreas\",\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/#\\\/schema\\\/person\\\/e603d2a39f26860b64764b9b7d7efbc6\"},\"headline\":\"Crop-Funktion f\u00fcr responsive Bilder in TYPO3 8.7\",\"datePublished\":\"2017-07-28T13:51:11+00:00\",\"dateModified\":\"2020-12-02T21:49:49+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/crop-funktion-fuer-bilder-in-typo3-8-7\\\/\"},\"wordCount\":490,\"commentCount\":4,\"publisher\":{\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/crop-funktion-fuer-bilder-in-typo3-8-7\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/wp-content\\\/uploads\\\/2017\\\/07\\\/image_crop_typo3_clickstorm.jpg\",\"keywords\":[\"CMS\",\"Crop-Funktion\",\"Redakteur\",\"TYPO3\"],\"articleSection\":[\"CMS\",\"Frontend\"],\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/crop-funktion-fuer-bilder-in-typo3-8-7\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/crop-funktion-fuer-bilder-in-typo3-8-7\\\/\",\"url\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/crop-funktion-fuer-bilder-in-typo3-8-7\\\/\",\"name\":\"Crop-Funktion f\u00fcr responsive Bilder in TYPO3 8.7 - clickstorm Blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/crop-funktion-fuer-bilder-in-typo3-8-7\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/crop-funktion-fuer-bilder-in-typo3-8-7\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/wp-content\\\/uploads\\\/2017\\\/07\\\/image_crop_typo3_clickstorm.jpg\",\"datePublished\":\"2017-07-28T13:51:11+00:00\",\"dateModified\":\"2020-12-02T21:49:49+00:00\",\"description\":\"Mit der Crop-Funktion in TYPO3 8.7 w\u00e4hlen Sie Bildausschnitte f\u00fcr verschiedene Endger\u00e4te. Nutzen Sie das Zuschneiden von Bildern f\u00fcr ihr responsives Design!\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/crop-funktion-fuer-bilder-in-typo3-8-7\\\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/crop-funktion-fuer-bilder-in-typo3-8-7\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/crop-funktion-fuer-bilder-in-typo3-8-7\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/wp-content\\\/uploads\\\/2017\\\/07\\\/image_crop_typo3_clickstorm.jpg\",\"contentUrl\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/wp-content\\\/uploads\\\/2017\\\/07\\\/image_crop_typo3_clickstorm.jpg\",\"width\":1170,\"height\":779,\"caption\":\"G\u00e4rtner schneidet Rasen mit Schere\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/crop-funktion-fuer-bilder-in-typo3-8-7\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Crop-Funktion f\u00fcr responsive Bilder in TYPO3 8.7\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/\",\"name\":\"clickstorm Blog\",\"description\":\"Neuigkeiten rund um Webentwicklung\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/#organization\",\"name\":\"clickstorm GmbH\",\"url\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/wp-content\\\/uploads\\\/2017\\\/11\\\/logo.svg\",\"contentUrl\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/wp-content\\\/uploads\\\/2017\\\/11\\\/logo.svg\",\"caption\":\"clickstorm GmbH\"},\"image\":{\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/de-de.facebook.com\\\/clickstorm\\\/\",\"https:\\\/\\\/x.com\\\/clickstorm_gmbh\",\"https:\\\/\\\/www.youtube.com\\\/channel\\\/UCEaU1eUbug6OiI4uU6vA-cA\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/#\\\/schema\\\/person\\\/e603d2a39f26860b64764b9b7d7efbc6\",\"name\":\"Andreas\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/9691a6dd5dab5eac872d66eb220bd7f928f719b425c82870c5ffbb58f848c385?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/9691a6dd5dab5eac872d66eb220bd7f928f719b425c82870c5ffbb58f848c385?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/9691a6dd5dab5eac872d66eb220bd7f928f719b425c82870c5ffbb58f848c385?s=96&d=mm&r=g\",\"caption\":\"Andreas\"},\"url\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/author\\\/andreas\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Crop-Funktion f\u00fcr responsive Bilder in TYPO3 8.7 - clickstorm Blog","description":"Mit der Crop-Funktion in TYPO3 8.7 w\u00e4hlen Sie Bildausschnitte f\u00fcr verschiedene Endger\u00e4te. Nutzen Sie das Zuschneiden von Bildern f\u00fcr ihr responsives Design!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.clickstorm.de\/blog\/crop-funktion-fuer-bilder-in-typo3-8-7\/","og_locale":"de_DE","og_type":"article","og_title":"Crop-Funktion f\u00fcr responsive Bilder in TYPO3 8.7 - clickstorm Blog","og_description":"Mit der Crop-Funktion in TYPO3 8.7 w\u00e4hlen Sie Bildausschnitte f\u00fcr verschiedene Endger\u00e4te. Nutzen Sie das Zuschneiden von Bildern f\u00fcr ihr responsives Design!","og_url":"https:\/\/www.clickstorm.de\/blog\/crop-funktion-fuer-bilder-in-typo3-8-7\/","og_site_name":"clickstorm Blog","article_publisher":"https:\/\/de-de.facebook.com\/clickstorm\/","article_published_time":"2017-07-28T13:51:11+00:00","article_modified_time":"2020-12-02T21:49:49+00:00","og_image":[{"width":1170,"height":779,"url":"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2017\/07\/image_crop_typo3_clickstorm.jpg","type":"image\/jpeg"}],"author":"Andreas","twitter_card":"summary_large_image","twitter_creator":"@clickstorm_gmbh","twitter_site":"@clickstorm_gmbh","twitter_misc":{"Verfasst von":"Andreas","Gesch\u00e4tzte Lesezeit":"4\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.clickstorm.de\/blog\/crop-funktion-fuer-bilder-in-typo3-8-7\/#article","isPartOf":{"@id":"https:\/\/www.clickstorm.de\/blog\/crop-funktion-fuer-bilder-in-typo3-8-7\/"},"author":{"name":"Andreas","@id":"https:\/\/www.clickstorm.de\/blog\/#\/schema\/person\/e603d2a39f26860b64764b9b7d7efbc6"},"headline":"Crop-Funktion f\u00fcr responsive Bilder in TYPO3 8.7","datePublished":"2017-07-28T13:51:11+00:00","dateModified":"2020-12-02T21:49:49+00:00","mainEntityOfPage":{"@id":"https:\/\/www.clickstorm.de\/blog\/crop-funktion-fuer-bilder-in-typo3-8-7\/"},"wordCount":490,"commentCount":4,"publisher":{"@id":"https:\/\/www.clickstorm.de\/blog\/#organization"},"image":{"@id":"https:\/\/www.clickstorm.de\/blog\/crop-funktion-fuer-bilder-in-typo3-8-7\/#primaryimage"},"thumbnailUrl":"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2017\/07\/image_crop_typo3_clickstorm.jpg","keywords":["CMS","Crop-Funktion","Redakteur","TYPO3"],"articleSection":["CMS","Frontend"],"inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.clickstorm.de\/blog\/crop-funktion-fuer-bilder-in-typo3-8-7\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.clickstorm.de\/blog\/crop-funktion-fuer-bilder-in-typo3-8-7\/","url":"https:\/\/www.clickstorm.de\/blog\/crop-funktion-fuer-bilder-in-typo3-8-7\/","name":"Crop-Funktion f\u00fcr responsive Bilder in TYPO3 8.7 - clickstorm Blog","isPartOf":{"@id":"https:\/\/www.clickstorm.de\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.clickstorm.de\/blog\/crop-funktion-fuer-bilder-in-typo3-8-7\/#primaryimage"},"image":{"@id":"https:\/\/www.clickstorm.de\/blog\/crop-funktion-fuer-bilder-in-typo3-8-7\/#primaryimage"},"thumbnailUrl":"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2017\/07\/image_crop_typo3_clickstorm.jpg","datePublished":"2017-07-28T13:51:11+00:00","dateModified":"2020-12-02T21:49:49+00:00","description":"Mit der Crop-Funktion in TYPO3 8.7 w\u00e4hlen Sie Bildausschnitte f\u00fcr verschiedene Endger\u00e4te. Nutzen Sie das Zuschneiden von Bildern f\u00fcr ihr responsives Design!","breadcrumb":{"@id":"https:\/\/www.clickstorm.de\/blog\/crop-funktion-fuer-bilder-in-typo3-8-7\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.clickstorm.de\/blog\/crop-funktion-fuer-bilder-in-typo3-8-7\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.clickstorm.de\/blog\/crop-funktion-fuer-bilder-in-typo3-8-7\/#primaryimage","url":"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2017\/07\/image_crop_typo3_clickstorm.jpg","contentUrl":"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2017\/07\/image_crop_typo3_clickstorm.jpg","width":1170,"height":779,"caption":"G\u00e4rtner schneidet Rasen mit Schere"},{"@type":"BreadcrumbList","@id":"https:\/\/www.clickstorm.de\/blog\/crop-funktion-fuer-bilder-in-typo3-8-7\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.clickstorm.de\/blog\/"},{"@type":"ListItem","position":2,"name":"Crop-Funktion f\u00fcr responsive Bilder in TYPO3 8.7"}]},{"@type":"WebSite","@id":"https:\/\/www.clickstorm.de\/blog\/#website","url":"https:\/\/www.clickstorm.de\/blog\/","name":"clickstorm Blog","description":"Neuigkeiten rund um Webentwicklung","publisher":{"@id":"https:\/\/www.clickstorm.de\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.clickstorm.de\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/www.clickstorm.de\/blog\/#organization","name":"clickstorm GmbH","url":"https:\/\/www.clickstorm.de\/blog\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.clickstorm.de\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2017\/11\/logo.svg","contentUrl":"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2017\/11\/logo.svg","caption":"clickstorm GmbH"},"image":{"@id":"https:\/\/www.clickstorm.de\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/de-de.facebook.com\/clickstorm\/","https:\/\/x.com\/clickstorm_gmbh","https:\/\/www.youtube.com\/channel\/UCEaU1eUbug6OiI4uU6vA-cA"]},{"@type":"Person","@id":"https:\/\/www.clickstorm.de\/blog\/#\/schema\/person\/e603d2a39f26860b64764b9b7d7efbc6","name":"Andreas","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/secure.gravatar.com\/avatar\/9691a6dd5dab5eac872d66eb220bd7f928f719b425c82870c5ffbb58f848c385?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/9691a6dd5dab5eac872d66eb220bd7f928f719b425c82870c5ffbb58f848c385?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/9691a6dd5dab5eac872d66eb220bd7f928f719b425c82870c5ffbb58f848c385?s=96&d=mm&r=g","caption":"Andreas"},"url":"https:\/\/www.clickstorm.de\/blog\/author\/andreas\/"}]}},"_links":{"self":[{"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/posts\/2297","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/comments?post=2297"}],"version-history":[{"count":10,"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/posts\/2297\/revisions"}],"predecessor-version":[{"id":4627,"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/posts\/2297\/revisions\/4627"}],"wp:attachment":[{"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/media?parent=2297"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/categories?post=2297"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/tags?post=2297"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}