<center>![advanced-image-layout.gif](https://steemitimages.com/DQmWpSj4RycBmnGAGpgDdA1XhYz1uxSbwaCiJkdjujzE7LY/advanced-image-layout.gif)</center>
# Image layout Tutorial
----------
Hey Steemians,
So I posted a [post](https://steemit.com/travel/@nathenial/the-lucky-country-luckiest-country-on-earth) yesterday with a nice matrix layout for my images.

It seemed to get a lot of attention so though I would teach you guys how I came up with the idea and how you can do it on your own.

Firstly, shout out to @dolladu for posting a simple side by side grid that inspired me to come up with this matrix layout. 

The first step is to understand that Markdown and Html don't play well together on steemit, so try to stick to just one language.

----------
## The Code Basics
Secondly you need to understand a bit about the code.
```<div class="pull-left"> ```and ``` <div class="pull-right"> ``` are the real heros here. You can use them with images, text, video, tables, points anything really.  Obviously <b>Pull Left</b> pulls the content to the left of the page, while <b>Pull Right</b> pulls the content to the right hand side of the page.

Just remember to ALWAYS close the tags. If you open the line with ``` <div>, <div class*>, <b>, <i> or <center>```  tags always be sure to close it with the corresponding tags ``` </div>, </div>, </b>, </i> or </center> ```

### Code in Practice
Simply use these two codes before the body that you wish to move to one side. e.g.
 <b>Pull Left: </b>
``` <div class="pull-left"> This body of text will be on the LEFT hand side of the page....INSERT-IMAGE-URL.jpg</div> ```
<b>Pull Right: </b> 
``` <div class="pull-right"> While this body of text will be on the RIGHT hand side of the page...INSERT-IMAGE-URL.jpg</div> ```

### Example
----------
 <div class="pull-left">This body of text will be on the LEFT hand side of the page.... http://cumbrianrun.co.uk/wp-content/uploads/2014/02/default-placeholder.png </div>
<div class="pull-right">While this body of text will be on the RIGHT hand side of the page... http://cumbrianrun.co.uk/wp-content/uploads/2014/02/default-placeholder.png </div>

----------
----------

### Assembling
The next part is to put it all together. So the below code is a template for you to fill in. It works with a matrix of 4 small and one big, you then simply repeat the code for more images.

```
<div class="pull-left">Insert-image-url-here.jpg</div>
<div class="pull-right">Insert-image-url-here.jpg</div>
<hr>
<div class="pull-left">Insert-image-url-here.jpg</div>
<div class="pull-right">Insert-image-url-here.jpg</div>
<hr>
<hr>
<center>Insert-image-url-here.jpg</center>
<hr>
 ```

### Example

<div class="pull-left">http://cumbrianrun.co.uk/wp-content/uploads/2014/02/default-placeholder.png</div>
<div class="pull-right">http://cumbrianrun.co.uk/wp-content/uploads/2014/02/default-placeholder.png</div>
<hr>
<div class="pull-left">http://cumbrianrun.co.uk/wp-content/uploads/2014/02/default-placeholder.png</div>
<div class="pull-right">http://cumbrianrun.co.uk/wp-content/uploads/2014/02/default-placeholder.png</div>
<hr>
<hr>
<center>http://cumbrianrun.co.uk/wp-content/uploads/2014/02/default-placeholder.png</center>
<hr>


----------
----------

## More advanced
### More Grids
So that is the basics to assembling your images in a 4 small 1 Big Matrix. There are advanced uses as well. As far as I know, no one else has done this before and it took me a good day to work out how to get it to work.

If you want to incorporate a 3, 2, 1 matrix or any combination of it; you need to bring in a table to resize the images. Unlike with text "Pull Left, Pull Right, Center" will not result in a three column layout. Instead we use the MARKDOWN table to make a single row of images that are automatically resized. Technically you do add more Columns to increase the number of grids if you like. Note: This is becoming extremely fiddly and the slightest upset will result in it not working so only attempt if you are comfortable debugging if the need arises.

```
|<center>Insert-image-url-here.jpg</center>|<center>Insert-image-url-here.jpg</center>|<center>Insert-image-url-here.jpg</center>|
| ------------- |:-------------:| -----:|
<hr>
<div class="pull-left">Insert-image-url-here.jpg</div>
<div class="pull-right">Insert-image-url-here.jpg</div>
<hr>
<hr>
<center>Insert-image-url-here.jpg</center>
<hr>
```
### Example

<hr>

|<center>http://cumbrianrun.co.uk/wp-content/uploads/2014/02/default-placeholder.png</center>|<center>http://cumbrianrun.co.uk/wp-content/uploads/2014/02/default-placeholder.png</center>|<center>http://cumbrianrun.co.uk/wp-content/uploads/2014/02/default-placeholder.png</center>|
| ------------- |:-------------:| -----:|
<hr>
<div class="pull-left">http://cumbrianrun.co.uk/wp-content/uploads/2014/02/default-placeholder.png</div>
<div class="pull-right">http://cumbrianrun.co.uk/wp-content/uploads/2014/02/default-placeholder.png</div>
<hr>
<hr>
<center>http://cumbrianrun.co.uk/wp-content/uploads/2014/02/default-placeholder.png</center>
<hr>

----------
----------
### Tagging Images in your table.
Referencing your images is really important. It allows people to see that they are either your own images or from some other place that you respectfully acknowledge.
Doing this can be as easy as simply adding a URL tag after the image URL. In other cases it can be as complicated as changing the way we display the images completely. Firstly you need to understand the basics of URL Hyperlinks.
``` [this is the text that will appear](This-is-for-the-link) ```
This is the most basic way to tag and there are several more complicated ways to tag images etc but in order to get this to work with our Markdown layouts we will keep it simple. For the 3,2,1 Matrix to work in this manner we will need to convert the image holders to table layout. See the code below:


```
<hr>

|<center>INSERT-IMAGE-URL.JPG[LINK](insert_link.com)</center>|<center>INSERT-IMAGE-URL.JPG[LINK](insert_link.com)</center>|<center>INSERT-IMAGE-URL.JPG[LINK](insert_link.com)</center>|
| ------------- |:-------------:| -----:|
<hr>

|<center>INSERT-IMAGE-URL.JPG[LINK](insert_link.com)</center>|<center>INSERT-IMAGE-URL.JPG[LINK](insert_link.com)</center>|
| ------------- |:-------------:|
<hr>

|<center>INSERT-IMAGE-URL.JPG[LINK](insert_link.com)</center>|
| ------------- |
<hr>

```
### Example

<hr>

|<center>http://cumbrianrun.co.uk/wp-content/uploads/2014/02/default-placeholder.png[LINK](insert_link.com)</center>|<center>http://cumbrianrun.co.uk/wp-content/uploads/2014/02/default-placeholder.png[LINK](insert_link.com)</center>|<center>http://cumbrianrun.co.uk/wp-content/uploads/2014/02/default-placeholder.png[LINK](insert_link.com)</center>|
| ------------- |:-------------:| -----:|
<hr>

|<center>http://cumbrianrun.co.uk/wp-content/uploads/2014/02/default-placeholder.png[LINK](insert_link.com)</center>|<center>http://cumbrianrun.co.uk/wp-content/uploads/2014/02/default-placeholder.png[LINK](insert_link.com)</center>|
| ------------- |:-------------:|
<hr>

|<center>http://cumbrianrun.co.uk/wp-content/uploads/2014/02/default-placeholder.png[LINK](insert_link.com)</center>|
| ------------- |
<hr>


----------
----------

So that concludes my little tutorial on Advanced Image Layouts.
As far as I know, not many (if any) body has used these techniques to develop 3 or more image layout. 


Until next time.

Later Alligator.


<center>[![Upvote, Follow, Resteem](https://steemitimages.com/0x0/https://steemitimages.com/DQmZGDBRNWaCjN1WJjfHd2nS2P1juoYu7L8P63z2kA2QBdw/LQ-Gif.gif)](www.steemit.com/@nathenial)</center>