{"id":223,"date":"2013-04-27T05:36:35","date_gmt":"2013-04-27T03:36:35","guid":{"rendered":"http:\/\/alexis.nomine.fr\/en\/?p=223"},"modified":"2014-02-21T09:49:44","modified_gmt":"2014-02-21T08:49:44","slug":"a-bit-of-responsiveness-for-woocommerce-2-0-default-stylesheet","status":"publish","type":"post","link":"https:\/\/alexis.nomine.fr\/en\/blog\/2013\/04\/27\/a-bit-of-responsiveness-for-woocommerce-2-0-default-stylesheet\/","title":{"rendered":"A bit of responsiveness for WooCommerce 2.0 default stylesheet"},"content":{"rendered":"<aside class=\"box-info\">21\/02\/2014 : Updated version for WooCommerce 2.1 is <a href=\"http:\/\/alexis.nomine.fr\/en\/blog\/2014\/02\/21\/bit-responsiveness-woocommerce-2-1-default-stylesheet\/\" title=\"More responsiveness for WooCommerce 2.1 default stylesheet\">here<\/a><br \/>\n05\/10\/2013 : Updated to stack address forms on checkout page<br \/>\n17\/08\/2013 : Updated the assets URLs to be relative to a theme's folder<br \/>\n04\/07\/2013 : Updated to fix a float clearing bug<\/aside>\n<p>WooTheme folks are making one of the best eCommerce plugins for WordPress: <a href=\"http:\/\/www.woothemes.com\/woocommerce\/\">WooCommerce<\/a>.\u00a0Their last themes - like\u00a0<a href=\"http:\/\/www.woothemes.com\/products\/superstore\/\">SuperStore<\/a>\u00a0- are using their own responsive stylesheet for WooCommerce. However, the default stylesheet applied when using another theme (say TwentyTwelve) could use some improvement to be fully responsive.<\/p>\n<p>If you want to get straight to the point, you can download the updated stylesheet <a title=\"Responsive stylesheet for WooCommerce 2.0\" href=\"https:\/\/raw.github.com\/alexisnomine\/Responsive-WooCommerce\/master\/woocommerce.css\" target=\"_blank\">here<\/a>, upload it in your theme folder, and add this in your functions.php file:<\/p>\n<pre class=\"language-php\" id=\"enqueue-woocommerce\"><code>add_action( 'wp_enqueue_scripts', 'change_woo_styles', 99 );\r\nfunction change_woo_styles() {\r\n\twp_dequeue_style( 'woocommerce_frontend_styles' );\r\n\twp_enqueue_style( 'woocommerce_responsive_frontend_styles', get_stylesheet_directory_uri().\"\/woocommerce.css\" );\r\n}\r\n<\/code><\/pre>\n<p>More details explaining the changes I made after the break.<\/p>\n<p><!--more--><\/p>\n<p>Let's edit the default stylesheet in \/woocommerce\/assets\/css\/woocommerce.less :<\/p>\n<div class=\"box-info\"><b>Hey, that's not CSS!<\/b><br \/>\nNo, they use a CSS preprocessor called <a href=\"http:\/\/lesscss.org\/\">LESS<\/a>, that makes life of web developers a lot easier, but needs to be compiled into plain CSS before being sent to your browser. I will not enter in the details of using it, because there are already a lot of <a href=\"http:\/\/webdesign.tutsplus.com\/tutorials\/htmlcss-tutorials\/get-into-less-the-programmable-stylesheet-language\/\">great tutorials<\/a> covering this.<\/div>\n<p>We want the product image to be on top of the product summary on small screens, so let's remove a few bits:<\/p>\n<pre class=\"diff\"><code> \t\/* =Product Page\r\n \t-------------------------------------------------------------- *\/\r\n \tdiv.product, #content div.product {\r\n[...]\r\n \t\t\/* Product image and thumbnail *\/\r\n \t\tdiv.images {\r\n-\t\t\tfloat:left;\r\n-\t\t\twidth: 48%;\r\n \t\t\tmargin-bottom: 2em;\r\n[...]\r\n \t\t\/* Summary div (contains title, price etc) *\/\r\n \t\tdiv.summary {\r\n-\t\t\tfloat: right;\r\n-\t\t\twidth: 48%;\r\n \t\t\tmargin-bottom: 2em;\r\n \t\t}<\/code><\/pre>\n<p>Then, we also want the lists of products to be stacked on small screens:<\/p>\n<pre><code>\t\/* Product loops *\/\r\n[...]\r\n \tul.products {\r\n \t\tli.product {\r\n-\t\t\tfloat:left;\r\n-\t\t\tmargin: 0 3.8% 2.992em 0;\r\n+\t\t\tmargin: 0 0 2.992em 0;\r\n \t\t\tpadding: 0;\r\n \t\t\tposition: relative;\r\n-\t\t\twidth: 22.05%;\r\n \t\t\tmargin-left: 0;\r\n[...]\r\n \t\t}\r\n-\t\tli.first {\r\n-\t\t\tclear:both;\r\n-\t\t}\r\n-\t\tli.last {\r\n-\t\t\tmargin-right: 0;\r\n-\t\t}\r\n \t}<\/code><\/pre>\n<p>Related and upsells products (on a single product page) will inherit this behavior by removing this entire block:<\/p>\n<pre><code>\t\/* Product loops *\/\r\n[...]\r\n-\t.related, .upsells.products {\r\n-\t\t.clearfix();\r\n-\t\tul.products, ul {\r\n-\t\t\tfloat:none;\r\n-\t\t\tli.product {\r\n-\t\t\t\twidth: 48%;\r\n-\t\t\t\timg {\r\n-\t\t\t\t\twidth: 100%;\r\n-\t\t\t\t\theight:auto;\r\n-\t\t\t\t}\r\n-\t\t\t}\r\n-\t\t}\r\n-\t}\r\n<\/code><\/pre>\n<p>We also want the shipping address and billing address forms to stack on the checkout page:<\/p>\n<pre><code>-\t.col2-set {\r\n-\t\t.clearfix;\r\n-\t\twidth: 100%;\r\n-\t\t.col-1 {\r\n-\t\t\tfloat:left;\r\n-\t\t\twidth: 48%;\r\n-\t\t}\r\n-\t\t.col-2 {\r\n-\t\t\tfloat: right;\r\n-\t\t\twidth: 48%;\r\n-\t\t}\r\n-\t}<code><\/code><\/code><\/pre>\n<p>Now, let's display two products per row when the screen becomes bigger:<\/p>\n<pre><code>+@media only screen and (min-width: 480px) {\r\n+\t.woocommerce, .woocommerce-page {\r\n+\t\t\/\/ 2 products\/row\r\n+\t\tul.products {\r\n+\t\t\tli.product {\r\n+\t\t\t\twidth:48%;\r\n+\t\t\t\tfloat: left;\r\n+\t\t\t\t&amp;:nth-child(2n) { \/\/ last element of the line\r\n+\t\t\t\t\tfloat: right;\r\n+\t\t\t\t}\r\n+\t\t\t\t&amp;:nth-child(2n+1) { \/\/ first element of the line\r\n+\t\t\t\t\tclear: both;\r\n+\t\t\t\t}\r\n+\t\t\t}\r\n+\t\t}\r\n+\t}\r\n+}<\/code><\/pre>\n<p>Now we have room enough to display the product description and image side by side, same thing for the address forms on checkout page. And we can also display 3 products per row on listings:<\/p>\n<pre><code>+@media only screen and (min-width: 600px) {\r\n+\t.woocommerce, .woocommerce-page {\r\n+\t\t\/\/ side by side\r\n+\t\t.col2-set {\r\n+\t\t\t.clearfix;\r\n+\t\t\twidth: 100%;\r\n+\t\t\t.col-1 {\r\n+\t\t\t\tfloat:left;\r\n+\t\t\t\twidth: 48%;\r\n+\t\t\t}\r\n+\t\t\t.col-2 {\r\n+\t\t\t\tfloat: right;\r\n+\t\t\t\twidth: 48%;\r\n+\t\t\t}\r\n+\t\t}\r\n+\t\tdiv.product, #content div.product {\r\n+\t\t\tdiv.images {\r\n+\t\t\t\tfloat:left;\r\n+\t\t\t\twidth: 48%;\r\n+\t\t\t}\r\n+\t\t\tdiv.summary {\r\n+\t\t\t\tfloat: right;\r\n+\t\t\t\twidth: 48%;\r\n+\t\t\t}\r\n+\t\t}\r\n+\t\t\/\/ 3 products\/row\r\n+\t\tul.products {\r\n+\t\t\tli.product {\r\n+\t\t\t\tmargin-right: 1.8%;\r\n+\t\t\t\twidth: 32.05%;\r\n+\t\t\t\t&amp;:nth-child(2n) { \/\/ reset float\r\n+\t\t\t\t\tfloat: left;\r\n+\t\t\t\t}\r\n+\t\t\t\t&amp;:nth-child(2n+1) { \/\/reset clear\r\n+\t\t\t\t\tclear: none;\r\n+\t\t\t\t}\r\n+\t\t\t\t&amp;:nth-child(3n) { \/\/ last element of the line\r\n+\t\t\t\t\tmargin-right: 0;\r\n+\t\t\t\t}\r\n+\t\t\t\t&amp;:nth-child(3n+1) { \/\/ first element of the line\r\n+\t\t\t\t\tclear: both;\r\n+\t\t\t\t}\r\n+\t\t\t}\r\n+\t\t}\r\n+\t}\r\n+}<\/code><\/pre>\n<p>And finally, on even bigger screens, we can display 4 products per row by adding the rules we stripped at the beginning:<\/p>\n<pre><code>+@media only screen and (min-width: 960px) {\r\n+\t.woocommerce, .woocommerce-page {\r\n+\t\t\/\/ 4 products\/row\r\n+\t\tul.products {\r\n+\t\t\tli.product {\r\n+\t\t\t\tmargin-right: 3.8%;\r\n+\t\t\t\twidth: 22.05%;\r\n+\t\t\t\t&amp;:nth-child(3n) { \/\/ reset margin\r\n+\t\t\t\t\tmargin-right: 3.8%;\r\n+\t\t\t\t}\r\n+\t\t\t\t&amp;:nth-child(3n+1) { \/\/ reset clear\r\n+\t\t\t\t\tclear: none;\r\n+\t\t\t\t}\r\n+\t\t\t\t&amp;.first {\r\n+\t\t\t\t\tclear: both;\r\n+\t\t\t\t}\r\n+\t\t\t\t&amp;.last {\r\n+\t\t\t\t\tmargin-right:0;\r\n+\t\t\t\t}\r\n+\t\t\t}\r\n+\t\t}\r\n+\t}\r\n+ }<\/code><\/pre>\n<p>After compiling (<a href=\"http:\/\/lesstester.com\/\">online<\/a> or with <a title=\"CodeKit\" href=\"http:\/\/incident57.com\/codekit\/\">your preferred software<\/a>) and <a href=\"#enqueue-woocommerce\">enqueuing this new stylesheet<\/a>, our WooCommerce is now truly responsive!<\/p>\n<div class=\"box-hint\">If you want IE8 to enjoy the power of media queries and not getting the \"mobile\" display, you can conditionnaly add <a href=\"https:\/\/github.com\/scottjehl\/Respond\">Respond.js<\/a><\/div>\n","protected":false},"excerpt":{"rendered":"<p>21\/02\/2014 : Updated version for WooCommerce 2.1 is here 05\/10\/2013 : Updated to stack address forms on checkout page 17\/08\/2013 : Updated the assets URLs to be relative to a theme&#8217;s folder 04\/07\/2013 : Updated to fix a float clearing bug WooTheme folks are making one of the best eCommerce plugins for WordPress: WooCommerce.\u00a0Their last [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":121,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_exactmetrics_skip_tracking":false,"_exactmetrics_sitenote_active":false,"_exactmetrics_sitenote_note":"","_exactmetrics_sitenote_category":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[13],"tags":[21,20],"class_list":["post-223","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress","tag-responsive","tag-woocommerce"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>A bit of responsiveness for WooCommerce 2.0 default stylesheet - Nomine Web Creations<\/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:\/\/alexis.nomine.fr\/en\/blog\/2013\/04\/27\/a-bit-of-responsiveness-for-woocommerce-2-0-default-stylesheet\/\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Alexis Nomin\u00e9\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. 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:\\\/\\\/alexis.nomine.fr\\\/en\\\/blog\\\/2013\\\/04\\\/27\\\/a-bit-of-responsiveness-for-woocommerce-2-0-default-stylesheet\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/alexis.nomine.fr\\\/en\\\/blog\\\/2013\\\/04\\\/27\\\/a-bit-of-responsiveness-for-woocommerce-2-0-default-stylesheet\\\/\"},\"author\":{\"name\":\"Alexis Nomin\u00e9\",\"@id\":\"https:\\\/\\\/alexis.nomine.fr\\\/en\\\/#\\\/schema\\\/person\\\/3b5fe5cc50f1203f12855f8dee331109\"},\"headline\":\"A bit of responsiveness for WooCommerce 2.0 default stylesheet\",\"datePublished\":\"2013-04-27T03:36:35+00:00\",\"dateModified\":\"2014-02-21T08:49:44+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/alexis.nomine.fr\\\/en\\\/blog\\\/2013\\\/04\\\/27\\\/a-bit-of-responsiveness-for-woocommerce-2-0-default-stylesheet\\\/\"},\"wordCount\":372,\"commentCount\":43,\"image\":{\"@id\":\"https:\\\/\\\/alexis.nomine.fr\\\/en\\\/blog\\\/2013\\\/04\\\/27\\\/a-bit-of-responsiveness-for-woocommerce-2-0-default-stylesheet\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/alexis.nomine.fr\\\/en\\\/files\\\/2012\\\/06\\\/WordPress.png\",\"keywords\":[\"responsive\",\"WooCommerce\"],\"articleSection\":[\"WordPress\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/alexis.nomine.fr\\\/en\\\/blog\\\/2013\\\/04\\\/27\\\/a-bit-of-responsiveness-for-woocommerce-2-0-default-stylesheet\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/alexis.nomine.fr\\\/en\\\/blog\\\/2013\\\/04\\\/27\\\/a-bit-of-responsiveness-for-woocommerce-2-0-default-stylesheet\\\/\",\"url\":\"https:\\\/\\\/alexis.nomine.fr\\\/en\\\/blog\\\/2013\\\/04\\\/27\\\/a-bit-of-responsiveness-for-woocommerce-2-0-default-stylesheet\\\/\",\"name\":\"A bit of responsiveness for WooCommerce 2.0 default stylesheet - Nomine Web Creations\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/alexis.nomine.fr\\\/en\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/alexis.nomine.fr\\\/en\\\/blog\\\/2013\\\/04\\\/27\\\/a-bit-of-responsiveness-for-woocommerce-2-0-default-stylesheet\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/alexis.nomine.fr\\\/en\\\/blog\\\/2013\\\/04\\\/27\\\/a-bit-of-responsiveness-for-woocommerce-2-0-default-stylesheet\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/alexis.nomine.fr\\\/en\\\/files\\\/2012\\\/06\\\/WordPress.png\",\"datePublished\":\"2013-04-27T03:36:35+00:00\",\"dateModified\":\"2014-02-21T08:49:44+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/alexis.nomine.fr\\\/en\\\/#\\\/schema\\\/person\\\/3b5fe5cc50f1203f12855f8dee331109\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/alexis.nomine.fr\\\/en\\\/blog\\\/2013\\\/04\\\/27\\\/a-bit-of-responsiveness-for-woocommerce-2-0-default-stylesheet\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/alexis.nomine.fr\\\/en\\\/blog\\\/2013\\\/04\\\/27\\\/a-bit-of-responsiveness-for-woocommerce-2-0-default-stylesheet\\\/#primaryimage\",\"url\":\"https:\\\/\\\/alexis.nomine.fr\\\/en\\\/files\\\/2012\\\/06\\\/WordPress.png\",\"contentUrl\":\"https:\\\/\\\/alexis.nomine.fr\\\/en\\\/files\\\/2012\\\/06\\\/WordPress.png\",\"width\":\"256\",\"height\":\"256\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/alexis.nomine.fr\\\/en\\\/#website\",\"url\":\"https:\\\/\\\/alexis.nomine.fr\\\/en\\\/\",\"name\":\"Nomine Web Creations\",\"description\":\"Websites creation, development, web design\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/alexis.nomine.fr\\\/en\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/alexis.nomine.fr\\\/en\\\/#\\\/schema\\\/person\\\/3b5fe5cc50f1203f12855f8dee331109\",\"name\":\"Alexis Nomin\u00e9\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/1d01656b8ca51f9a4999518e34d1477667b1bdc8abf11eea3430e03a78bcf48e?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/1d01656b8ca51f9a4999518e34d1477667b1bdc8abf11eea3430e03a78bcf48e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/1d01656b8ca51f9a4999518e34d1477667b1bdc8abf11eea3430e03a78bcf48e?s=96&d=mm&r=g\",\"caption\":\"Alexis Nomin\u00e9\"},\"url\":\"https:\\\/\\\/alexis.nomine.fr\\\/en\\\/blog\\\/author\\\/alexis\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"A bit of responsiveness for WooCommerce 2.0 default stylesheet - Nomine Web Creations","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:\/\/alexis.nomine.fr\/en\/blog\/2013\/04\/27\/a-bit-of-responsiveness-for-woocommerce-2-0-default-stylesheet\/","twitter_misc":{"Written by":"Alexis Nomin\u00e9","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/alexis.nomine.fr\/en\/blog\/2013\/04\/27\/a-bit-of-responsiveness-for-woocommerce-2-0-default-stylesheet\/#article","isPartOf":{"@id":"https:\/\/alexis.nomine.fr\/en\/blog\/2013\/04\/27\/a-bit-of-responsiveness-for-woocommerce-2-0-default-stylesheet\/"},"author":{"name":"Alexis Nomin\u00e9","@id":"https:\/\/alexis.nomine.fr\/en\/#\/schema\/person\/3b5fe5cc50f1203f12855f8dee331109"},"headline":"A bit of responsiveness for WooCommerce 2.0 default stylesheet","datePublished":"2013-04-27T03:36:35+00:00","dateModified":"2014-02-21T08:49:44+00:00","mainEntityOfPage":{"@id":"https:\/\/alexis.nomine.fr\/en\/blog\/2013\/04\/27\/a-bit-of-responsiveness-for-woocommerce-2-0-default-stylesheet\/"},"wordCount":372,"commentCount":43,"image":{"@id":"https:\/\/alexis.nomine.fr\/en\/blog\/2013\/04\/27\/a-bit-of-responsiveness-for-woocommerce-2-0-default-stylesheet\/#primaryimage"},"thumbnailUrl":"https:\/\/alexis.nomine.fr\/en\/files\/2012\/06\/WordPress.png","keywords":["responsive","WooCommerce"],"articleSection":["WordPress"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/alexis.nomine.fr\/en\/blog\/2013\/04\/27\/a-bit-of-responsiveness-for-woocommerce-2-0-default-stylesheet\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/alexis.nomine.fr\/en\/blog\/2013\/04\/27\/a-bit-of-responsiveness-for-woocommerce-2-0-default-stylesheet\/","url":"https:\/\/alexis.nomine.fr\/en\/blog\/2013\/04\/27\/a-bit-of-responsiveness-for-woocommerce-2-0-default-stylesheet\/","name":"A bit of responsiveness for WooCommerce 2.0 default stylesheet - Nomine Web Creations","isPartOf":{"@id":"https:\/\/alexis.nomine.fr\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/alexis.nomine.fr\/en\/blog\/2013\/04\/27\/a-bit-of-responsiveness-for-woocommerce-2-0-default-stylesheet\/#primaryimage"},"image":{"@id":"https:\/\/alexis.nomine.fr\/en\/blog\/2013\/04\/27\/a-bit-of-responsiveness-for-woocommerce-2-0-default-stylesheet\/#primaryimage"},"thumbnailUrl":"https:\/\/alexis.nomine.fr\/en\/files\/2012\/06\/WordPress.png","datePublished":"2013-04-27T03:36:35+00:00","dateModified":"2014-02-21T08:49:44+00:00","author":{"@id":"https:\/\/alexis.nomine.fr\/en\/#\/schema\/person\/3b5fe5cc50f1203f12855f8dee331109"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/alexis.nomine.fr\/en\/blog\/2013\/04\/27\/a-bit-of-responsiveness-for-woocommerce-2-0-default-stylesheet\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/alexis.nomine.fr\/en\/blog\/2013\/04\/27\/a-bit-of-responsiveness-for-woocommerce-2-0-default-stylesheet\/#primaryimage","url":"https:\/\/alexis.nomine.fr\/en\/files\/2012\/06\/WordPress.png","contentUrl":"https:\/\/alexis.nomine.fr\/en\/files\/2012\/06\/WordPress.png","width":"256","height":"256"},{"@type":"WebSite","@id":"https:\/\/alexis.nomine.fr\/en\/#website","url":"https:\/\/alexis.nomine.fr\/en\/","name":"Nomine Web Creations","description":"Websites creation, development, web design","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/alexis.nomine.fr\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/alexis.nomine.fr\/en\/#\/schema\/person\/3b5fe5cc50f1203f12855f8dee331109","name":"Alexis Nomin\u00e9","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/1d01656b8ca51f9a4999518e34d1477667b1bdc8abf11eea3430e03a78bcf48e?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/1d01656b8ca51f9a4999518e34d1477667b1bdc8abf11eea3430e03a78bcf48e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/1d01656b8ca51f9a4999518e34d1477667b1bdc8abf11eea3430e03a78bcf48e?s=96&d=mm&r=g","caption":"Alexis Nomin\u00e9"},"url":"https:\/\/alexis.nomine.fr\/en\/blog\/author\/alexis\/"}]}},"jetpack_featured_media_url":"https:\/\/alexis.nomine.fr\/en\/files\/2012\/06\/WordPress.png","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/alexis.nomine.fr\/en\/wp-json\/wp\/v2\/posts\/223","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alexis.nomine.fr\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/alexis.nomine.fr\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/alexis.nomine.fr\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/alexis.nomine.fr\/en\/wp-json\/wp\/v2\/comments?post=223"}],"version-history":[{"count":4,"href":"https:\/\/alexis.nomine.fr\/en\/wp-json\/wp\/v2\/posts\/223\/revisions"}],"predecessor-version":[{"id":297,"href":"https:\/\/alexis.nomine.fr\/en\/wp-json\/wp\/v2\/posts\/223\/revisions\/297"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/alexis.nomine.fr\/en\/wp-json\/wp\/v2\/media\/121"}],"wp:attachment":[{"href":"https:\/\/alexis.nomine.fr\/en\/wp-json\/wp\/v2\/media?parent=223"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/alexis.nomine.fr\/en\/wp-json\/wp\/v2\/categories?post=223"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/alexis.nomine.fr\/en\/wp-json\/wp\/v2\/tags?post=223"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}