{"id":48639,"date":"2022-06-13T09:26:27","date_gmt":"2022-06-13T09:26:27","guid":{"rendered":"https:\/\/annaschneider.me\/?p=48639"},"modified":"2022-06-15T07:39:56","modified_gmt":"2022-06-15T07:39:56","slug":"adding-custom-content-with-javascript-to-wordpress-media-modals","status":"publish","type":"post","link":"https:\/\/annaschneider.me\/blog\/adding-custom-content-with-javascript-to-wordpress-media-modals\/","title":{"rendered":"Adding custom content to WordPress media modals"},"content":{"rendered":"\n<p>This is a short tutorial on extending the WordPress media modal with your own content. Here we add a button in the media upload image details section. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">The wp.media class<\/h2>\n\n\n\n<p>When adding, choosing and editing images in WordPress, most of the time you will see a modal opening up. This can be for the upload, selecting an image from within a post, or checking image details in the media library. Each of these modals is part of <code>wp.media<\/code> in the wp scope\/namespace. <\/p>\n\n\n\n<p>According to the <a href=\"https:\/\/codex.wordpress.org\/Javascript_Reference\/wp.media\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">documentation<\/a> &#8220;<code>wp.media<\/code>&nbsp;is used to handle and control the admin media modal. For instance, custom image selector\/uploader controls and meta boxes.&#8221;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Adding buttons to the modals<\/h2>\n\n\n\n<p>If you try extending the WordPress media modal with your own plugin or theme content, you best use JavaScript. I found a way that works for me. There may be other options, but I will describe how I added custom buttons to WordPress image details. <\/p>\n\n\n\n<p>In this example, I will add a button after the main image details in the upload modal.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img decoding=\"async\" src=\"https:\/\/annaschneider.me\/blog\/wp-content\/uploads\/2022\/06\/editimagebutton-1024x500.png\" alt=\"\" class=\"wp-image-48656\" width=\"497\" height=\"242\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">1) Finding the correct template<\/h3>\n\n\n\n<p>The most important detail to extend anything is to know where exactly you are trying to change content. In the beginning, it took me a while to find the correct templates.  In the end I reverted to not searching the wp.media class itself, but to check in the developer console in my browser. <\/p>\n\n\n\n<p>First, I check the class names within the modal itself. Usually the one before a headline is correct. But it doesn&#8217;t hurt to remember a view of them.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img decoding=\"async\" src=\"https:\/\/annaschneider.me\/blog\/wp-content\/uploads\/2022\/06\/editimagebutton_class-1024x975.png\" alt=\"\" class=\"wp-image-48658\" width=\"516\" height=\"491\"\/><\/figure>\n\n\n\n<p>Then I look for the template scripts in the beginning of <code>#wpcontent<\/code><a href=\"https:\/\/a.cl.ly\/E0uy7B2e\">.<\/a> There should be one which has the name of the just found classname. You can also find it by searching for some of the text within that template. Here for example, you could look for &#8220;Delete permanently&#8221; and you will find exactly those words in the script. (This means, you can also switch the order of those steps. You should just make sure the template class name is also available in your modal content.)<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img decoding=\"async\" src=\"https:\/\/annaschneider.me\/blog\/wp-content\/uploads\/2022\/06\/editimagebutton_template-593x1024.png\" alt=\"\" class=\"wp-image-48657\" width=\"325\" height=\"562\"\/><\/figure>\n\n\n\n<p>Then I check this resource: <a href=\"https:\/\/atimmer.github.io\/wordpress-jsdoc\/\">https:\/\/atimmer.github.io\/wordpress-jsdoc\/<\/a> It has all the needed docs and references.&nbsp;<br>Within the main navigation &#8220;classes&#8221; you should find your template for wp.media.view.XXX. My class is tmpl-attachement-details &#8211;&gt; so I am searching for <code>wp.media.view.Attachment.Details<\/code><\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img decoding=\"async\" src=\"https:\/\/annaschneider.me\/blog\/wp-content\/uploads\/2022\/06\/editimage_wpmediaviewclass-1024x628.png\" alt=\"\" class=\"wp-image-48661\" width=\"461\" height=\"282\"\/><\/figure>\n\n\n\n<p>In there jump straight to the source and make sure there is a template I can extend:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"639\" src=\"https:\/\/annaschneider.me\/blog\/wp-content\/uploads\/2022\/06\/editimage_wpmediaviewtempalte-1024x639.png\" alt=\"\" class=\"wp-image-48662\" srcset=\"https:\/\/annaschneider.me\/blog\/wp-content\/uploads\/2022\/06\/editimage_wpmediaviewtempalte-980x612.png 980w, https:\/\/annaschneider.me\/blog\/wp-content\/uploads\/2022\/06\/editimage_wpmediaviewtempalte-480x300.png 480w\" sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1024px, 100vw\" \/><figcaption>For example: https:\/\/atimmer.github.io\/wordpress-jsdoc\/media_views_attachment_details.js.html line 9<\/figcaption><\/figure>\n\n\n\n<p>I know, I am already sure there is a template due to the tmpl script. But it doesn&#8217;t hurt to make sure. <\/p>\n\n\n\n<p>And now I can finally get into the view itself and can start writing the code.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">2) Extending the template<\/h3>\n\n\n\n<p>In my JavaScript, I call and extend the found class with my new template content: <\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\"><code>wp.media.view.Attachment.Details = wp.media.view.Attachment.Details.extend({\n    template: function(view) {\n        \/\/ tmpl-attachment-details\n        const html = wp.media.template(&#39;attachment-details&#39;)(view); \/\/ the template to extend\n        const dom = document.createElement(&#39;div&#39;);\n        dom.innerHTML = html;\n\n        \/\/ create image actions wrapper\n        const details = dom.querySelector(&#39;.details&#39;);\n        const actions = document.createElement(&#39;button&#39;); \/\/ create new element\n        actions.classList.add(&#39;anna-edit-button&#39;); \/\/ add a class to the element for styling\n        actions.setAttribute(&#39;id&#39;, this.model.attribute.id); \/\/ add the image-id using the attributes\n        actions.innerHTML = &#39;Edit image&#39;; \/\/ element text\n        details.appendChild(actions); \/\/ add new element at the correct spot\n\n        return dom.innerHTML;\n    }\n});<\/code><\/pre><\/div>\n\n\n\n<p>Now the template will include my button. (For the styling, you have to include your own CSS. This is not part of this description.)As we are within the class Attachment.Details, we can access all image attributes in our code. As an example, I used <code>attribute.id<\/code> for the button id. You can also use the image url, etc.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">2.1 ) Adding click listeners<\/h4>\n\n\n\n<p>For now, the button looks nice and is at the right spot, but it doesn&#8217;t help much if it&#8217;s not clickable. The templates all have events and we need add our own listeners and actions.<\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\"><code>wp.media.view.Attachment.Details = wp.media.view.Attachment.Details.extend({\n    events = {\n        ...wp.media.view.Attachment.Details.prototype.events, \/\/ keep all existing events\n        &#39;click .anna-edit-button&#39; : &#39;photiniaEditAttachment&#39;, \/\/ add our own click listener\n    }\n    template: function(view) {\n    ...\n    }\n});<\/code><\/pre><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">2.2 ) Adding the listener method<\/h4>\n\n\n\n<p>And finally, I need the method called in my event listener. In this example I will trigger a console.log and a re-render. The re-render makes most sense if you actually edited the image. But maybe that&#8217;s what you want to do. <\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\"><code>wp.media.view.Attachment.Details = wp.media.view.Attachment.Details.extend({\n    photiniaEditAttachment: function(e)\n        {\n            const { id } = this.model.attributes;\n            console.log( id )\n            this.model.fetch({\n                success: () =&gt; {\n                    this.render();\n                },\n                error: (collection, response, options) =&gt; {\n                    console.log(&#39;error fetching view model&#39;);\n                }\n            });\n        },\n    events = {\n        ...\n    }\n    template: function(view) {\n    ...\n    }\n});<\/code><\/pre><\/div>\n\n\n\n<p>That&#8217;s it. Now we added a button to the upload modal AttachmentDetails section and made that button clickable. <\/p>\n\n\n\n<p>I hope this helps to create other template extensions and elements.  <\/p>\n","protected":false},"excerpt":{"rendered":"<p>This is a short tutorial on extending the WordPress media modal with your own content. Here we add a button in the media upload image details section. The wp.media class When adding, choosing and editing images in WordPress, most of the time you will see a modal opening up. This can be for the upload, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"off","_et_pb_old_content":"","_et_gb_content_width":"","jetpack_post_was_ever_published":false,"footnotes":""},"categories":[7],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Adding custom content to WordPress media modals - Anna Schneider<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/photinia.app\/extending-wordpress-media-modals\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Adding custom content to WordPress media modals - Anna Schneider\" \/>\n<meta property=\"og:description\" content=\"This is a short tutorial on extending the WordPress media modal with your own content. Here we add a button in the media upload image details section. The wp.media class When adding, choosing and editing images in WordPress, most of the time you will see a modal opening up. This can be for the upload, [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/photinia.app\/extending-wordpress-media-modals\/\" \/>\n<meta property=\"og:site_name\" content=\"Anna Schneider\" \/>\n<meta property=\"article:published_time\" content=\"2022-06-13T09:26:27+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-06-15T07:39:56+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/annaschneider.me\/blog\/wp-content\/uploads\/2022\/06\/editimagebutton-1024x500.png\" \/>\n<meta name=\"author\" content=\"anna\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"anna\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/annaschneider.me\/blog\/adding-custom-content-with-javascript-to-wordpress-media-modals\/\",\"url\":\"https:\/\/photinia.app\/extending-wordpress-media-modals\/\",\"name\":\"Adding custom content to WordPress media modals - Anna Schneider\",\"isPartOf\":{\"@id\":\"https:\/\/annaschneider.me\/blog\/#website\"},\"datePublished\":\"2022-06-13T09:26:27+00:00\",\"dateModified\":\"2022-06-15T07:39:56+00:00\",\"author\":{\"@id\":\"https:\/\/annaschneider.me\/blog\/#\/schema\/person\/aed03681a2dc960294c5442477a37844\"},\"breadcrumb\":{\"@id\":\"https:\/\/photinia.app\/extending-wordpress-media-modals\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/photinia.app\/extending-wordpress-media-modals\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/photinia.app\/extending-wordpress-media-modals\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/annaschneider.me\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Adding custom content to WordPress media modals\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/annaschneider.me\/blog\/#website\",\"url\":\"https:\/\/annaschneider.me\/blog\/\",\"name\":\"Anna Schneider\",\"description\":\"Front-End Developer\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/annaschneider.me\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/annaschneider.me\/blog\/#\/schema\/person\/aed03681a2dc960294c5442477a37844\",\"name\":\"anna\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/annaschneider.me\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/6c797411dcaa0edbe0f7d081dd142432?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/6c797411dcaa0edbe0f7d081dd142432?s=96&d=mm&r=g\",\"caption\":\"anna\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Adding custom content to WordPress media modals - Anna Schneider","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:\/\/photinia.app\/extending-wordpress-media-modals\/","og_locale":"en_US","og_type":"article","og_title":"Adding custom content to WordPress media modals - Anna Schneider","og_description":"This is a short tutorial on extending the WordPress media modal with your own content. Here we add a button in the media upload image details section. The wp.media class When adding, choosing and editing images in WordPress, most of the time you will see a modal opening up. This can be for the upload, [&hellip;]","og_url":"https:\/\/photinia.app\/extending-wordpress-media-modals\/","og_site_name":"Anna Schneider","article_published_time":"2022-06-13T09:26:27+00:00","article_modified_time":"2022-06-15T07:39:56+00:00","og_image":[{"url":"https:\/\/annaschneider.me\/blog\/wp-content\/uploads\/2022\/06\/editimagebutton-1024x500.png"}],"author":"anna","twitter_card":"summary_large_image","twitter_misc":{"Written by":"anna","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/annaschneider.me\/blog\/adding-custom-content-with-javascript-to-wordpress-media-modals\/","url":"https:\/\/photinia.app\/extending-wordpress-media-modals\/","name":"Adding custom content to WordPress media modals - Anna Schneider","isPartOf":{"@id":"https:\/\/annaschneider.me\/blog\/#website"},"datePublished":"2022-06-13T09:26:27+00:00","dateModified":"2022-06-15T07:39:56+00:00","author":{"@id":"https:\/\/annaschneider.me\/blog\/#\/schema\/person\/aed03681a2dc960294c5442477a37844"},"breadcrumb":{"@id":"https:\/\/photinia.app\/extending-wordpress-media-modals\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/photinia.app\/extending-wordpress-media-modals\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/photinia.app\/extending-wordpress-media-modals\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/annaschneider.me\/blog\/"},{"@type":"ListItem","position":2,"name":"Adding custom content to WordPress media modals"}]},{"@type":"WebSite","@id":"https:\/\/annaschneider.me\/blog\/#website","url":"https:\/\/annaschneider.me\/blog\/","name":"Anna Schneider","description":"Front-End Developer","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/annaschneider.me\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/annaschneider.me\/blog\/#\/schema\/person\/aed03681a2dc960294c5442477a37844","name":"anna","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/annaschneider.me\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/6c797411dcaa0edbe0f7d081dd142432?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/6c797411dcaa0edbe0f7d081dd142432?s=96&d=mm&r=g","caption":"anna"}}]}},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p9x5Dx-cEv","jetpack-related-posts":[{"id":48624,"url":"https:\/\/annaschneider.me\/blog\/finally-wordpress-image-editing-at-its-best\/","url_meta":{"origin":48639,"position":0},"title":"Finally &#8211; WordPress image editing at its best","author":"anna","date":"May 31, 2022","format":false,"excerpt":"Blogs live not only from their written content, but many of those out there live off their pictures. The most known examples coming to mind are travel and food blogs, fashion and jewelry, sports and news and that\u2019s just the big keywords.\u00a0 For most creators, this means they take a\u2026","rel":"","context":"In &quot;WordPress Tips&quot;","block_context":{"text":"WordPress Tips","link":"https:\/\/annaschneider.me\/blog\/wordpress-tips\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/annaschneider.me\/blog\/wp-content\/uploads\/2022\/05\/Bildschirmfoto-2022-05-31-um-11.17.15.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/annaschneider.me\/blog\/wp-content\/uploads\/2022\/05\/Bildschirmfoto-2022-05-31-um-11.17.15.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/annaschneider.me\/blog\/wp-content\/uploads\/2022\/05\/Bildschirmfoto-2022-05-31-um-11.17.15.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/annaschneider.me\/blog\/wp-content\/uploads\/2022\/05\/Bildschirmfoto-2022-05-31-um-11.17.15.png?resize=700%2C400&ssl=1 2x, https:\/\/i0.wp.com\/annaschneider.me\/blog\/wp-content\/uploads\/2022\/05\/Bildschirmfoto-2022-05-31-um-11.17.15.png?resize=1050%2C600&ssl=1 3x, https:\/\/i0.wp.com\/annaschneider.me\/blog\/wp-content\/uploads\/2022\/05\/Bildschirmfoto-2022-05-31-um-11.17.15.png?resize=1400%2C800&ssl=1 4x"},"classes":[]},{"id":48341,"url":"https:\/\/annaschneider.me\/blog\/custom-gutenberg-blocks-for-custom-websites\/","url_meta":{"origin":48639,"position":1},"title":"Custom Gutenberg Blocks for Custom Websites","author":"anna","date":"September 11, 2018","format":false,"excerpt":"It often occurs, that one is building a website for a customer who has very specific design needs. And it happens even more, that the people publishing posts are not the ones designing the looks. So writers don\u2019t know how things are supposed to be, yet they should still be\u2026","rel":"","context":"In &quot;Front-End Development&quot;","block_context":{"text":"Front-End Development","link":"https:\/\/annaschneider.me\/blog\/front-end-development\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":166,"url":"https:\/\/annaschneider.me\/blog\/displaying-the-featured-image-on-facebook\/","url_meta":{"origin":48639,"position":2},"title":"Displaying the featured image on facebook","author":"anna","date":"May 3, 2016","format":false,"excerpt":"Publishing\u00a0a blog post for most bloggers automatically include posting it on facebook, twitter, and all other networks to spread the content. Unfortunately, facebook does not always pick up on the featured image and instead shows a different image, the header image or no image at all. How facebook choses which\u2026","rel":"","context":"In &quot;Technical Issues&quot;","block_context":{"text":"Technical Issues","link":"https:\/\/annaschneider.me\/blog\/technicalissues\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":147,"url":"https:\/\/annaschneider.me\/blog\/why-i-love-working-with-woothemes-canvas\/","url_meta":{"origin":48639,"position":3},"title":"Why I love working with WooThemes Canvas","author":"anna","date":"March 18, 2016","format":false,"excerpt":"The Canvas theme Canvas describes itself as: \"a\u00a0clean, minimalistic and beautiful WordPress theme framework or so called starter theme that you can use as-is or customize it via Theme Options. Canvas Theme Options provides with over 100 different values you can tweak to change font size, color, background, widget styling,\u2026","rel":"","context":"In &quot;Customization&quot;","block_context":{"text":"Customization","link":"https:\/\/annaschneider.me\/blog\/customization\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/annaschneider.me\/blog\/wp-content\/uploads\/2016\/03\/Canvas.jpg?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/annaschneider.me\/blog\/wp-content\/uploads\/2016\/03\/Canvas.jpg?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/annaschneider.me\/blog\/wp-content\/uploads\/2016\/03\/Canvas.jpg?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/annaschneider.me\/blog\/wp-content\/uploads\/2016\/03\/Canvas.jpg?resize=700%2C400&ssl=1 2x, https:\/\/i0.wp.com\/annaschneider.me\/blog\/wp-content\/uploads\/2016\/03\/Canvas.jpg?resize=1050%2C600&ssl=1 3x, https:\/\/i0.wp.com\/annaschneider.me\/blog\/wp-content\/uploads\/2016\/03\/Canvas.jpg?resize=1400%2C800&ssl=1 4x"},"classes":[]},{"id":191,"url":"https:\/\/annaschneider.me\/blog\/the-storefront-parallax-image-plugin\/","url_meta":{"origin":48639,"position":4},"title":"The Storefront Parallax Image Plugin","author":"anna","date":"May 13, 2016","format":false,"excerpt":"The Prallax effect is a nice add-on for modern websites. While adding some interesting looks, it's not obtrusive and it makes scrolling down a page more fun - at least in my opinion. WooThemes has a nice extension that integrates with Storefront:\u00a0Storefront Parallax Hero. There are two different ways, to\u2026","rel":"","context":"In &quot;Customization&quot;","block_context":{"text":"Customization","link":"https:\/\/annaschneider.me\/blog\/customization\/"},"img":{"alt_text":"ParallaxEffect","src":"https:\/\/i0.wp.com\/annaschneider.me\/blog\/wp-content\/uploads\/2016\/05\/ParallaxEffect-300x154.gif?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/annaschneider.me\/blog\/wp-content\/uploads\/2016\/05\/ParallaxEffect-300x154.gif?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/annaschneider.me\/blog\/wp-content\/uploads\/2016\/05\/ParallaxEffect-300x154.gif?resize=525%2C300&ssl=1 1.5x"},"classes":[]},{"id":180,"url":"https:\/\/annaschneider.me\/blog\/removing-the-storefront-header-padding\/","url_meta":{"origin":48639,"position":5},"title":"Removing the Storefront header padding","author":"anna","date":"May 12, 2016","format":false,"excerpt":"Storefront can be a great theme, but it comes with some hard-coded features, I personally don't like. One of them is the huge padding around the header. I like headers to be rather slim and less \"in your face\". The setup used in this post is the Storefront Theme and\u2026","rel":"","context":"In &quot;Customization&quot;","block_context":{"text":"Customization","link":"https:\/\/annaschneider.me\/blog\/customization\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/annaschneider.me\/blog\/wp-content\/uploads\/2016\/05\/Removing-Storefront-Header-Padding-1.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/annaschneider.me\/blog\/wp-content\/uploads\/2016\/05\/Removing-Storefront-Header-Padding-1.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/annaschneider.me\/blog\/wp-content\/uploads\/2016\/05\/Removing-Storefront-Header-Padding-1.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/annaschneider.me\/blog\/wp-content\/uploads\/2016\/05\/Removing-Storefront-Header-Padding-1.png?resize=700%2C400&ssl=1 2x"},"classes":[]}],"_links":{"self":[{"href":"https:\/\/annaschneider.me\/blog\/wp-json\/wp\/v2\/posts\/48639"}],"collection":[{"href":"https:\/\/annaschneider.me\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/annaschneider.me\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/annaschneider.me\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/annaschneider.me\/blog\/wp-json\/wp\/v2\/comments?post=48639"}],"version-history":[{"count":22,"href":"https:\/\/annaschneider.me\/blog\/wp-json\/wp\/v2\/posts\/48639\/revisions"}],"predecessor-version":[{"id":48728,"href":"https:\/\/annaschneider.me\/blog\/wp-json\/wp\/v2\/posts\/48639\/revisions\/48728"}],"wp:attachment":[{"href":"https:\/\/annaschneider.me\/blog\/wp-json\/wp\/v2\/media?parent=48639"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/annaschneider.me\/blog\/wp-json\/wp\/v2\/categories?post=48639"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/annaschneider.me\/blog\/wp-json\/wp\/v2\/tags?post=48639"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}