{"id":2392,"date":"2017-11-19T23:57:55","date_gmt":"2017-11-19T23:57:55","guid":{"rendered":"https:\/\/new-blog.alexlamond.co.uk\/?p=2392"},"modified":"2017-11-20T00:47:11","modified_gmt":"2017-11-20T00:47:11","slug":"code-tips-css-swinging-image","status":"publish","type":"post","link":"https:\/\/blog.alexlamond.co.uk\/?p=2392","title":{"rendered":"Code Tips: CSS Swinging Christmas Lights"},"content":{"rendered":"\n

So as a developer I often come across snippets of code that are so simple but took me so long to find! If you\u2019re like me and your forever searching for how to do something that should be fairly simply then this series is for you. It\u2019s been a while since I blogged due to being seriously busy but I think \u2018Code Tips\u2019 will be a great way for me to get back into blogging and enhance my coding skills. If you see a section of code I\u2019ve written and you know a shortcut, please feel free to contribute in the comments!<\/p>\n

So the first Code Tips is making some Christmas Lights or anything swing on your website<\/p>\n

\"\"<\/p>\n

Just take me to the code<\/a><\/p>\n

The first step of course is to get a hold of a PNG image of Christmas Lights or any image you want to make swing, Google has an amazing feature on it\u2019s image search page where you can view images labeled for reuse. Just make sure you check the individual CC license<\/a>\"\"<\/p>\n

Add the image into your website either via an [html]img[\/html] or\u00a0[html]div[\/html] and assign it a\u00a0[html]class[\/html] or [html]id[\/html]. For mine, I\u2019m going to use a [html]div[\/html] \u2013 [html]

<\/div>[\/html]
\nNow for the juicy\u00a0code. We first need to setup the image position. I have an issue with my image in that it is not cropped and the actual bulbs are in the middle so I had to offset mine<\/p>\n
.christmaslights\n{\nposition:absolute;\ntop:-310px;\nleft:0px;\nz-index:100;\nwidth: 500px;\nheight: 500px;\nbackground-image:url(\"\/images\/christmas-304506_1280.png\");\n-webkit-animation: image-swing 3s infinite ease-in-out;\n-moz-animation: image-swing 3s infinite ease-in-out;\n-moz-transform-origin: 0% 60%;\n-webkit-transform-origin: 0% 60%;\ntransform-origin: 0% 60%;\n}<\/pre>\n
Let\u2019s talk through this line by line, excluding the positioning code as it is location and image specific.<\/p>\n
[css]-webkit-animation: image-swing 3s infinite ease-in-out;[\/css] \u2013 This tells the animation engine we want to use the [css]Keyframe[\/css] [generic]image-swing[\/generic], we want the animation to last 3 seconds, run it forever and use the style [css]ease-in-out[\/css] which means we get a smooth transition throughout the animation<\/p>\n
[css]transform-origin: 0% 60%;[\/css] \u2013 As I said, my image is in the middle slightly so I need to define the \u2018swivel\u2019 or \u2018grab\u2019 point\u00a0Read More on [css]Transform-Origin[\/css]<\/a><\/p>\n
Next we actually need to define [generic]image-swing[\/generic], we do this using the CSS Keyframes<\/p>\n
   \n@-moz-keyframes image-swing\n{\n   0%{-moz-transform:rotate(45deg);}\n   50%{-moz-transform:rotate(135deg);}\n   100%{-moz-transform:rotate(45deg);}\n}<\/pre>\n
@-webkit-keyframes image-swing\n{\n   0%{-webkit-transform:rotate(45deg);}\n   50%{-webkit-transform:rotate(135deg);}\n   100%{-webkit-transform:rotate(45deg);}\n}<\/pre>\n
Okay. What does all this mean. It\u2019s simple really, we want the animation to start the image at 45 degrees [css]0% { -webkit-transform:rotate(45deg) }[\/css] then halfway through we want it to be at the exact same angle on the opposite side so we set the angle to 135 degrees [css]50% { -webkit-transform:rotate)(135deg) }[\/css] then we repeat line one but set it to 100% [css]100% { -webkit-transform:rotate(45deg) }[\/css] so we\u2019re back to the starting position ready to repeat the animation as we defined it in the first section [css]infinite[\/css]<\/p>\n
That\u2019s it. You can add extra code to extra percentages if you wanted. Make it run extra css so you could have the position move if you wanted. I added a flashing feature so it looked like the lights were flickering with power so my keyframes ended up looking like this<\/p>\n
0%{-webkit-transform:rotate(45deg); filter:drop-shadow(8px 8px 10px yellow); -webkit-filter:drop-shadow(8px 8px 10px yellow);}\n15%{filter:drop-shadow(0px 0px 0px transparent); -webkit-filter:drop-shadow(0px 0px 0px transparent);}\n30%{filter:drop-shadow(8px 8px 10px yellow); -webkit-filter:drop-shadow(8px 8px 10px yellow);}\n50%{-webkit-transform:rotate(110deg); filter:drop-shadow(0px 0px 0px transparent); -webkit-filter:drop-shadow(0px 0px 0px transparent);}\n100%{-webkit-transform:rotate(45deg);}<\/pre>\n
\n
Full Code<\/h4>\n
HTML:<\/strong><\/p>\n
\n\n<\/div><\/pre>\n
CSS:<\/strong><\/p>\n
.yourdiv\n{\n \n  -webkit-animation: your-animation 3s infinite ease-in-out;\n  -moz-animation: your-animation 3s infinite ease-in-out;\n}\n\n@-moz-keyframes your-animation{\n    0%{-moz-transform:rotate(45deg);}\n    50%{-moz-transform:rotate(110deg);}\n    100%{-moz-transform:rotate(45deg);}\n}\n@-webkit-keyframes your-animation{\n    0%{-webkit-transform:rotate(45deg);}\n    50%{-webkit-transform:rotate(110deg);}\n    100%{-webkit-transform:rotate(45deg);}\n}<\/pre>\n
\u00a0<\/p>\n<\/body><\/html>\n","protected":false},"excerpt":{"rendered":"
This is the first in a series of Code Tips. This tip shows you how to add simple animations to your site using the CSS Keyframes system<\/p>\n","protected":false},"author":1,"featured_media":2413,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"advgb_blocks_editor_width":"","advgb_blocks_columns_visual_guide":"","_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"fifu_image_url":"","fifu_image_alt":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[384,6],"tags":[403,85,404,402,401],"series":[],"ppma_author":[554],"class_list":["post-2392","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-code-tips","category-technology","tag-christmas","tag-code","tag-lights","tag-swinging","tag-tips"],"yoast_head":"\nCode Tips: CSS Swinging Christmas Lights - Alex Lamond<\/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:\/\/blog.alexlamond.co.uk\/?p=2392\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Code Tips: CSS Swinging Christmas Lights - Alex Lamond\" \/>\n<meta property=\"og:description\" content=\"This is the first in a series of Code Tips. This tip shows you how to add simple animations to your site using the CSS Keyframes system\" \/>\n<meta property=\"og:url\" content=\"https:\/\/blog.alexlamond.co.uk\/?p=2392\" \/>\n<meta property=\"og:site_name\" content=\"Alex Lamond\" \/>\n<meta property=\"article:published_time\" content=\"2017-11-19T23:57:55+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-11-20T00:47:11+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/blog.alexlamond.co.uk\/wp-content\/uploads\/2017\/11\/pexels-photo-160107-1024x683.jpeg\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"683\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Alex\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@alexlamond1\" \/>\n<meta name=\"twitter:site\" content=\"@alexlamond1\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Alex\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/blog.alexlamond.co.uk\\\/?p=2392#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/blog.alexlamond.co.uk\\\/?p=2392\"},\"author\":{\"name\":\"Alex\",\"@id\":\"https:\\\/\\\/blog.alexlamond.co.uk\\\/#\\\/schema\\\/person\\\/839b5037a05f80a290472f31b1bf38f3\"},\"headline\":\"Code Tips: CSS Swinging Christmas Lights\",\"datePublished\":\"2017-11-19T23:57:55+00:00\",\"dateModified\":\"2017-11-20T00:47:11+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/blog.alexlamond.co.uk\\\/?p=2392\"},\"wordCount\":540,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/blog.alexlamond.co.uk\\\/#\\\/schema\\\/person\\\/839b5037a05f80a290472f31b1bf38f3\"},\"image\":{\"@id\":\"https:\\\/\\\/blog.alexlamond.co.uk\\\/?p=2392#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/blog.alexlamond.co.uk\\\/wp-content\\\/uploads\\\/2017\\\/11\\\/pexels-photo-160107.jpeg\",\"keywords\":[\"christmas\",\"Code\",\"lights\",\"swinging\",\"tips:\"],\"articleSection\":[\"Code Tips\",\"Technology\"],\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/blog.alexlamond.co.uk\\\/?p=2392#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/blog.alexlamond.co.uk\\\/?p=2392\",\"url\":\"https:\\\/\\\/blog.alexlamond.co.uk\\\/?p=2392\",\"name\":\"Code Tips: CSS Swinging Christmas Lights - Alex Lamond\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/blog.alexlamond.co.uk\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/blog.alexlamond.co.uk\\\/?p=2392#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/blog.alexlamond.co.uk\\\/?p=2392#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/blog.alexlamond.co.uk\\\/wp-content\\\/uploads\\\/2017\\\/11\\\/pexels-photo-160107.jpeg\",\"datePublished\":\"2017-11-19T23:57:55+00:00\",\"dateModified\":\"2017-11-20T00:47:11+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/blog.alexlamond.co.uk\\\/?p=2392#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/blog.alexlamond.co.uk\\\/?p=2392\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\\\/\\\/blog.alexlamond.co.uk\\\/?p=2392#primaryimage\",\"url\":\"https:\\\/\\\/blog.alexlamond.co.uk\\\/wp-content\\\/uploads\\\/2017\\\/11\\\/pexels-photo-160107.jpeg\",\"contentUrl\":\"https:\\\/\\\/blog.alexlamond.co.uk\\\/wp-content\\\/uploads\\\/2017\\\/11\\\/pexels-photo-160107.jpeg\",\"width\":5472,\"height\":3648},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/blog.alexlamond.co.uk\\\/?p=2392#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/blog.alexlamond.co.uk\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Code Tips: CSS Swinging Christmas Lights\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/blog.alexlamond.co.uk\\\/#website\",\"url\":\"https:\\\/\\\/blog.alexlamond.co.uk\\\/\",\"name\":\"Alex Lamond\",\"description\":\"Technology & Ramblings.\",\"publisher\":{\"@id\":\"https:\\\/\\\/blog.alexlamond.co.uk\\\/#\\\/schema\\\/person\\\/839b5037a05f80a290472f31b1bf38f3\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/blog.alexlamond.co.uk\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-GB\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/blog.alexlamond.co.uk\\\/#\\\/schema\\\/person\\\/839b5037a05f80a290472f31b1bf38f3\",\"name\":\"Alex\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cb2053fb9839b65ee37e9cadf3ee3f24bcd4d092bf1cadc53f662e8bf380caff?s=96&d=mm&r=gf1801ec1f25976613908cbcb2a8d3e71\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cb2053fb9839b65ee37e9cadf3ee3f24bcd4d092bf1cadc53f662e8bf380caff?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cb2053fb9839b65ee37e9cadf3ee3f24bcd4d092bf1cadc53f662e8bf380caff?s=96&d=mm&r=g\",\"caption\":\"Alex\"},\"logo\":{\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cb2053fb9839b65ee37e9cadf3ee3f24bcd4d092bf1cadc53f662e8bf380caff?s=96&d=mm&r=gf1801ec1f25976613908cbcb2a8d3e71\"},\"sameAs\":[\"https:\\\/\\\/alexlamond.co.uk\",\"https:\\\/\\\/x.com\\\/alexlamond1\"],\"url\":\"https:\\\/\\\/blog.alexlamond.co.uk\\\/?author=1\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Code Tips: CSS Swinging Christmas Lights - Alex Lamond","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:\/\/blog.alexlamond.co.uk\/?p=2392","og_locale":"en_GB","og_type":"article","og_title":"Code Tips: CSS Swinging Christmas Lights - Alex Lamond","og_description":"This is the first in a series of Code Tips. This tip shows you how to add simple animations to your site using the CSS Keyframes system","og_url":"https:\/\/blog.alexlamond.co.uk\/?p=2392","og_site_name":"Alex Lamond","article_published_time":"2017-11-19T23:57:55+00:00","article_modified_time":"2017-11-20T00:47:11+00:00","og_image":[{"width":1024,"height":683,"url":"https:\/\/blog.alexlamond.co.uk\/wp-content\/uploads\/2017\/11\/pexels-photo-160107-1024x683.jpeg","type":"image\/jpeg"}],"author":"Alex","twitter_card":"summary_large_image","twitter_creator":"@alexlamond1","twitter_site":"@alexlamond1","twitter_misc":{"Written by":"Alex","Estimated reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/blog.alexlamond.co.uk\/?p=2392#article","isPartOf":{"@id":"https:\/\/blog.alexlamond.co.uk\/?p=2392"},"author":{"name":"Alex","@id":"https:\/\/blog.alexlamond.co.uk\/#\/schema\/person\/839b5037a05f80a290472f31b1bf38f3"},"headline":"Code Tips: CSS Swinging Christmas Lights","datePublished":"2017-11-19T23:57:55+00:00","dateModified":"2017-11-20T00:47:11+00:00","mainEntityOfPage":{"@id":"https:\/\/blog.alexlamond.co.uk\/?p=2392"},"wordCount":540,"commentCount":0,"publisher":{"@id":"https:\/\/blog.alexlamond.co.uk\/#\/schema\/person\/839b5037a05f80a290472f31b1bf38f3"},"image":{"@id":"https:\/\/blog.alexlamond.co.uk\/?p=2392#primaryimage"},"thumbnailUrl":"https:\/\/blog.alexlamond.co.uk\/wp-content\/uploads\/2017\/11\/pexels-photo-160107.jpeg","keywords":["christmas","Code","lights","swinging","tips:"],"articleSection":["Code Tips","Technology"],"inLanguage":"en-GB","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/blog.alexlamond.co.uk\/?p=2392#respond"]}]},{"@type":"WebPage","@id":"https:\/\/blog.alexlamond.co.uk\/?p=2392","url":"https:\/\/blog.alexlamond.co.uk\/?p=2392","name":"Code Tips: CSS Swinging Christmas Lights - Alex Lamond","isPartOf":{"@id":"https:\/\/blog.alexlamond.co.uk\/#website"},"primaryImageOfPage":{"@id":"https:\/\/blog.alexlamond.co.uk\/?p=2392#primaryimage"},"image":{"@id":"https:\/\/blog.alexlamond.co.uk\/?p=2392#primaryimage"},"thumbnailUrl":"https:\/\/blog.alexlamond.co.uk\/wp-content\/uploads\/2017\/11\/pexels-photo-160107.jpeg","datePublished":"2017-11-19T23:57:55+00:00","dateModified":"2017-11-20T00:47:11+00:00","breadcrumb":{"@id":"https:\/\/blog.alexlamond.co.uk\/?p=2392#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/blog.alexlamond.co.uk\/?p=2392"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/blog.alexlamond.co.uk\/?p=2392#primaryimage","url":"https:\/\/blog.alexlamond.co.uk\/wp-content\/uploads\/2017\/11\/pexels-photo-160107.jpeg","contentUrl":"https:\/\/blog.alexlamond.co.uk\/wp-content\/uploads\/2017\/11\/pexels-photo-160107.jpeg","width":5472,"height":3648},{"@type":"BreadcrumbList","@id":"https:\/\/blog.alexlamond.co.uk\/?p=2392#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/blog.alexlamond.co.uk\/"},{"@type":"ListItem","position":2,"name":"Code Tips: CSS Swinging Christmas Lights"}]},{"@type":"WebSite","@id":"https:\/\/blog.alexlamond.co.uk\/#website","url":"https:\/\/blog.alexlamond.co.uk\/","name":"Alex Lamond","description":"Technology & Ramblings.","publisher":{"@id":"https:\/\/blog.alexlamond.co.uk\/#\/schema\/person\/839b5037a05f80a290472f31b1bf38f3"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/blog.alexlamond.co.uk\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"},{"@type":["Person","Organization"],"@id":"https:\/\/blog.alexlamond.co.uk\/#\/schema\/person\/839b5037a05f80a290472f31b1bf38f3","name":"Alex","image":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/secure.gravatar.com\/avatar\/cb2053fb9839b65ee37e9cadf3ee3f24bcd4d092bf1cadc53f662e8bf380caff?s=96&d=mm&r=gf1801ec1f25976613908cbcb2a8d3e71","url":"https:\/\/secure.gravatar.com\/avatar\/cb2053fb9839b65ee37e9cadf3ee3f24bcd4d092bf1cadc53f662e8bf380caff?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/cb2053fb9839b65ee37e9cadf3ee3f24bcd4d092bf1cadc53f662e8bf380caff?s=96&d=mm&r=g","caption":"Alex"},"logo":{"@id":"https:\/\/secure.gravatar.com\/avatar\/cb2053fb9839b65ee37e9cadf3ee3f24bcd4d092bf1cadc53f662e8bf380caff?s=96&d=mm&r=gf1801ec1f25976613908cbcb2a8d3e71"},"sameAs":["https:\/\/alexlamond.co.uk","https:\/\/x.com\/alexlamond1"],"url":"https:\/\/blog.alexlamond.co.uk\/?author=1"}]}},"author_meta":{"display_name":"Alex","author_link":"https:\/\/blog.alexlamond.co.uk\/?author=1"},"featured_img":"https:\/\/blog.alexlamond.co.uk\/wp-content\/uploads\/2017\/11\/pexels-photo-160107-300x200.jpeg","jetpack_featured_media_url":"https:\/\/blog.alexlamond.co.uk\/wp-content\/uploads\/2017\/11\/pexels-photo-160107.jpeg","coauthors":[{"link":"https:\/\/blog.alexlamond.co.uk\/?author=1","display_name":"Alex"}],"tax_additional":{"categories":{"linked":["<a href=\"https:\/\/blog.alexlamond.co.uk\/?cat=384\" class=\"advgb-post-tax-term\">Code Tips<\/a>","<a href=\"https:\/\/blog.alexlamond.co.uk\/?cat=6\" class=\"advgb-post-tax-term\">Technology<\/a>"],"unlinked":["<span class=\"advgb-post-tax-term\">Code Tips<\/span>","<span class=\"advgb-post-tax-term\">Technology<\/span>"]},"tags":{"linked":["<a href=\"https:\/\/blog.alexlamond.co.uk\/?cat=6\" class=\"advgb-post-tax-term\">christmas<\/a>","<a href=\"https:\/\/blog.alexlamond.co.uk\/?cat=6\" class=\"advgb-post-tax-term\">Code<\/a>","<a href=\"https:\/\/blog.alexlamond.co.uk\/?cat=6\" class=\"advgb-post-tax-term\">lights<\/a>","<a href=\"https:\/\/blog.alexlamond.co.uk\/?cat=6\" class=\"advgb-post-tax-term\">swinging<\/a>","<a href=\"https:\/\/blog.alexlamond.co.uk\/?cat=6\" class=\"advgb-post-tax-term\">tips:<\/a>"],"unlinked":["<span class=\"advgb-post-tax-term\">christmas<\/span>","<span class=\"advgb-post-tax-term\">Code<\/span>","<span class=\"advgb-post-tax-term\">lights<\/span>","<span class=\"advgb-post-tax-term\">swinging<\/span>","<span class=\"advgb-post-tax-term\">tips:<\/span>"]}},"comment_count":"0","relative_dates":{"created":"Posted 8 years ago","modified":"Updated 8 years ago"},"absolute_dates":{"created":"Posted on 19th November 2017","modified":"Updated on 20th November 2017"},"absolute_dates_time":{"created":"Posted on 19th November 2017 11:57 pm","modified":"Updated on 20th November 2017 12:47 am"},"featured_img_caption":"","series_order":null,"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/pgAAHS-CA","jetpack_likes_enabled":false,"authors":[{"term_id":554,"user_id":1,"is_guest":0,"slug":"alex","display_name":"Alex","avatar_url":"https:\/\/secure.gravatar.com\/avatar\/cb2053fb9839b65ee37e9cadf3ee3f24bcd4d092bf1cadc53f662e8bf380caff?s=96&d=mm&r=g","0":null,"1":"","2":"","3":"","4":"","5":"","6":"","7":"","8":""}],"_links":{"self":[{"href":"https:\/\/blog.alexlamond.co.uk\/index.php?rest_route=\/wp\/v2\/posts\/2392","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.alexlamond.co.uk\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.alexlamond.co.uk\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.alexlamond.co.uk\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.alexlamond.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2392"}],"version-history":[{"count":36,"href":"https:\/\/blog.alexlamond.co.uk\/index.php?rest_route=\/wp\/v2\/posts\/2392\/revisions"}],"predecessor-version":[{"id":2432,"href":"https:\/\/blog.alexlamond.co.uk\/index.php?rest_route=\/wp\/v2\/posts\/2392\/revisions\/2432"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.alexlamond.co.uk\/index.php?rest_route=\/wp\/v2\/media\/2413"}],"wp:attachment":[{"href":"https:\/\/blog.alexlamond.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2392"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.alexlamond.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2392"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.alexlamond.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2392"},{"taxonomy":"series","embeddable":true,"href":"https:\/\/blog.alexlamond.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fseries&post=2392"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/blog.alexlamond.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fppma_author&post=2392"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}