Magazine

News Styles Documentation

Getting this first image in is easy!

  1. Upload an image
  2. Add some keywords into the keywords field

The keywords will tell the publishing system to automatically include a photo on the story page at the top, will give the image "alt" text (which is text for a user who has images turned off), provide a caption to the photo with "caption=some text here", give the photo a width and height specification, and if you add "home=yes" then this image will also appear on the main index page of the site.

The pull quote

This is the pull quote mechanism. It can be on the left or right.

A pull quote is inside a "div" which is essentially a box element, or container inside a web page. A "div" separates itself from paragraphs of text. The code looks like this:

<div class="pullleft">Pull quote goes inside the tags.</div>

And, the markup for a pull quote should have an empty line above and below it or else it won't work properly. Scroll down for the next image example.

Floating image with quote

dangerous rock
This is a rock hazard in a lake -- beware!

This is all easy to do but all the pieces must be exact! Here is the markup for a floating image with caption. Hint: If you change "photoleft" to "photoright" it appears to the right of the column.

<div class="photoleft" style="width:300px;"><img src="/bowdoinmagazine/archives/images/rock.jpg" width="300" height="199" alt="dangerous rock" /><br />This is a rock hazard in a lake -- beware!</div>

some moss
Here we are on the right.

Praesent non velit sit amet arcu malesuada sollicitudin. Curabitur lacinia sem non sapien. Etiam vehicula sagittis ligula. In eu ligula. Nunc lobortis condimentum dolor. In in mauris. Pellentesque facilisis ligula a est. Donec justo risus, viverra eu, rhoncus id, iaculis sodales, purus. Duis tristique lobortis tellus. Curabitur neque purus, vestibulum sit amet, viverra eu, sagittis sit amet, quam. Integer wisi dolor, imperdiet et, porttitor tincidunt, volutpat id, mauris. Morbi vel elit. Maecenas quam.

Plain old image inline to a paragraph

No caption - just illustrative or supporting images. Put them inside a paragraph with the tag like this (just toggle the align statement for left/right):

<img src="/bowdoinmagazine/archives/images/redmushroom.jpg" width="260" height="172" alt="red mushroom" align="right" />

Duis rhoncus. Nunc nec augue. Donec egestas. Phasellus eros nunc, sollicitudin vitae, posuere vitae, laoreet aliquam, velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec tristique blandit erat. Proin sed lacus. red mushroom Nullam sollicitudin, nulla ac pharetra molestie, ante lectus adipiscing metus, et luctus ligula elit vitae wisi. Nulla facilisi. Ut eu augue. In cursus, felis at imperdiet ultrices, odio urna ornare velit, vitae consectetuer orci ante vel felis. Phasellus elementum faucibus arcu. Praesent sit amet pede ut tortor gravida gravida.

Aliquam tristique, augue et cursus hendrerit, sem ligula laoreet nulla, ut dapibus metus wisi facilisis neque. Morbi id ligula et tellus aliquet consectetuer. Maecenas ac diam. Aliquam eget nisl nec felis consequat semper. Aliquam erat volutpat. Fusce pretium. Praesent lacinia, wisi a cursus sagittis, justo quam semper nibh, eget aliquam massa ante quis metus. Vestibulum eget mauris eu lorem consectetuer interdum. Integer dui. Morbi et libero nec dolor luctus rutrum. Duis in eros. Integer pretium, ante a egestas vehicula, odio leo gravida ipsum, at vestibulum urna justo in sem. Morbi a arcu id mi imperdiet tempor. Phasellus bibendum malesuada sem. Sed et dui. Nullam eget mauris. Cras convallis mi nec nisl. Duis aliquam felis et lacus. Aliquam ullamcorper volutpat justo.

Boxed image with long caption

<div class="photobox">
<div class="spacer"> </div>
<div class="photoleft" style="width:300px;"><img src="/path/to/your/images/image.jpg" width="300" border="0" /></div>
<div class="caption-long">Longish descriptive text -- break out text. About 80 words max.Longish descriptive text -- break out text. About 80 words max.Longish descriptive text -- break out text. About 80 words max.Longish descriptive text -- break out text. About 80 words max.Longish descriptive text -- break out text. About 80 words max.</div>
<div class="spacer"> </div>
</div>


 


Longish descriptive text -- break out text. About 80 words max.Longish descriptive text -- break out text. About 80 words max.Longish descriptive text -- break out text. About 80 words max.Longish descriptive text -- break out text. About 80 words max.Longish descriptive text -- break out text. About 80 words max.

 

A simple idea. The pieces of html markup are important otherwise, this will not work. The idea here is two boxes inside of one. There is a container box "photobox" which holds the image in "photoleft" (or right) and the caption "caption-long".

Full column photo

<div class="photobox"><img src="/bowdoinmagazine/archives/images/blackstuff.jpg" width="480" height="384" alt="some lichen" /></div>

some lichen

This is just "photobox" without any additions. The maximum width here is 480px.

Praesent non velit sit amet arcu malesuada sollicitudin. Curabitur lacinia sem non sapien. Etiam vehicula sagittis ligula. In eu ligula. Nunc lobortis condimentum dolor. In in mauris. Pellentesque facilisis ligula a est. Donec justo risus, viverra eu, rhoncus id, iaculis sodales, purus. Duis tristique lobortis tellus. Curabitur neque purus, vestibulum sit amet, viverra eu, sagittis sit amet, quam. Integer wisi dolor, imperdiet et, porttitor tincidunt, volutpat id, mauris. Morbi vel elit. Maecenas quam.

Summary

It’s all about rules really. The markup is easy to follow once you have a cheat sheet, memorize it, or understand it for yourself.

To have styles inline to a story is the only way to move a site forward from a visual perspective. The core of course is the content itself but photos and pull quotes are as much a part of the story really.

These styles are known to work in all modern browsers. If you follow these examples to the letter there shouldn't be any problems.

Eventually these styles will live in a common news style sheet.

I urge you to use a bit more beauty in how these styles are implemented than I have on this page.