{"id":2541,"date":"2013-02-28T02:27:35","date_gmt":"2013-02-28T02:27:35","guid":{"rendered":"http:\/\/blog.ed.gs\/?p=2541"},"modified":"2013-02-28T02:27:35","modified_gmt":"2013-02-28T02:27:35","slug":"varnish-esi-wordpress-and-custom-header-images","status":"publish","type":"post","link":"https:\/\/ed.gs\/2013\/02\/28\/varnish-esi-wordpress-and-custom-header-images\/","title":{"rendered":"Varnish ESI, WordPress and Custom Header Images"},"content":{"rendered":"

I’ve been working on a school website where they want the main focus to be their recent prospectus photo shoot. We discussed various ideas and settled on random loading images on each page load, provided by WordPress’ built in custom header function. One problem with this is the fact that we cache as much dynamic content as possible with Varnish. I had read about edge side includes (ESI) previously, Varnish supports the esi:include function. It involves adding the following to the vcl_fetch subroutine in your Varnish VCL file:<\/p>\n

sub vcl_fetch {\n \n  set beresp.do_esi = true;\n \n  if (req.url ~ "header-esi.php"){\n    std.log("ESI found, don't cache, pass to nginx");\n    set client.identity = clusternginx;\n    return(hit_for_pass);\n  }\n \n}<\/pre>\n
As you see there, we’ve activated ESI with line 3 and then asked it not to cache the file we’re going to create and call later on.<\/p>\n
This post presumes you’re already using custom header images, if not you need to activate it in your functions.php – http:\/\/codex.wordpress.org\/Custom_Headers<\/a>.<\/p>\n
Next we need to create the file that we want to call with the include statement. I’m a poor programmer, but I know a small amount of jQuery and WordPress based PHP. I chose to set the background that I needed in a jQuery Doc Ready statement as follows:<\/p>\n
<!--?php require_once('/var/www/wordpress/wp-load.php'); ?-->// <![CDATA[\n  jQuery(document).ready(function() {\n    jQuery('header.top-head').css('background-image', 'url()');\n  });\n// ]]><\/pre>\n
Remember to include the wp-load.php file or the header_image(); function won’t work.<\/p>\n
Now we need to include the file using ESI in our header.php:<\/p>\n
<\/pre>\n
As it’s JS I put it in the head, it will most likely work in the footer also if you prefer to put it there. The esi:include src location is relative to your hostname, e.g. http:\/\/blog.ed.gs\/anything\/after\/the\/domain\/name.php.<\/p>\n
There’s probably a much better way to accomplish this, but it’s working great for me. I now have random images loading with the rest of the page cached, see it in action at http:\/\/hortongrange.edusite.co.uk\/<\/a>.<\/p>\n
Update – Quick Note:<\/b> If you return(pipe) for logged in users, the esi:include will not work. You have to return(pass) so it hits the vcl_fetch subroutine or the include will never get caught by Varnish. I got around the problem for us by including the background-image: url(< ?php header_image(); ?>); in my element, then the jQuery will overwrite it on a cached page for non-logged in users.<\/p>\n","protected":false},"excerpt":{"rendered":"
I’ve been working on a school website where they want the main focus to be their recent prospectus photo shoot. We discussed various ideas and settled on random loading images on each page load, provided by WordPress’ built in custom header function. One problem with this is the fact that we cache as much dynamic […]<\/p>\n","protected":false},"author":2,"featured_media":3488,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"ep_exclude_from_search":false},"categories":[66,67,72],"tags":[],"yoast_head":"\nVarnish ESI, WordPress and Custom Header Images - E<\/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:\/\/ed.gs\/2013\/02\/28\/varnish-esi-wordpress-and-custom-header-images\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Varnish ESI, WordPress and Custom Header Images - E\" \/>\n<meta property=\"og:description\" content=\"I’ve been working on a school website where they want the main focus to be their recent prospectus photo shoot. We discussed various ideas and settled on random loading images on each page load, provided by WordPress’ built in custom header function. One problem with this is the fact that we cache as much dynamic […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ed.gs\/2013\/02\/28\/varnish-esi-wordpress-and-custom-header-images\/\" \/>\n<meta property=\"og:site_name\" content=\"E\" \/>\n<meta property=\"article:published_time\" content=\"2013-02-28T02:27:35+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/static.ed.gs\/wp-content\/uploads\/2013\/02\/188H.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"2048\" \/>\n\t<meta property=\"og:image:height\" content=\"1365\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Ed\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ed\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/ed.gs\/2013\/02\/28\/varnish-esi-wordpress-and-custom-header-images\/\",\"url\":\"https:\/\/ed.gs\/2013\/02\/28\/varnish-esi-wordpress-and-custom-header-images\/\",\"name\":\"Varnish ESI, WordPress and Custom Header Images - E\",\"isPartOf\":{\"@id\":\"https:\/\/ed.gs\/#website\"},\"datePublished\":\"2013-02-28T02:27:35+00:00\",\"dateModified\":\"2013-02-28T02:27:35+00:00\",\"author\":{\"@id\":\"https:\/\/ed.gs\/#\/schema\/person\/d775615f2296ad0129fa3ea66346c628\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/ed.gs\/2013\/02\/28\/varnish-esi-wordpress-and-custom-header-images\/\"]}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/ed.gs\/#website\",\"url\":\"https:\/\/ed.gs\/\",\"name\":\"E\",\"description\":\"automation, consultancy, project management, web\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/ed.gs\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-GB\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/ed.gs\/#\/schema\/person\/d775615f2296ad0129fa3ea66346c628\",\"name\":\"Ed\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/ed.gs\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/4fe1dfaed09e6bdceb557d3008f5cc47?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/4fe1dfaed09e6bdceb557d3008f5cc47?s=96&d=mm&r=g\",\"caption\":\"Ed\"},\"url\":\"https:\/\/ed.gs\/author\/ed\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Varnish ESI, WordPress and Custom Header Images - E","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:\/\/ed.gs\/2013\/02\/28\/varnish-esi-wordpress-and-custom-header-images\/","og_locale":"en_GB","og_type":"article","og_title":"Varnish ESI, WordPress and Custom Header Images - E","og_description":"I’ve been working on a school website where they want the main focus to be their recent prospectus photo shoot. We discussed various ideas and settled on random loading images on each page load, provided by WordPress’ built in custom header function. One problem with this is the fact that we cache as much dynamic […]","og_url":"https:\/\/ed.gs\/2013\/02\/28\/varnish-esi-wordpress-and-custom-header-images\/","og_site_name":"E","article_published_time":"2013-02-28T02:27:35+00:00","og_image":[{"width":2048,"height":1365,"url":"https:\/\/static.ed.gs\/wp-content\/uploads\/2013\/02\/188H.jpg","type":"image\/jpeg"}],"author":"Ed","twitter_misc":{"Written by":"Ed","Estimated reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/ed.gs\/2013\/02\/28\/varnish-esi-wordpress-and-custom-header-images\/","url":"https:\/\/ed.gs\/2013\/02\/28\/varnish-esi-wordpress-and-custom-header-images\/","name":"Varnish ESI, WordPress and Custom Header Images - E","isPartOf":{"@id":"https:\/\/ed.gs\/#website"},"datePublished":"2013-02-28T02:27:35+00:00","dateModified":"2013-02-28T02:27:35+00:00","author":{"@id":"https:\/\/ed.gs\/#\/schema\/person\/d775615f2296ad0129fa3ea66346c628"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ed.gs\/2013\/02\/28\/varnish-esi-wordpress-and-custom-header-images\/"]}]},{"@type":"WebSite","@id":"https:\/\/ed.gs\/#website","url":"https:\/\/ed.gs\/","name":"E","description":"automation, consultancy, project management, web","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/ed.gs\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-GB"},{"@type":"Person","@id":"https:\/\/ed.gs\/#\/schema\/person\/d775615f2296ad0129fa3ea66346c628","name":"Ed","image":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/ed.gs\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/4fe1dfaed09e6bdceb557d3008f5cc47?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/4fe1dfaed09e6bdceb557d3008f5cc47?s=96&d=mm&r=g","caption":"Ed"},"url":"https:\/\/ed.gs\/author\/ed\/"}]}},"_links":{"self":[{"href":"https:\/\/ed.gs\/wp-json\/wp\/v2\/posts\/2541"}],"collection":[{"href":"https:\/\/ed.gs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ed.gs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ed.gs\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/ed.gs\/wp-json\/wp\/v2\/comments?post=2541"}],"version-history":[{"count":0,"href":"https:\/\/ed.gs\/wp-json\/wp\/v2\/posts\/2541\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ed.gs\/wp-json\/wp\/v2\/media\/3488"}],"wp:attachment":[{"href":"https:\/\/ed.gs\/wp-json\/wp\/v2\/media?parent=2541"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ed.gs\/wp-json\/wp\/v2\/categories?post=2541"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ed.gs\/wp-json\/wp\/v2\/tags?post=2541"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}