Post with many images

Welcome to image alignment! The best way to demonstrate the ebb and flow of the various image positioning options is to nestle them snuggly among an ocean of words. Grab a paddle and let’s get started.

On the topic of alignment, it should be noted that users can choose from the options of None, Left, Right, and Center. In addition, they also get the options of Thumbnail, Medium, Large & Fullsize.

image-alignment-580x300

The image above happens to be centered.

image-alignment-150x150The rest of this paragraph is filler for the sake of seeing the text wrap around the 150×150 image, which is left aligned.

As you can see the should be some space above, below, and to the right of the image. The text should not be creeping on the image. Creeping is just not right. Images need breathing room too. Let them speak like you words. Let them do their jobs without any hassle from the text. In about one more sentence here, we’ll see that the text moves from the right of the image down below the image in seamless transition. Again, letting the do it’s thang. Mission accomplished!

And now for a massively large image. It also has no alignment.

image-alignment-1200x4002

The image above, though 1200px wide, should not overflow the content area. It should remain contained with no visible disruption to the flow of content.

image-alignment-300x200

And now we’re going to shift things to the right align. Again, there should be plenty of room above, below, and to the left of the image. Just look at him there… Hey guy! Way to rock that right side. I don’t care what the left aligned image says, you look great. Don’t let anyone else tell you differently.

In just a bit here, you should see the text start to wrap below the right aligned image and settle in nicely. There should still be plenty of room and everything should be sitting pretty. Yeah… Just like that. It never felt so good to be right.

And just when you thought we were done, we’re going to do them all over again with captions!

image-alignment-580x300

Look at 580×300 getting some caption love.

The image above happens to be centered. The caption also has a link in it, just to see if it does anything funky.

image-alignment-150x150

Itty-bitty caption.

The rest of this paragraph is filler for the sake of seeing the text wrap around the 150×150 image, which is left aligned.

As you can see the should be some space above, below, and to the right of the image. The text should not be creeping on the image. Creeping is just not right. Images need breathing room too. Let them speak like you words. Let them do their jobs without any hassle from the text. In about one more sentence here, we’ll see that the text moves from the right of the image down below the image in seamless transition. Again, letting the do it’s thang. Mission accomplished!

And now for a massively large image. It also has no alignment.

Image Alignment 1200x400

Massive image comment for your eyeballs.

The image above, though 1200px wide, should not overflow the content area. It should remain contained with no visible disruption to the flow of content.

Image Alignment 300x200

Feels good to be right all the time.

And now we’re going to shift things to the right align. Again, there should be plenty of room above, below, and to the left of the image. Just look at him there… Hey guy! Way to rock that right side. I don’t care what the left aligned image says, you look great. Don’t let anyone else tell you differently.

In just a bit here, you should see the text start to wrap below the right aligned image and settle in nicely. There should still be plenty of room and everything should be sitting pretty. Yeah… Just like that. It never felt so good to be right.

And that’s a wrap, yo! You survived the tumultuous waters of alignment. Image alignment achievement unlocked!

one image fit in everywhere

Proin tristique elit et augue varius pellentesque. Donec enim neque, vulputate et commodo in, tristique sed velit. Phasellus adipiscing faucibus felis eget hendrerit. Vestibulum aliquet mauris sed felis convallis, sed tempus augue malesuada. Vivamus mauris lorem, laoreet sed suscipit nec, dapibus at elit. In in augue lobortis, eleifend tortor et, varius eros. Vivamus dignissim sed justo vitae suscipit. Mauris mi sem, malesuada sed sapien ut, sagittis condimentum urna. Nullam lacus mi, vulputate sed sollicitudin in, semper ut elit. Phasellus nec est at leo euismod placerat a porttitor est. Curabitur vel varius nunc, nec tincidunt magna. Proin eros mauris, lobortis id quam non, euismod fringilla nulla. Fusce vel nisi et turpis tempor molestie sit amet a dolor.

