67 Comments
Add pictures: bordered, round, spaced, align, gallery:
URL, alt, space, width, height, px, colors, can/have to be adapted.
Standard
Code:
<img src="Your-url.jpg" alt="your-description" width="300" height="200" class="alignnone" />Add Border:
Code:
<img style="border: 10px outset orange;" src="Your-url.jpg" alt="your-desciption" width="300" height="200" />
Border options colors are adjustable:
outset orange;outset silver;outset blue;
solid black;solid yellow;
2px dashed DarkSlateBlue;5px dashed red;
5px double red;5px double green;
5px groove silver;10 px groove black;
Make the picture square first!
Code:
<a style="display: inline;"><img style="width: 300px; height: 300px; border-radius: 200px;" title="Your-title" src="Your-url.jpg" alt="Your description" /></a>Spaced pictures:
Code non-spaced:
<img class="left alignleft" src="Your-url.jpg" alt="Your description" width="200" height="200" />
Code spaced right aligned:
<img class="right alignright" src="Your-url.jpg" alt="Your description" width="200" height="200"hspace="40px;" vspace="40px;"/>
Code spaced left aligned:
<img class="left alignleft" src="Your-url.jpg" alt="your description" width="200" height="200"hspace="40px;" vspace="40px;"/>Align pictures:
Code:
<img src="Your-url.jpg" alt="Your-description" width="276px" /> <img src="Your-url.jpg" alt="Your-description" width="276px" />
Space align pictures:
Code:
<img class=" alignnone" src="Your-url.jpg" alt="Your-description" width="276px" hspace="40px;" vspace="40px" /> <img class=" alignnone" src="Your-url.jpg" alt="Your description" width="276px" hspace="40px;" vspace="40px;" />
1. Add media;
2. Create Gallery;
3. Add pictures;
4. Create new gallery;
5. Adjust Gallery Setting;
6. Insert Gallery;
How to get your picture code:
Add media, add picture, go to the text editor, and get your file code.
My file code is:
http://workathomefuture.com/wp-content/uploads/2015/08/2-add-pictures-square1-300x300.jpg
<img class=" size-medium wp-image-4745 alignnone" src="http://workathomefuture.com/wp-content/uploads/2015/08/2-add-pictures-square1-300x300.jpg" alt="2 add pictures square" width="300" height="300" />
For more trainings
https://my.wealthyaffiliate.com/loes/training
If you liked this training, please hit the "LIKE" button :)
Reply
