Image & textflow test

src/pages/textflow-3.md

Text Wrapping Test in MD file

This paragraph will wrap around the image on the right. In a classic WordPress setup, this was usually handled by an alignright class. Here, we use a simple style attribute or a global CSS class.

Chiswick

The text below will flow to the left of the image above. When you copy content from the “Long Page” about the Cheshire Cheese Company, you can place an image of the fulfillment warehouse here. Using a float: right ensures that your text remains readable while the image sits neatly to the side. If the text is shorter than the image, you might need a “clear” fix afterward.

Pop-out (Fancybox) Test

To make an image “pop out” when clicked, you usually wrap the image in a link pointing to the same file. Maecenas id sapien risus. Nullam varius id tellus quis volutpat. In a tempor tortor, cursus sodales enim. Integer sed felis et massa lacinia molestie volutpat quis dui. Duis interdum libero sed velit ornare, at blandit nulla volutpat. Mauris quis mi arcu.

Morgan le Fay by Sandys

This is an example of a left-aligned floating image with a link intended for a lightbox. Because we used float: left, this text will wrap around the right side of this smaller image. Proin diam lectus, blandit sit amet odio id, ultrices venenatis erat. Fusce lacinia, tortor eget dapibus condimentum, odio urna elementum eros, vestibulum ornare eros sapien in turpis. Vivamus congue consectetur odio at convallis. Aliquam metus nunc, iaculis at quam in, pellentesque aliquam lorem. Integer quis pretium turpis. Morbi diam justo, porttitor nec augue nec, blandit posuere neque. Aenean molestie facilisis turpis, id sagittis nisl ornare vitae. Cras rutrum lacus tellus. Sed id est et leo porta blandit. Donec id tempus sem. Integer hendrerit urna eget nunc dignissim accumsan. Aliquam vitae bibendum massa, in accumsan risus. Donec eu turpis dapibus ligula interdum sodales eu eget nibh.

Parakeets on bird feeder

Aenean ultrices aliquam magna, eu facilisis lacus egestas eu. Maecenas ultrices nulla in convallis hendrerit. Aliquam posuere urna et enim faucibus, ac condimentum ipsum egestas. Ut viverra dolor in felis hendrerit euismod. Etiam molestie magna at egestas vulputate. Vestibulum rhoncus tortor consequat elementum pulvinar. Nulla elementum quam eget diam sagittis, vel porta odio ullamcorper. Curabitur pulvinar quis turpis non dignissim. In in sapien aliquet lectus laoreet pellentesque in eu enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Summary of Specifications:

• Caption: Handled by a <p> tag inside a <div> wrapper.
• Size: Handled by setting the width on the wrapper <div>.
• Float: Set via float: left or float: right.
• Float clear: <div style="clear: both;"></div>
• Pop-out: Handled by <a data-fancybox