Vestibulum sit amet ante eget diam scellioness_3-wallpaper-1280x960erisque eleifend. Nam metus mauris, cursus non suscipit ut, faucibus ut quam. Quisque ac scelerisque dolor. Nam sapien leo, euismod id elementum ut, dapibus eget elit. Nunc posuere porttitor nulla facilisis congue. Maecenas molestie quam eu nibh porttitor, vitae vestibulum turpis molestie. Sed quis mauris vitae dolor imperdiet pharetra. Sed et eros eget sapien tempor cursus sit amet eget eros. Nunc a mauris imperdiet, scelerisque diam laoreet, consequat nibh. Morbi gravida ornare sem, aliquet vehicula augue egestas eget. Sed mollis fringilla enim, ac accumsan metus porta et. Fusce ut lacinia ante, et pretium velit. Nullam eget metus enim. Vestibulum mollis leo in nulla tristique, sit amet tincidunt nibh tincidunt. Cras at sem at leo pretium bibendum et at nisl. Pellentesque odio enim, consectetur vitae commodo non, facilisis tincidunt justo.

[dropcap]C[/dropcap]um sociis natoque penatibus et magnis dis parturient montes This is a link, nascetur ridiculus mus. Integer dolor diam, tincidunt ac euismod ac, sollicitudin varius ante. Pellentesque elementum commodo dolor sit amet semper. Nullam id massa a turpis bibendum tincidunt. Donec non augue id Bold and emphasize text augue dignissim molestie elementum vitae velit. Quisque Under line text laoreet eleifend posuere. Mauris congue venenatis nisl ut varius. In posuere sem lorem, delete this Insert this  eu iaculis ante.

[incor name=”h”]

Heading 1

ullamcorper est vitae sem ornare interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Heading 2

ullamcorper est vitae sem ornare interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Heading 3

ullamcorper est vitae sem ornare interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Heading 4

ullamcorper est vitae sem ornare interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

[gap height=”20″]

[incor name=”d”]

DropCaps

[gap height=”15″] [one_half]

[dropcap style=”square” font=”play”]D[/dropcap]ullamcorper est vitae sem ornare interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer dolor diam, tincidunt ac euismod ac.

[/one_half] [one_half_last]

[dropcap style=”circle” font=”play”]A[/dropcap]ullamcorper est vitae sem ornare interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer dolor diam, tincidunt ac euismod ac.

[/one_half_last] [one_half]

