{"id":7,"date":"2017-09-11T13:09:28","date_gmt":"2017-09-11T03:09:28","guid":{"rendered":"http:\/\/boomaroo.com\/?page_id=7"},"modified":"2021-05-26T09:27:29","modified_gmt":"2021-05-25T23:27:29","slug":"homepage","status":"publish","type":"page","link":"https:\/\/boomaroo.com\/","title":{"rendered":"Homepage"},"content":{"rendered":"<p>OK, so images can get quite complicated as we have a few variables to work with! For example the image below has had a caption entered in the WordPress image upload dialog box, this creates a  shortcode which then in turn wraps the whole thing in a <code>div<\/code> with inline styling! Maybe one day they&#8217;ll be able to use the <code>figure<\/code> and <code>figcaption<\/code> elements for all this. Additionally, images can be wrapped in links which, if you&#8217;re using anything other than <code>color<\/code> or <code>text-decoration<\/code> to style your links can be problematic.<\/p>\n<div id=\"attachment_28\" class=\"wp-caption alignnone\" style=\"width: 510px;\">\n<p><a href=\"#\"><img loading=\"lazy\" decoding=\"async\" class=\"size-large wp-image-28\" title=\"bmxisbest\" src=\"http:\/\/www.wpfill.me.s3-website-us-east-1.amazonaws.com\/img\/img_large.png\" alt=\"Your Alt Tag\" width=\"500\" height=\"300\" \/><\/a><\/p>\n<p class=\"wp-caption-text\">This is the optional caption.<\/p>\n<\/div>\n<p>The next issue we face is image alignment, users get the option of <em>None<\/em>, <em>Left<\/em>, <em>Right<\/em> &amp; <em>Center<\/em>. On top of this, they also get the options of <em>Thumbnail<\/em>, <em>Medium<\/em>, <em>Large<\/em> &amp; <em>Fullsize<\/em>. You&#8217;ll probably want to add floats to style the image position so important to remember to clear these to stop images popping below the bottom of your articles.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignright size-medium wp-image-28\" title=\"Your Title\" src=\"http:\/\/www.wpfill.me.s3-website-us-east-1.amazonaws.com\/img\/img_medium.png\" alt=\"Your Alt Title\" width=\"300\" height=\"200\" \/><br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignleft size-thumbnail wp-image-28\" title=\"Your Title\" src=\"http:\/\/www.wpfill.me.s3-website-us-east-1.amazonaws.com\/img\/img_thumb.png\" alt=\"Your Alt Title\" width=\"150\" height=\"150\" \/><br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-medium wp-image-28\" title=\"Your Title\" src=\"http:\/\/www.wpfill.me.s3-website-us-east-1.amazonaws.com\/img\/img_medium.png\" alt=\"Your Alt Title\" width=\"300\" height=\"200\" \/><br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-28\" title=\"Your Title\" src=\"http:\/\/www.wpfill.me.s3-website-us-east-1.amazonaws.com\/img\/img_full.png\" alt=\"Your Alt Title\" width=\"840\" height=\"300\" \/><\/p>\n<p>Additionally, to add further confusion, images can be wrapped inside paragraph content, lets test some examples here.<img loading=\"lazy\" decoding=\"async\" class=\"alignright size-medium wp-image-28\" title=\"Your Title\" src=\"http:\/\/www.wpfill.me.s3-website-us-east-1.amazonaws.com\/img\/img_medium.png\" alt=\"Your Alt Title\" width=\"300\" height=\"200\" \/><br \/>\nVivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Maecenas sed diam eget risus varius blandit sit amet non magna. Aenean lacinia bibendum nulla sed consectetur.<img loading=\"lazy\" decoding=\"async\" class=\"alignleft size-thumbnail wp-image-28\" title=\"Your Title\" src=\"http:\/\/www.wpfill.me.s3-website-us-east-1.amazonaws.com\/img\/img_thumb.png\" alt=\"Your Alt Title\" width=\"150\" height=\"150\" \/>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Maecenas sed diam eget risus varius blandit sit amet non magna. Aenean lacinia bibendum nulla sed consectetur.<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-thumbnail wp-image-28\" title=\"Your Title\" src=\"http:\/\/www.wpfill.me.s3-website-us-east-1.amazonaws.com\/img\/img_thumb.png\" alt=\"Your Alt Title\" width=\"150\" height=\"150\" \/>Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec ullamcorper nulla non metus auctor fringilla. Aenean lacinia bibendum nulla sed consectetur.<\/p>\n<p>And then&#8230; Finally, users can insert a WordPress<\/p>\n\n<p>, which is kinda ugly and comes with some CSS stuck into the page to style it (which doesn&#8217;t actually validate, nor does the markup for the gallery). The amount of columns in the gallery is also changable by the user, but the default is three so we&#8217;ll work with that for our example with an added fouth image to test verticle spacing.<\/p>\n<style type=\"text\/css\">\n\t#gallery-1 {<br \/>\t\tmargin: auto;<br \/>\t}<br \/>\t#gallery-1 .gallery-item {<br \/>\t\tfloat: left;<br \/>\t\tmargin-top: 10px;<br \/>\t\ttext-align: center;<br \/>\t\twidth: 33%;<br \/>\t}<br \/>\t#gallery-1 img {<br \/>\t\tborder: 2px solid #cfcfcf;<br \/>\t}<br \/>\t#gallery-1 .gallery-caption {<br \/>\t\tmargin-left: 0;<br \/>\t}<br \/><\/style>\n<div id=\"gallery-1\" class=\"gallery galleryid-1 gallery-columns-3 gallery-size-thumbnail\">\n<dl class=\"gallery-item\">\n<dt class=\"gallery-icon\"><a title=\"Your Title\" href=\"#\"><img loading=\"lazy\" decoding=\"async\" class=\"attachment-thumbnail\" title=\"Your Title\" src=\"http:\/\/www.wpfill.me.s3-website-us-east-1.amazonaws.com\/img\/img_thumb.png\" alt=\"Your Alt Title\" width=\"150\" height=\"150\" \/><\/a><\/dt>\n<\/dl>\n<dl class=\"gallery-item\">\n<dt class=\"gallery-icon\"><a title=\"Your Title\" href=\"#\"><img loading=\"lazy\" decoding=\"async\" class=\"attachment-thumbnail\" title=\"Your Title\" src=\"http:\/\/www.wpfill.me.s3-website-us-east-1.amazonaws.com\/img\/img_thumb.png\" alt=\"Your Alt Title\" width=\"150\" height=\"150\" \/><\/a><\/dt>\n<\/dl>\n<dl class=\"gallery-item\">\n<dt class=\"gallery-icon\"><a title=\"Your Title\" href=\"#\"><img loading=\"lazy\" decoding=\"async\" class=\"attachment-thumbnail\" title=\"Your Title\" src=\"http:\/\/www.wpfill.me.s3-website-us-east-1.amazonaws.com\/img\/img_thumb.png\" alt=\"Your Alt Title\" width=\"150\" height=\"150\" \/><\/a><\/dt>\n<\/dl>\n<p>&nbsp;<\/p>\n<dl class=\"gallery-item\">\n<dt class=\"gallery-icon\"><a title=\"Your Title\" href=\"#\"><img loading=\"lazy\" decoding=\"async\" class=\"attachment-thumbnail\" title=\"Your Title\" src=\"http:\/\/www.wpfill.me.s3-website-us-east-1.amazonaws.com\/img\/img_thumb.png\" alt=\"Your Alt Title\" width=\"150\" height=\"150\" \/><\/a><\/dt>\n<\/dl>\n<p>&nbsp;<\/p>\n<\/div>\n<table>\n<thead>\n<tr>\n<th>Table Head Column One<\/th>\n<th>Table Head Column Two<\/th>\n<th>Table Head Column Three<\/th>\n<\/tr>\n<\/thead>\n<tfoot>\n<tr>\n<td>Table Footer Column One<\/td>\n<td>Table Footer Column Two<\/td>\n<td>Table Footer Column Three<\/td>\n<\/tr>\n<\/tfoot>\n<tbody>\n<tr>\n<td>Table Row Column One<\/td>\n<td>Short Text<\/td>\n<td>Testing a table cell with a longer amount of text to see what happens, you&#8217;re not using tables for site layouts are you?<\/td>\n<\/tr>\n<tr>\n<td>Table Row Column One<\/td>\n<td>Table Row Column Two<\/td>\n<td>Table Row Column Three<\/td>\n<\/tr>\n<tr>\n<td>Table Row Column One<\/td>\n<td>Table Row Column Two<\/td>\n<td>Table Row Column Three<\/td>\n<\/tr>\n<tr>\n<td>Table Row Column One<\/td>\n<td>Table Row Column Two<\/td>\n<td>Table Row Column Three<\/td>\n<\/tr>\n<tr>\n<td>Table Row Column One<\/td>\n<td>Table Row Column Two<\/td>\n<td>Table Row Column Three<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<ol>\n<li>Ordered list item one.<\/li>\n<li>Ordered list item two.<\/li>\n<li>Ordered list item three.<\/li>\n<li>Ordered list item four.<\/li>\n<li>By the way, WordPress does not let you create nested lists through the visual editor.<\/li>\n<\/ol>\n<ul>\n<li>Unordered list item one.<\/li>\n<li>Unordered list item two.<\/li>\n<li>Unordered list item three.<\/li>\n<li>Unordered list item four.<\/li>\n<li>By the way, WordPress does not let you create nested lists through the visual editor.<\/li>\n<\/ul>\n<blockquote><p>Currently WordPress blockquotes are just wrapped in blockquote tags and have no clear way for the user to define a source. Maybe one day they&#8217;ll be more semantic (and easier to style) like the version below.<\/p><\/blockquote>\n<blockquote cite=\"http:\/\/html5doctor.com\/blockquote-q-cite\/\"><p>HTML5 comes to our rescue with the footer element, allowing us to add semantically separate information about the quote.<\/p>\n<footer><cite><br \/>\n<a href=\"http:\/\/html5doctor.com\/blockquote-q-cite\/\">Oli Studholme, HTML5doctor.com<\/a><br \/>\n<\/cite><\/footer>\n<\/blockquote>\n<h1>Level One Heading<\/h1>\n<h2>Level Two Heading<\/h2>\n<h3>Level Three Heading<\/h3>\n<h4>Level Four Heading<\/h4>\n<h5>Level Five Heading<\/h5>\n<h6>Level Six Heading<\/h6>\n<p>This is a standard paragraph created using the WordPress TinyMCE text editor. It has a <strong>strong tag<\/strong>, an <em>em tag<\/em> and a <del>strikethrough<\/del> which is actually just the del element. There are a few more inline elements which are not in the WordPress admin but we should check for incase your users get busy with the copy and paste. These include <cite>citations<\/cite>, <abbr title=\"abbreviation\">abbr<\/abbr>, bits of <code>code<\/code> and <var>variables<\/var>, <q>inline quotations<\/q>, <ins datetime=\"2011-12-08T20:19:53+00:00\">inserted text<\/ins>, text that is <s>no longer accurate<\/s> or something <mark>so important<\/mark> you might want to mark it. We can also style subscript and superscript characters like C0<sub>2<\/sub>, here is our 2<sup>nd<\/sup> example. If they are feeling non-semantic they might even use <b>bold<\/b>, <i>italic<\/i>, <big>big<\/big> or <small>small<\/small> elements too.\u00a0Incidentally, these HTML4.01 tags have been given new life and semantic meaning in HTML5, you may be interested in reading this <a title=\"HTML5 Semantics\" href=\"http:\/\/csswizardry.com\/2011\/01\/html5-and-text-level-semantics\">article by Harry Roberts<\/a> which gives a nice excuse to test a link.\u00a0\u00a0It is also worth noting in the &#8220;kitchen sink&#8221; view you can also add <span style=\"text-decoration: underline;\">underline<\/span>\u00a0styling and set <span style=\"color: #ff0000;\">text color<\/span> with pesky inline CSS.<\/p>\n<p style=\"text-align: left;\">Additionally, WordPress also sets text alignment with inline styles, like this left aligned paragraph.\u00a0Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum.<\/p>\n<p style=\"text-align: right;\">This is a right aligned paragraph.\u00a0Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum.<\/p>\n<p style=\"text-align: justify;\">This is a justified paragraph.\u00a0Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum.<\/p>\n<p style=\"padding-left: 30px;\">Finally, you also have the option of an indented paragraph.\u00a0Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum.<\/p>\n<p>And last, and by no means least, users can also apply the <code>Address<\/code> tag to text like this:<\/p>\n<address>123 Example Street,<br \/>\nTestville,<br \/>\nWest Madeupsburg,<br \/>\nCSSland,<br \/>\n1234<\/address>\n<p>&#8230;so there you have it, all our text elements<\/p>\n","protected":false},"excerpt":{"rendered":"<p>OK, so images can get quite complicated as we have a few variables to work with! For example the image<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":1,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"acf":[],"_links":{"self":[{"href":"https:\/\/boomaroo.com\/wp-json\/wp\/v2\/pages\/7"}],"collection":[{"href":"https:\/\/boomaroo.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/boomaroo.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/boomaroo.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/boomaroo.com\/wp-json\/wp\/v2\/comments?post=7"}],"version-history":[{"count":15,"href":"https:\/\/boomaroo.com\/wp-json\/wp\/v2\/pages\/7\/revisions"}],"predecessor-version":[{"id":3569,"href":"https:\/\/boomaroo.com\/wp-json\/wp\/v2\/pages\/7\/revisions\/3569"}],"wp:attachment":[{"href":"https:\/\/boomaroo.com\/wp-json\/wp\/v2\/media?parent=7"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}