View source for Help:Visual file markup/frameless mode

This is the default presentation of an image in frameless mode. The default size of 220 pixels wide disrupts the flow of the text, making the page unattractive.

<div style="border:1px solid #A3B1BF; background:#f5faff; padding:1em; margin:0em 1em 1em 0em; float:left; font-size:105%">
<code><nowiki>[[File:Bad Title Example.png|frameless|alt=Example alt text]]</nowiki></code>
----
<div style="color:#996633">{{Lorem ipsum}}</div>[[File:Bad Title Example.png|frameless|alt=Example alt text]]<div style="color:#996633">{{Lorem ipsum}}</div>
</div>

The image now sits nicely in the text, but is very small. Inline images are best for images that look good at very small sizes. For that reason, and because it disrupts the flow of the text, inline images are not used often on Wikipedia.

<div style="border:1px solid #A3B1BF; background:#f5faff; padding:1em; margin:0em 1em 1em 0em; float:left; font-size:105%">
<code><nowiki>[[File:Bad Title Example.png|frameless|20px|alt=Example alt text]]</nowiki></code>
----
<div style="color:#996633">{{Lorem ipsum}}</div>[[File:Bad Title Example.png|frameless|20px|alt=Example alt text]]<div style="color:#996633">{{Lorem ipsum}}</div>
</div>

This image has a horizontal alignment specified, which takes the image out of inline mode, and in this case, allows text to flow around the image.

<div style="border:1px solid #A3B1BF; background:#f5faff; padding:1em; margin:0em 1em 1em 0em; float:left; font-size:105%">
<code><nowiki>[[File:Bad Title Example.png|frameless|left|alt=Example alt text]]</nowiki></code>
----
<div style="color:#996633">{{Lorem ipsum}}</div>[[File:Bad Title Example.png|frameless|left|alt=Example alt text]]<div style="color:#996633">{{Lorem ipsum|3}}</div>
</div>

This is the default presentation of a video in frameless mode. This doesn't use inline mode nor does it allows text to flow around the video.

<div style="border:1px solid #A3B1BF; background:#f5faff; padding:1em; margin:0em 1em 1em 0em; float:left; font-size:105%">
<code><nowiki>[[File:Big Buck Bunny small.ogv|frameless|alt=Example alt text]]</nowiki></code>
----
<div style="color:#996633">{{Lorem ipsum}}</div>[[File:Big Buck Bunny small.ogv|frameless|alt=Example alt text]]<div style="color:#996633">{{Lorem ipsum}}</div>
</div>


Adding a horizontal alignment does allow text to flow around the video.

<div style="border:1px solid #A3B1BF; background:#f5faff; padding:1em; margin:0em 1em 1em 0em; float:left; font-size:105%">
<code><nowiki>[[File:Big Buck Bunny small.ogv|frameless|right|alt=Example alt text]]</nowiki></code>
----
<div style="color:#996633">{{Lorem ipsum}}</div>[[File:Big Buck Bunny small.ogv|frameless|right|alt=Example alt text]] {{Lorem ipsum|3}}</div>