[dropcap style=”square” bgcolor=”#de5b5b” sradius=”3″ font=”play”]B[/dropcap]ullamcorper est vitae sem ornare interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer dolor diam, tincidunt ac euismod ac. [/one_half] [one_half_last]

[dropcap style=”circle” bgcolor=”#5ba5de” font=”play”]C[/dropcap]ullamcorper est vitae sem ornare interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer dolor diam, tincidunt ac euismod ac.

[/one_half_last] [gap height=”20″]

Quotes

[gap height=”15″] [quote font_style=”normal”] Maecenas ullamcorper est vitae sem ornare interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer dolor diam, tincidunt ac euismod ac, sollicitudin varius ante.[/quote] Curabitur sit amet magna quam. Praesent in libero vel turpis pellentesque egestas sit amet vel nunc. Nunc lobortis dui neque, quis accumsan dolor. Aenean aliquet dignissim semper. [quote font_style=”normal” bcolor=”#e5e5e5″ align=”right”]sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.[/quote]Curabitur sit amet magna quam. Praesent in libero vel turpis pellentesque egestas sit amet vel nunc. Nunc lobortis dui neque, quis accumsan dolor. Aenean aliquet dignissim semper. Maecenas ullamcorper est vitae sem ornare interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer dolor diam, tincidunt ac euismod ac, sollicitudin varius ante. Pellentesque elementum commodo dolor sit amet semper. Nullam id massa a turpis bibendum tincidunt. [gap height=”20″]

[incor name=”o”]

Ordered & Unordered Lists

[gap height=”5″]

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Aliquam pharetra metus tempus nisi ornare venenatis.
  • In pellentesque lacus non odio malesuada, ac pulvinar purus ornare.
  • Mauris eu tortor luctus, mollis purus quis, scelerisque sapien.
  • In fermentum urna quis convallis feugiat.
  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  2. Aliquam pharetra metus tempus nisi ornare venenatis.
  3. In pellentesque lacus non odio malesuada, ac pulvinar purus ornare.
  4. Mauris eu tortor luctus, mollis purus quis, scelerisque sapien.
  5. In fermentum urna quis convallis feugiat.

[gap height=”10″]

Nested Lists

[gap height=”10″][one_half]

  • List item one
    • List item one
      • List item one
      • List item two
      • List item three
      • List item four
    • List item two
    • List item three
    • List item four
  • List item two
  • List item three
  • List item four

[/one_half][one_half_last]

  • List item one
    1. List item one
      1. List item one
      2. List item two
      3. List item three
      4. List item four
    2. List item two
    3. List item three
    4. List item four
  • List item two
  • List item three
  • List item four

[/one_half_last] [gap height=”20″]

Icon list 1640+

[gap height=”15″] [one_third][list list_items=”list item,list item,list item,list item,list item” icon=”fa-icon-ok” icon_color=”#92ca1a”][/one_third] [one_third][list list_items=”list item,list item,list item,list item,list item” icon=”fa-icon-remove” icon_color=”#de5b5b”][/one_third] [one_third_last][list list_items=”list item,list item,list item,list item,list item” icon=”fa-icon-cog” icon_color=”#5ba5de”][/one_third_last] [gap height=”20″]

Highlights

[gap height=”15″] Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer dolor diam, tincidunt ac euismod ac, sollicitudin varius ante. [highlight]Pellentesque elementum commodo[/highlight] dolor sit amet semper. Nullam id massa a turpis bibendum tincidunt. Donec non augue id augue [highlight bgcolor=”#5ba5de” txtcolor=”#ffffff”]dignissim molestie elementum[/highlight] vitae velit. Quisque laoreet eleifend posuere. Mauris congue venenatis nisl ut varius. In posuere [highlight bgcolor=”#de5b5b” txtcolor=”#ffffff”]sem lorem, eu iaculis[/highlight] ante. [gap height=”20″]

Pre & Code

[gap height=”5″]

function foo($arg_1, $arg_2, /* ..., */ $arg_n)
{
    echo "Example function.n";
    return $retval;
}

[gap height=”20″]

Tables

[gap height=”5″]

Employee Salary
John Doe $1 Because that’s all Steve Jobs needed for a salary.
Jane Doe $100K For all the blogging she does.
Fred Bloggs $100M Pictures are worth a thousand words, right? So Jane x 1,000.
Jane Bloggs $100B With hair like that?! Enough said…
Last Name First Name Email Due Web Site
Smith John jsmith@gmail.com $50.00 http://www.jsmith.com
Bach Frank fbach@yahoo.com $50.00 http://www.frank.com
Doe Jason jdoe@hotmail.com $100.00 http://www.jdoe.com
Conway Tim tconway@earthlink.net $50.00 http://www.tway.com

[gap height=”20″]

Definition Lists

[gap height=”5″]

Definition List Title
Definition list division.
Startup
A startup company or startup is a company or temporary organization designed to search for a repeatable and scalable business model.
#dowork
Coined by Rob Dyrdek and his personal body guard Christopher “Big Black” Boykins, “Do Work” works as a self motivator, to motivating your friends.
Do It Live
I’ll let Bill O’Reilly will explain this one.

 

one image fit in everywhere

Proin tristique elit et augue varius pellentesque. Donec enim neque, vulputate et commodo in, tristique sed velit. Phasellus adipiscing faucibus felis eget hendrerit. Vestibulum aliquet mauris sed felis convallis, sed tempus augue malesuada. Vivamus mauris lorem, laoreet sed suscipit nec, dapibus at elit. In in augue lobortis, eleifend tortor et, varius eros. Vivamus dignissim sed justo vitae suscipit. Mauris mi sem, malesuada sed sapien ut, sagittis condimentum urna. Nullam lacus mi, vulputate sed sollicitudin in, semper ut elit. Phasellus nec est at leo euismod placerat a porttitor est. Curabitur vel varius nunc, nec tincidunt magna. Proin eros mauris, lobortis id quam non, euismod fringilla nulla. Fusce vel nisi et turpis tempor molestie sit amet a dolor.

Vestibulum sit amet ante eget diam scellioness_3-wallpaper-1280x960erisque eleifend. Nam metus mauris, cursus non suscipit ut, faucibus ut quam. Quisque ac scelerisque dolor. Nam sapien leo, euismod id elementum ut, dapibus eget elit. Nunc posuere porttitor nulla facilisis congue. Maecenas molestie quam eu nibh porttitor, vitae vestibulum turpis molestie. Sed quis mauris vitae dolor imperdiet pharetra. Sed et eros eget sapien tempor cursus sit amet eget eros. Nunc a mauris imperdiet, scelerisque diam laoreet, consequat nibh. Morbi gravida ornare sem, aliquet vehicula augue egestas eget. Sed mollis fringilla enim, ac accumsan metus porta et. Fusce ut lacinia ante, et pretium velit. Nullam eget metus enim. Vestibulum mollis leo in nulla tristique, sit amet tincidunt nibh tincidunt. Cras at sem at leo pretium bibendum et at nisl. Pellentesque odio enim, consectetur vitae commodo non, facilisis tincidunt justo.

[dropcap]C[/dropcap]um sociis natoque penatibus et magnis dis parturient montes This is a link, nascetur ridiculus mus. Integer dolor diam, tincidunt ac euismod ac, sollicitudin varius ante. Pellentesque elementum commodo dolor sit amet semper. Nullam id massa a turpis bibendum tincidunt. Donec non augue id Bold and emphasize text augue dignissim molestie elementum vitae velit. Quisque Under line text laoreet eleifend posuere. Mauris congue venenatis nisl ut varius. In posuere sem lorem, delete this Insert this  eu iaculis ante.

[incor name=”h”]

Heading 1

ullamcorper est vitae sem ornare interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Heading 2

ullamcorper est vitae sem ornare interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Heading 3

ullamcorper est vitae sem ornare interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Heading 4

ullamcorper est vitae sem ornare interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

[gap height=”20″]

[incor name=”d”]

DropCaps

[gap height=”15″] [one_half]

[dropcap style=”square” font=”play”]D[/dropcap]ullamcorper est vitae sem ornare interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer dolor diam, tincidunt ac euismod ac.

[/one_half] [one_half_last]

[dropcap style=”circle” font=”play”]A[/dropcap]ullamcorper est vitae sem ornare interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer dolor diam, tincidunt ac euismod ac.

[/one_half_last] [one_half]

[dropcap style=”square” bgcolor=”#de5b5b” sradius=”3″ font=”play”]B[/dropcap]ullamcorper est vitae sem ornare interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer dolor diam, tincidunt ac euismod ac. [/one_half] [one_half_last]

[dropcap style=”circle” bgcolor=”#5ba5de” font=”play”]C[/dropcap]ullamcorper est vitae sem ornare interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer dolor diam, tincidunt ac euismod ac.

[/one_half_last] [gap height=”20″]

Quotes

[gap height=”15″] [quote font_style=”normal”] Maecenas ullamcorper est vitae sem ornare interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer dolor diam, tincidunt ac euismod ac, sollicitudin varius ante.[/quote] Curabitur sit amet magna quam. Praesent in libero vel turpis pellentesque egestas sit amet vel nunc. Nunc lobortis dui neque, quis accumsan dolor. Aenean aliquet dignissim semper. [quote font_style=”normal” bcolor=”#e5e5e5″ align=”right”]sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.[/quote]Curabitur sit amet magna quam. Praesent in libero vel turpis pellentesque egestas sit amet vel nunc. Nunc lobortis dui neque, quis accumsan dolor. Aenean aliquet dignissim semper. Maecenas ullamcorper est vitae sem ornare interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer dolor diam, tincidunt ac euismod ac, sollicitudin varius ante. Pellentesque elementum commodo dolor sit amet semper. Nullam id massa a turpis bibendum tincidunt. [gap height=”20″]

[incor name=”o”]

Ordered & Unordered Lists

[gap height=”5″]

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Aliquam pharetra metus tempus nisi ornare venenatis.
  • In pellentesque lacus non odio malesuada, ac pulvinar purus ornare.
  • Mauris eu tortor luctus, mollis purus quis, scelerisque sapien.
  • In fermentum urna quis convallis feugiat.
  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  2. Aliquam pharetra metus tempus nisi ornare venenatis.
  3. In pellentesque lacus non odio malesuada, ac pulvinar purus ornare.
  4. Mauris eu tortor luctus, mollis purus quis, scelerisque sapien.
  5. In fermentum urna quis convallis feugiat.

[gap height=”10″]

Nested Lists

[gap height=”10″][one_half]

  • List item one
    • List item one
      • List item one
      • List item two
      • List item three
      • List item four
    • List item two
    • List item three
    • List item four
  • List item two
  • List item three
  • List item four

[/one_half][one_half_last]

  • List item one
    1. List item one
      1. List item one
      2. List item two
      3. List item three
      4. List item four
    2. List item two
    3. List item three
    4. List item four
  • List item two
  • List item three
  • List item four

[/one_half_last] [gap height=”20″]

Icon list 1640+

[gap height=”15″] [one_third][list list_items=”list item,list item,list item,list item,list item” icon=”fa-icon-ok” icon_color=”#92ca1a”][/one_third] [one_third][list list_items=”list item,list item,list item,list item,list item” icon=”fa-icon-remove” icon_color=”#de5b5b”][/one_third] [one_third_last][list list_items=”list item,list item,list item,list item,list item” icon=”fa-icon-cog” icon_color=”#5ba5de”][/one_third_last] [gap height=”20″]

Highlights

[gap height=”15″] Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer dolor diam, tincidunt ac euismod ac, sollicitudin varius ante. [highlight]Pellentesque elementum commodo[/highlight] dolor sit amet semper. Nullam id massa a turpis bibendum tincidunt. Donec non augue id augue [highlight bgcolor=”#5ba5de” txtcolor=”#ffffff”]dignissim molestie elementum[/highlight] vitae velit. Quisque laoreet eleifend posuere. Mauris congue venenatis nisl ut varius. In posuere [highlight bgcolor=”#de5b5b” txtcolor=”#ffffff”]sem lorem, eu iaculis[/highlight] ante. [gap height=”20″]

Pre & Code

[gap height=”5″]

function foo($arg_1, $arg_2, /* ..., */ $arg_n)
{
    echo "Example function.n";
    return $retval;
}

[gap height=”20″]

Tables

[gap height=”5″]

Employee Salary
John Doe $1 Because that’s all Steve Jobs needed for a salary.
Jane Doe $100K For all the blogging she does.
Fred Bloggs $100M Pictures are worth a thousand words, right? So Jane x 1,000.
Jane Bloggs $100B With hair like that?! Enough said…
Last Name First Name Email Due Web Site
Smith John jsmith@gmail.com $50.00 http://www.jsmith.com
Bach Frank fbach@yahoo.com $50.00 http://www.frank.com
Doe Jason jdoe@hotmail.com $100.00 http://www.jdoe.com
Conway Tim tconway@earthlink.net $50.00 http://www.tway.com

[gap height=”20″]

Definition Lists

[gap height=”5″]

Definition List Title
Definition list division.
Startup
A startup company or startup is a company or temporary organization designed to search for a repeatable and scalable business model.
#dowork
Coined by Rob Dyrdek and his personal body guard Christopher “Big Black” Boykins, “Do Work” works as a self motivator, to motivating your friends.
Do It Live
I’ll let Bill O’Reilly will explain this one.