Library Research: LibGuide Editor's Guide: Images: Full Width & Wrapped Text

Code Sample for a Full-Width Image

The LibGuides platform never presents an image as wider than 1,000 px so it is best practice to edit your image ahead of time by cropping to 1000px (or smaller) width. This allows images to load more quickly and saves mobile visitors some of their phone-plan data use. There is an excellent online image editor if you don't have a desktop application.

Copy the code from the following paragraph and paste it in the Source section of your own page, in the appropriate area relative to the rest of your text. Remember to change the alt text and the image source code.

<p><img style="max-width: 100%;" alt="Image of lionfish is an ad, with logo, for National Geographic Kids." src="//libapps.s3.amazonaws.com/accounts/126694/images/lionfish.jpg"></p>

Notice the code for the image has 3 essential tags. Every image needs only these 3 tags, in any order:

Style (style="xxxxx"). In the above example the image is constrained to always fill the full available width of the display.
Source (src="xxxxx"). In the above example the image is served by the LibApps Image Manager.
Alternative text (alt="xxxxx"). Alternative text should be used to deliver any information that a person could consume by sight.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras et elit quis arcu lobortis semper at eget erat. Nullam imperdiet finibus libero, a ullamcorper turpis molestie non. Donec finibus hendrerit porta. Morbi quis lectus arcu. Donec pharetra eu nisl a tristique. Fusce pulvinar felis ac mi finibus, et varius tortor pellentesque. Proin bibendum elementum pulvinar. Nunc feugiat nunc ac ante rutrum, sit amet tempor augue ultricies. Donec eget ante nulla. Morbi eu euismod erat. In faucibus feugiat leo vitae consectetur.

Code Sample for a Wrapped Image

And following is the code to float an image on the right-hand side, using 30% of the available space.
Copy this code and paste it in Source section of your own page, in the appropriate area relative to the rest of your text. Remember to change the alt text and the image source code.

Notice the code for the image has those 3 essential tags:

Alternative text (alt="xxxxx"). Alternative text should be used to deliver any information that a person could consume by sight.
Source (src="xxxxx"). In the above example the image is served by the LibApps Image Manager.
Style (style="xxxxx"). In the above example the image has 3 constraints
- To never fill more than 30% of the available width of the display (max-width: 30%;),
- To float over on the right-hand side of the display (float: right;),
- To have a bit of white space between it and the surrounding text (margin-bottom: 10px; margin-left: 20px;)

Vivamus et lorem felis. In hac habitasse platea dictumst. Phasellus ultricies nunc ut odio sodales, in suscipit magna pulvinar. Sed convallis risus vel nisi congue fringilla. Nunc ac augue velit. Ut ut nisi ante. Maecenas tempus eu leo a finibus. Sed ipsum nulla, vulputate non ullamcorper eget, convallis in lectus.

Pellentesque porta leo in leo sodales convallis. Vestibulum fringilla, libero nec ullamcorper sollicitudin, nisl arcu bibendum lacus, non viverra nibh urna a libero. Duis vulputate urna velit, sit amet tristique ligula maximus vitae. In hac habitasse platea dictumst. Donec venenatis placerat turpis at iaculis. Ut lacus nulla, pellentesque vel nunc id, molestie pharetra ante.

Vestibulum semper blandit pretium. Nunc eget tincidunt diam. Donec eu suscipit ex, eu varius neque. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras eget elementum dolor, ut blandit purus. Curabitur et eleifend quam. Nunc non imperdiet nisi, sed semper elit. Etiam vel nulla augue. Nam vulputate, orci eu fermentum fringilla, nisl justo elementum ante, vel faucibus urna velit id lacus. Proin ultricies malesuada pellentesque. Sed luctus, turpis quis tempor laoreet, risus risus tincidunt nisl, at congue odio quam a ipsum. Ut sodales quam sit amet aliquam vestibulum.