{"id":3428,"date":"2017-03-02T18:10:45","date_gmt":"2017-03-02T17:10:45","guid":{"rendered":"https:\/\/en.florianbrinkmann.de\/?p=3428"},"modified":"2020-02-09T10:59:55","modified_gmt":"2020-02-09T09:59:55","slug":"let-images-go-beyond-the-content-area","status":"publish","type":"post","link":"https:\/\/florianbrinkmann.com\/en\/let-images-go-beyond-the-content-area-3428\/","title":{"rendered":"Let images go beyond the content area"},"content":{"rendered":"<figure class=\"wp-block-image\"><noscript><img decoding=\"async\" width=\"1298\" height=\"746\" src=\"https:\/\/florianbrinkmann.com\/en\/wp-content\/uploads\/sites\/11\/2017\/03\/einspalter-template-mit-bild-groesser-als-inhaltsbereich.png\" alt class=\"wp-image-3429\" srcset=\"https:\/\/florianbrinkmann.com\/en\/wp-content\/uploads\/sites\/11\/2017\/03\/einspalter-template-mit-bild-groesser-als-inhaltsbereich.png 1298w, https:\/\/florianbrinkmann.com\/en\/wp-content\/uploads\/sites\/11\/2017\/03\/einspalter-template-mit-bild-groesser-als-inhaltsbereich-348x200.png 348w, https:\/\/florianbrinkmann.com\/en\/wp-content\/uploads\/sites\/11\/2017\/03\/einspalter-template-mit-bild-groesser-als-inhaltsbereich-300x172.png 300w, https:\/\/florianbrinkmann.com\/en\/wp-content\/uploads\/sites\/11\/2017\/03\/einspalter-template-mit-bild-groesser-als-inhaltsbereich-768x441.png 768w, https:\/\/florianbrinkmann.com\/en\/wp-content\/uploads\/sites\/11\/2017\/03\/einspalter-template-mit-bild-groesser-als-inhaltsbereich-806x463.png 806w, https:\/\/florianbrinkmann.com\/en\/wp-content\/uploads\/sites\/11\/2017\/03\/einspalter-template-mit-bild-groesser-als-inhaltsbereich-600x345.png 600w\" sizes=\"(max-width: 1298px) 100vw, 1298px\"><\/noscript><img decoding=\"async\" width=\"1298\" height=\"746\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201298%20746%22%3E%3C%2Fsvg%3E\" alt class=\"wp-image-3429 lazyload\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201298%20746%22%3E%3C%2Fsvg%3E 1298w\" sizes=\"(max-width: 1298px) 100vw, 1298px\" data-srcset=\"https:\/\/florianbrinkmann.com\/en\/wp-content\/uploads\/sites\/11\/2017\/03\/einspalter-template-mit-bild-groesser-als-inhaltsbereich.png 1298w, https:\/\/florianbrinkmann.com\/en\/wp-content\/uploads\/sites\/11\/2017\/03\/einspalter-template-mit-bild-groesser-als-inhaltsbereich-348x200.png 348w, https:\/\/florianbrinkmann.com\/en\/wp-content\/uploads\/sites\/11\/2017\/03\/einspalter-template-mit-bild-groesser-als-inhaltsbereich-300x172.png 300w, https:\/\/florianbrinkmann.com\/en\/wp-content\/uploads\/sites\/11\/2017\/03\/einspalter-template-mit-bild-groesser-als-inhaltsbereich-768x441.png 768w, https:\/\/florianbrinkmann.com\/en\/wp-content\/uploads\/sites\/11\/2017\/03\/einspalter-template-mit-bild-groesser-als-inhaltsbereich-806x463.png 806w, https:\/\/florianbrinkmann.com\/en\/wp-content\/uploads\/sites\/11\/2017\/03\/einspalter-template-mit-bild-groesser-als-inhaltsbereich-600x345.png 600w\" data-src=\"https:\/\/florianbrinkmann.com\/en\/wp-content\/uploads\/sites\/11\/2017\/03\/einspalter-template-mit-bild-groesser-als-inhaltsbereich.png\"><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">If you insert images into a post or something similar, in most cases, they will have the maximum width of the text content. If the pictures are good, it can be cool to let them go beyond the width of the content area, for example from one border of the browser to the other in a one-column layout. This post shows you how to make this happen \u2014 as well in one-column as sidebar layout.<\/p>\n\n\n\n<!--more-->\n\n\n\n<div class=\"update-box\">\n<p><strong>Update from March 18, 2017<\/strong>: <a href=\"https:\/\/daverupert.com\/2017\/03\/full-bleed-with-not\/\">Dave Rupert shows a more elegant way of full bleed elements in one-column layouts in hist post \u00bbHassle-free Full Bleed with *:not()\u00ab which can be used instead of my proposed first solution<\/a>. He uses the <code class=\"lang-css\">:not()<\/code> selector to exclude elements from a max width. That can look like that (code from Dave\u2019s post):<\/p>\n<pre class=\"lang-css\"><code class=\"lang-css\">.post &gt; *:not( img ):not( video ) {\n    margin-left: auto;\n    margin-right: auto;\n    max-width: 50rem;\n    padding-left: 5%;\n    padding-right: 5%;\n}<\/code><\/pre>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Images beyond the content area in one-column layouts<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">There are two possibilities for one-column layouts:<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>You do not set a maximum width for the element which is wrapped around the content, but for every content element. For the images, you overwrite that value, so they are displayed wider.<\/li><li>You set the width of the images with vw so that it can be displayed larger than the parent element.<\/li><\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">Both solutions have advantages and disadvantages.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Maximum width directly for the content elements<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The first solution\u2019s CSS can look like that:<\/p>\n\n\n<pre class=\"wp-block-code lang-css\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-class\">.entry-content<\/span> &gt; * {\n    <span class=\"hljs-attribute\">margin-left<\/span>: auto;\n    <span class=\"hljs-attribute\">margin-right<\/span>: auto;\n    <span class=\"hljs-attribute\">max-width<\/span>: <span class=\"hljs-number\">800px<\/span>;\n}\n\n<span class=\"hljs-selector-class\">.entry-content<\/span> &gt; <span class=\"hljs-selector-class\">.size-full<\/span> {\n    <span class=\"hljs-attribute\">display<\/span>: block;\n    <span class=\"hljs-attribute\">max-width<\/span>: <span class=\"hljs-number\">100%<\/span>;\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p class=\"wp-block-paragraph\">The disadvantage of that:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>We have to set a maximum width for every direct child element of <code class=\"lang-markup\">.entry-content<\/code> via <code class=\"lang-markup\">.entry-content &gt; *<\/code>.<\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Advantages of that:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>No browser-specific problems like with <code class=\"lang-css\">vw<\/code>.<\/li><li>The image will not be scaled up beyond its natural size. That can be the case when using <code class=\"lang-css\">vw<\/code>.<\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/codepen.io\/florianbrinkmann\/pen\/bqEPKx\">You can see a live example of this solution on CodePen<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Width in vw<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The solution with <code class=\"lang-css\">vw<\/code> can look like that:<\/p>\n\n\n<pre class=\"wp-block-code lang-css\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-class\">.entry-content<\/span> {\n    <span class=\"hljs-attribute\">margin-left<\/span>: auto;\n    <span class=\"hljs-attribute\">margin-right<\/span>: auto;\n    <span class=\"hljs-attribute\">max-width<\/span>: <span class=\"hljs-number\">800px<\/span>;\n}\n\n<span class=\"hljs-selector-class\">.entry-content<\/span> <span class=\"hljs-selector-class\">.size-full<\/span> {\n    <span class=\"hljs-attribute\">display<\/span>: block;\n&nbsp;   <span class=\"hljs-attribute\">left<\/span>: <span class=\"hljs-number\">50%<\/span>;\n&nbsp;   <span class=\"hljs-attribute\">position<\/span>: relative;\n&nbsp;   <span class=\"hljs-attribute\">transform<\/span>: <span class=\"hljs-built_in\">translateX<\/span>(-<span class=\"hljs-number\">50%<\/span>);\n&nbsp;   <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">100vw<\/span>;\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p class=\"wp-block-paragraph\">Disadvantages of that:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>The image goes over the whole width of the viewport \u2013 no matter, if the viewport is 2,000 pixels wide and the image only 1,500 (I will explain how to prevent this shortly).<\/li><li>We need to center the image \u2014 in this example done with the cooperation of <code class=\"lang-css\">left<\/code>, <code class=\"lang-css\">position<\/code> and <code class=\"lang-css\">transform<\/code>.<\/li><li>Browsers interpret <code class=\"lang-css\">100vw<\/code> differently. Firefox stretches the image over the whole width of the viewport, including the scroll bar. Because of that, you will get an extra horizontal scroll bar, and a few pixels of the image are not visible. Other browsers implemented <code class=\"lang-css\">100vw<\/code> as the width of the viewport without the scroll bar. If you use this solution, you have to use <code class=\"lang-css\">overflow-x: hidden;<\/code> on the <code class=\"lang-css\">html<\/code> element to hide the horizontal scroll bar.<\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">The advantage of that:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>We do not need to set a maximum width with the star selector but only for the container of the content elements.<\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"image-width-as-max-width\">Set image width as maximum width when using <code class=\"lang-css\">vw<\/code><\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">The significant disadvantage of using <code class=\"lang-css\">vw<\/code> is, in my opinion, that the image can be stretched beyond its natural size. For that, there is the following solution: We fetch the natural width from each image and set it as the <code class=\"lang-css\">max-width<\/code> via inline styles. We pass the width of <code class=\"lang-css\">100vw<\/code> as inline styles too, so it only applies if adding the maximum width worked. Otherwise, the image will remain on the width of the content elements.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This is the solution:<\/p>\n\n\n<pre class=\"wp-block-code lang-javascript\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\">{\n    <span class=\"hljs-keyword\">let<\/span> fullWidthImages = <span class=\"hljs-built_in\">document<\/span>.querySelectorAll(<span class=\"hljs-string\">'.entry-content .size-full'<\/span>);\n    <span class=\"hljs-keyword\">if<\/span> (fullWidthImages.length != <span class=\"hljs-number\">0<\/span>) {\n        <span class=\"hljs-keyword\">for<\/span> (<span class=\"hljs-keyword\">let<\/span> fullWidthImage <span class=\"hljs-keyword\">of<\/span> fullWidthImages) {\n            <span class=\"hljs-keyword\">let<\/span> naturalWidth = fullWidthImage.naturalWidth;\n            fullWidthImage.style.maxWidth = naturalWidth + <span class=\"hljs-string\">'px'<\/span>;\n            fullWidthImage.style.width = <span class=\"hljs-string\">'100vw'<\/span>;\n        }\n    }\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p class=\"wp-block-paragraph\">We query all elements with the specified class and loop through the list. We get the actual width of the image with <code class=\"lang-javascript\">.naturalWidth<\/code> and set this as the maximum width and <code class=\"lang-css\">100vw<\/code> as width. This solves the problem with the maximum width, but the problem with the partly hidden image in Firefox remains. For a one-column layout, I would prefer the first solution.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/codepen.io\/florianbrinkmann\/pen\/dvGBxV\">There is also a pen for the one-column solution with <code class=\"lang-css\">vw<\/code><\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Images beyond the content area in sidebar layout<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">I am currently working on a theme which should let the user display images larger than the content area also in the sidebar layout. That can look like this:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><noscript><img decoding=\"async\" width=\"1905\" height=\"628\" src=\"https:\/\/florianbrinkmann.com\/en\/wp-content\/uploads\/sites\/11\/2017\/03\/template-mit-sidebar-bild-groesser-als-inhaltsbereich.png\" alt class=\"wp-image-3430\" srcset=\"https:\/\/florianbrinkmann.com\/en\/wp-content\/uploads\/sites\/11\/2017\/03\/template-mit-sidebar-bild-groesser-als-inhaltsbereich.png 1905w, https:\/\/florianbrinkmann.com\/en\/wp-content\/uploads\/sites\/11\/2017\/03\/template-mit-sidebar-bild-groesser-als-inhaltsbereich-607x200.png 607w, https:\/\/florianbrinkmann.com\/en\/wp-content\/uploads\/sites\/11\/2017\/03\/template-mit-sidebar-bild-groesser-als-inhaltsbereich-300x99.png 300w, https:\/\/florianbrinkmann.com\/en\/wp-content\/uploads\/sites\/11\/2017\/03\/template-mit-sidebar-bild-groesser-als-inhaltsbereich-768x253.png 768w, https:\/\/florianbrinkmann.com\/en\/wp-content\/uploads\/sites\/11\/2017\/03\/template-mit-sidebar-bild-groesser-als-inhaltsbereich-806x266.png 806w, https:\/\/florianbrinkmann.com\/en\/wp-content\/uploads\/sites\/11\/2017\/03\/template-mit-sidebar-bild-groesser-als-inhaltsbereich-600x198.png 600w\" sizes=\"(max-width: 1905px) 100vw, 1905px\"><\/noscript><img decoding=\"async\" width=\"1905\" height=\"628\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201905%20628%22%3E%3C%2Fsvg%3E\" alt class=\"wp-image-3430 lazyload\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201905%20628%22%3E%3C%2Fsvg%3E 1905w\" sizes=\"(max-width: 1905px) 100vw, 1905px\" data-srcset=\"https:\/\/florianbrinkmann.com\/en\/wp-content\/uploads\/sites\/11\/2017\/03\/template-mit-sidebar-bild-groesser-als-inhaltsbereich.png 1905w, https:\/\/florianbrinkmann.com\/en\/wp-content\/uploads\/sites\/11\/2017\/03\/template-mit-sidebar-bild-groesser-als-inhaltsbereich-607x200.png 607w, https:\/\/florianbrinkmann.com\/en\/wp-content\/uploads\/sites\/11\/2017\/03\/template-mit-sidebar-bild-groesser-als-inhaltsbereich-300x99.png 300w, https:\/\/florianbrinkmann.com\/en\/wp-content\/uploads\/sites\/11\/2017\/03\/template-mit-sidebar-bild-groesser-als-inhaltsbereich-768x253.png 768w, https:\/\/florianbrinkmann.com\/en\/wp-content\/uploads\/sites\/11\/2017\/03\/template-mit-sidebar-bild-groesser-als-inhaltsbereich-806x266.png 806w, https:\/\/florianbrinkmann.com\/en\/wp-content\/uploads\/sites\/11\/2017\/03\/template-mit-sidebar-bild-groesser-als-inhaltsbereich-600x198.png 600w\" data-src=\"https:\/\/florianbrinkmann.com\/en\/wp-content\/uploads\/sites\/11\/2017\/03\/template-mit-sidebar-bild-groesser-als-inhaltsbereich.png\"><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Theoretically and with some calculation, we maybe could work here with the solution of setting a maximum width of the content elements, too. But I will only show a solution with <code class=\"lang-css\">vw<\/code>. The starting point is a default two-column layout, with a wrapper which specifies the maximum width of main content and sidebar.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"#image-width-as-max-width\">We need the earlier explained JavaScript to set the maximum width of the images<\/a>. Instead of using <code class=\"lang-css\">100vw<\/code> for <code class=\"lang-css\">width<\/code>, you should use <code class=\"lang-css\">100%<\/code> and specify this in the CSS file instead of inline. If the viewport becomes wider than the max width of the wrapper, you can set a breakpoint and specify a width for the images with <code class=\"lang-css\">calc()<\/code>, so they become larger than the content area. You should also set a <code class=\"lang-css\">float: right;<\/code> for the images, so they are getting larger on the left side. In the theme, the CSS looks like that:<\/p>\n\n\n<pre class=\"wp-block-code lang-css\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-keyword\">@media<\/span> screen <span class=\"hljs-keyword\">and<\/span> (<span class=\"hljs-attribute\">min-width:<\/span> <span class=\"hljs-number\">80em<\/span>) {\n\n    <span class=\"hljs-selector-class\">.sidebar-template<\/span> <span class=\"hljs-selector-class\">.large-featured-image-template<\/span> <span class=\"hljs-selector-class\">.wp-post-image<\/span> {\n        <span class=\"hljs-attribute\">float<\/span>: right;\n        <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-built_in\">calc<\/span>(<span class=\"hljs-number\">100%<\/span> + ((<span class=\"hljs-number\">100vw<\/span> - <span class=\"hljs-number\">1200px<\/span> - <span class=\"hljs-number\">2.8rem<\/span>) \/ <span class=\"hljs-number\">4<\/span>));\n    }\n\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p class=\"wp-block-paragraph\">The wrapper reached its max width of 1,200 pixels, and I set the width of the images to the width of the content container (<code class=\"lang-css\">100%<\/code>) and add roughly a quarter of the space, which remains on the left and right of the 1,200 pixels. So the image uses around half of the area, which is empty on the left beside the content.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/codepen.io\/florianbrinkmann\/pen\/ZeQgQQ\">Of course there is also a pen of this<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>If you insert images into a post or something similar, in most cases, they will have the maximum width of the text content. If the pictures are good, it can be cool to let them go beyond the width of the content area, for example from one border of the browser to the other in [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":3429,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"wpf_show_in_dewp_planet_feed":false,"flobn_post_versions":"","webmentions_disabled_pings":false,"webmentions_disabled":false,"lazy_load_responsive_images_disabled":false,"footnotes":""},"categories":[6],"tags":[],"class_list":["post-3428","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-development"],"wp-worthy-pixel":{"ignored":false,"public":"4e622addb5b549c89f759282bd258d76","server":"vg07.met.vgwort.de","url":"https:\/\/vg07.met.vgwort.de\/na\/4e622addb5b549c89f759282bd258d76"},"wp-worthy-type":"normal","_links":{"self":[{"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/posts\/3428","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/comments?post=3428"}],"version-history":[{"count":3,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/posts\/3428\/revisions"}],"predecessor-version":[{"id":5910,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/posts\/3428\/revisions\/5910"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/media\/3429"}],"wp:attachment":[{"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/media?parent=3428"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/categories?post=3428"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/tags?post=3428"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}