Good morning, folks. This diary is the first one posted by ePluribus Media under this specific account name since June of 2008, so we're going to provide both a re-introduction to our organization as well as some nifty tips and tricks regarding formatting images and text on DK4. If you're simply looking for "how to" information, we'll give you a good handle and you can add your own in comments. If you're also curious about citizen journalism, the role of bloggers and online investigative reporting, we'll hopefully pique your interest there as well.
Are you ready?
Make the jump, take the plunge and hang on to your spleen (or whatever you currently use as a substitute organ).
Today's ePM diary is written and posted by GreyHawk on behalf of ePluribus Media. Any errors, bad jokes or errata are his. And if you happen to find any feathers floating about, ignore them - he's randomly molting to create a new set of quills.
First, the meat: Formatting on DK4
The transition to the new DK4 format brought with it multiple improvements as well as a few changes designed to help make things operate much more smoothly and logically. However, a few folks have noticed that controlling the formats of a diary layout have altered, leaving them without any idea of how to establish the type of formatting control they were used to. This diary aims to provide an initial set of "how-to" instructions to help you get back on track.
Be advised, however, that the items shown here are not an exhaustive list, and likely subject to modification or change as the DK4 team massages, revises and implements a few adjustments along the way.1
Setting up headers
Headers are a good way to set apart sections of a diary. On the new DK4, you can put the HTML codes for a "header 2" class around a piece of text, and voila!, instant headers. Want to see it in action? OK -- from CSKendrick's piece Arguing With Style Workshop :), here's an example of using <h2>headers</h2>. First, the way the diary was originally posted, with the diarist making do with the basic <u> (underline) and <b> (bold) codes to create a header:
Debunking Some Myths
Thou shalt refrain from arguing. Yeah, right. It's not just possible but expected to argue in politics. If you can't put forward an argument and invest some personal oomph into it, stick to writing in personal and academic journals. Politics is the allocation of right, power and wealth by non-violent, non-economic means. Not always by force of law, but sometimes. And some measure of coercion is always present - if nothing else, then peer pressure.
If you're not fighting, you're a resource being fought over
[...snip...]
Things you should be doing
Be Calm. This is a distribution channel for information. For messages. It is NOT personal, though being politics it requires an appreciation for the personal. You can't NOT be invested in your words in a place such as DKOS and be effective. This is going to expose you to emotional distress from time to time.
And, if cskendrick had this handy reference available to help him make use of the site's built-in headers, it would look like this:
Debunking Some Myths
Thou shalt refrain from arguing. Yeah, right. It's not just possible but expected to argue in politics. If you can't put forward an argument and invest some personal oomph into it, stick to writing in personal and academic journals. Politics is the allocation of right, power and wealth by non-violent, non-economic means. Not always by force of law, but sometimes. And some measure of coercion is always present - if nothing else, then peer pressure.
If you're not fighting, you're a resource being fought over.
[...snip...]
Things you should be doing
Be Calm. This is a distribution channel for information. For messages. It is NOT personal, though being politics it requires an appreciation for the personal. You can't NOT be invested in your words in a place such as DKOS and be effective. This is going to expose you to emotional distress from time to time.
See the difference? (Go show the diarist some love for providing a great excerpt to illustrate headers. I'll wait. And thanks!)
There. That wasn't so hard. And there's more -- it gets a tad more complicated if you're not used to geeky-techy-webby code, but it's not impossible. Let's move on to Images...
Image formatting
Image formatting allows a user to place an image to the left, right or center of a portion of their post, usually relative to text or margins. Depending on what a site permits for formatting options, an image can be defined to include a border around it to help set it off as well as some padding (white or empty space) to keep it from running right into other images or words on the page. And sometimes the formatting can specify that an image should post with no padding (class="nomargin") so that images can be placed immediately side by side, as if creating a mozaic.
Images courtesy of aeou. Used w/o permission.
Image formatting - Margins and Alignment
On the previous incarnation of DailyKos, known fondly to some as "DK3" (and as "B0b" by GreyHawk, but he has a tendency to nickname everything "B0b"), image formatting included formatting elements that allowed the user to fine-tune the margins around an image to provide it with some white space in order to set it off from other elements on the page. Those elements - also known as 'attributes' - were hspace and vspace. They allowed a user to specify the number of pixels to add as padding.
They've been deprecated.
Now, in order to post images with padding and borders and such whatnot, you have to use either a class modifier or a div statement (or a combination of both), and you do not have the ability to specify the amount of padding.3
Wrapping text around an image is an ability that really helps dress up a diary or comment in addition to setting off an image with padding. In order to do it right, you need to ensure that there's a bit of padding around the image, and sometimes (good practice) you should add a caption. There are two main ways to post images that accomplish text wrap and alignment:
- Use the <div id="uimg_left"> or <div id="uimg_right"> or <div id="uimg_center"> before the actual <img > call (which allows you to use the "caption" feature)
- use the <img class="right" ...> or <img class="left" ...>
Here are some examples of each:
Code for class (left-aligned):
<p><img class="left" src="http://images.dailykos.com/i/user/426/WI226.jpg" width="200">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In convallis porta tincidunt. Morbi tincidunt ultricies tincidunt. Quisque id condimentum nunc. Cras eu cursus erat. Fusce eu metus quam. Donec non felis nisl, in dictum dui. Etiam condimentum molestie odio, sit amet blandit tellus suscipit eget. Aliquam ipsum eros, ultricies in commodo non, volutpat nec leo. Curabitur sit amet nunc in mauris euismod lacinia in ac neque. Donec aliquet justo et nulla posuere auctor. Pellentesque eu metus eu velit viverra volutpat id id dui. Nullam sed lacus quis nibh scelerisque consectetur.</p><p>Mauris suscipit, mauris ut suscipit consequat, mauris lectus interdum nunc, vitae ultricies nisl ante porta turpis. Maecenas lorem lectus, tempus vel congue ac, aliquam et arcu. Nam tristique est et nisi aliquam cursus. Sed aliquam tincidunt nunc ut aliquet... </p>
Image is sourced from DemFromCT's front paged Abbreviated Pundit Round-up.
The code above gives us:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In convallis porta tincidunt. Morbi tincidunt ultricies tincidunt. Quisque id condimentum nunc. Cras eu cursus erat. Fusce eu metus quam. Donec non felis nisl, in dictum dui. Etiam condimentum molestie odio, sit amet blandit tellus suscipit eget. Aliquam ipsum eros, ultricies in commodo non, volutpat nec leo. Curabitur sit amet nunc in mauris euismod lacinia in ac neque. Donec aliquet justo et nulla posuere auctor. Pellentesque eu metus eu velit viverra volutpat id id dui. Nullam sed lacus quis nibh scelerisque consectetur.
Mauris suscipit, mauris ut suscipit consequat, mauris lectus interdum nunc, vitae ultricies nisl ante porta turpis. Maecenas lorem lectus, tempus vel congue ac, aliquam et arcu. Nam tristique est et nisi aliquam cursus. Sed aliquam tincidunt nunc ut aliquet...
Code for class (right-aligned):
<p><img class="right" src="http://images.dailykos.com/i/user/426/WI226.jpg" width="200">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In convallis porta tincidunt. Morbi tincidunt ultricies tincidunt. Quisque id condimentum nunc. Cras eu cursus erat. Fusce eu metus quam. Donec non felis nisl, in dictum dui. Etiam condimentum molestie odio, sit amet blandit tellus suscipit eget. Aliquam ipsum eros, ultricies in commodo non, volutpat nec leo. Curabitur sit amet nunc in mauris euismod lacinia in ac neque. Donec aliquet justo et nulla posuere auctor. Pellentesque eu metus eu velit viverra volutpat id id dui. Nullam sed lacus quis nibh scelerisque consectetur.</p><p>Mauris suscipit, mauris ut suscipit consequat, mauris lectus interdum nunc, vitae ultricies nisl ante porta turpis. Maecenas lorem lectus, tempus vel congue ac, aliquam et arcu. Nam tristique est et nisi aliquam cursus. Sed aliquam tincidunt nunc ut aliquet... </p>
The code above gives us:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In convallis porta tincidunt. Morbi tincidunt ultricies tincidunt. Quisque id condimentum nunc. Cras eu cursus erat. Fusce eu metus quam. Donec non felis nisl, in dictum dui. Etiam condimentum molestie odio, sit amet blandit tellus suscipit eget. Aliquam ipsum eros, ultricies in commodo non, volutpat nec leo. Curabitur sit amet nunc in mauris euismod lacinia in ac neque. Donec aliquet justo et nulla posuere auctor. Pellentesque eu metus eu velit viverra volutpat id id dui. Nullam sed lacus quis nibh scelerisque consectetur.
Mauris suscipit, mauris ut suscipit consequat, mauris lectus interdum nunc, vitae ultricies nisl ante porta turpis. Maecenas lorem lectus, tempus vel congue ac, aliquam et arcu. Nam tristique est et nisi aliquam cursus. Sed aliquam tincidunt nunc ut aliquet...
Code for div (without caption):
<p><div id="uimg_left"><img src="http://images.dailykos.com/i/user/426/WI226.jpg" width="200"></div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In convallis porta tincidunt. Morbi tincidunt ultricies tincidunt. Quisque id condimentum nunc. Cras eu cursus erat. Fusce eu metus quam. Donec non felis nisl, in dictum dui. Etiam condimentum molestie odio, sit amet blandit tellus suscipit eget. Aliquam ipsum eros, ultricies in commodo non, volutpat nec leo. Curabitur sit amet nunc in mauris euismod lacinia in ac neque. Donec aliquet justo et nulla posuere auctor. Pellentesque eu metus eu velit viverra volutpat id id dui. Nullam sed lacus quis nibh scelerisque consectetur.</p><p>Mauris suscipit, mauris ut suscipit consequat, mauris lectus interdum nunc, vitae ultricies nisl ante porta turpis. Maecenas lorem lectus, tempus vel congue ac, aliquam et arcu. Nam tristique est et nisi aliquam cursus. Sed aliquam tincidunt nunc ut aliquet... </p>
The code above gives us:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In convallis porta tincidunt. Morbi tincidunt ultricies tincidunt. Quisque id condimentum nunc. Cras eu cursus erat. Fusce eu metus quam. Donec non felis nisl, in dictum dui. Etiam condimentum molestie odio, sit amet blandit tellus suscipit eget. Aliquam ipsum eros, ultricies in commodo non, volutpat nec leo. Curabitur sit amet nunc in mauris euismod lacinia in ac neque. Donec aliquet justo et nulla posuere auctor. Pellentesque eu metus eu velit viverra volutpat id id dui. Nullam sed lacus quis nibh scelerisque consectetur.
Mauris suscipit, mauris ut suscipit consequat, mauris lectus interdum nunc, vitae ultricies nisl ante porta turpis. Maecenas lorem lectus, tempus vel congue ac, aliquam et arcu. Nam tristique est et nisi aliquam cursus. Sed aliquam tincidunt nunc ut aliquet...
Code for div (with caption):
<p><div id="uimg_left"><img src="http://images.dailykos.com/i/user/426/WI226.jpg" width="200"><div id="caption"> <small> <i>Hat-tip DemFromCT. Used w/o permission. </i> </small></div></div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In convallis porta tincidunt. Morbi tincidunt ultricies tincidunt. Quisque id condimentum nunc. Cras eu cursus erat. Fusce eu metus quam. Donec non felis nisl, in dictum dui. Etiam condimentum molestie odio, sit amet blandit tellus suscipit eget. Aliquam ipsum eros, ultricies in commodo non, volutpat nec leo. Curabitur sit amet nunc in mauris euismod lacinia in ac neque. Donec aliquet justo et nulla posuere auctor. Pellentesque eu metus eu velit viverra volutpat id id dui. Nullam sed lacus quis nibh scelerisque consectetur.</p><p>Mauris suscipit, mauris ut suscipit consequat, mauris lectus interdum nunc, vitae ultricies nisl ante porta turpis. Maecenas lorem lectus, tempus vel congue ac, aliquam et arcu. Nam tristique est et nisi aliquam cursus. Sed aliquam tincidunt nunc ut aliquet... </p>
The code above gives us:
Hat-tip DemFromCT. Used w/o permission.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In convallis porta tincidunt. Morbi tincidunt ultricies tincidunt. Quisque id condimentum nunc. Cras eu cursus erat. Fusce eu metus quam. Donec non felis nisl, in dictum dui. Etiam condimentum molestie odio, sit amet blandit tellus suscipit eget. Aliquam ipsum eros, ultricies in commodo non, volutpat nec leo. Curabitur sit amet nunc in mauris euismod lacinia in ac neque. Donec aliquet justo et nulla posuere auctor. Pellentesque eu metus eu velit viverra volutpat id id dui. Nullam sed lacus quis nibh scelerisque consectetur.
Mauris suscipit, mauris ut suscipit consequat, mauris lectus interdum nunc, vitae ultricies nisl ante porta turpis. Maecenas lorem lectus, tempus vel congue ac, aliquam et arcu. Nam tristique est et nisi aliquam cursus. Sed aliquam tincidunt nunc ut aliquet...
There are some other ways to format a diary or comment with images or blocks of text using tables, too. That is dealt with a little further down, after the section on Common and Special HTML formatting.
Remember, as you read, to keep track of any questions, problems or issues to put into comments.
Common and Special HTML formatting
The following HTML style and format codes are based upon content from this diary by aeou.
HTML Styles
To use bold: <b>b</b> b (can also use <strong>)
To use strong: <strong>strong</strong> strong
To use italicize: <i>italics</i> italics (can also use <em>)
To use em: <em>em</em> emphasis
To use underscores: <u>u</u> underscore
To use code: <code>code</code> code
To use strike-thru :<s>s</s> strike-thru
To use small <small>small</small> small
To use subscript: <sub>sub</sub> Subscript
To use superscript :<sup>sup</sup> Superscript
To use teletype text :<tt>tt</tt> teletype text
Other HTML special characters:
< = <
> = >
To display an ampersand (&), you need to type & -- it can get confusing. :)
Tables
Tables can be used for aligning, grouping and presenting information. One item that currently can no longer be tweaked (to my knowledge, at this time) is the amount of cell padding and cell spacing used in table cells. It would be useful for constructing tables where you'd like to minimize the space between elements, so hopefully the DK4 team will chime in on the potential for adding such a capability2 in the comments.
Below, you'll find two examples (with associated code) for creating tables, as well as a link to the original example of those tables where they appeared in the comment section of a diary yesterday. Note: Formatting in comments sometimes differs from formatting in diarys. I believe the first example, by mimi, illustrates an aspect of that.
Example #1: using a table for image placement, courtesy of mimi (used w/o permission):
Here's the code to build the table. Note: URL references to images used removed, and alt text as well as titles substituted with generic text.
<table align="center" border="0" cellpadding="0" cellspacing="0">
<tbody><tr><td bgcolor="#f5fff5"><a href="link to image source" title="image title"><img class="nomargins" alt="alt text for image" src="image URL" width="160" height="240"></a></td>
<td><a href="link to image source" title="image title"><img class="nomargins" alt="alt text for image" src="image URL" width="160" height="240"></a></td>
<td><a href="link to image source" title="image title"><img class="nomargins" alt="alt text for image" src="image URL" width="160" height="240"></a></td>
</tr>
<tr><td bgcolor="#f5fff5"><a href="link to image source" title="image title"><img class="nomargins" alt="alt text for image" src="image URL" width="160" height="240"></a></td>
<td><a href="link to image source" title="image title"><img class="nomargins" alt="alt text for image" src="image URL" width="160" height="240"></a></td>
<td><a href="link to image source" title="image title"><img class="nomargins" alt="alt text for image" src="image URL" width="161" height="240"></a></td>
</tr>
</tbody></table>
Example #2, by opendna:
If this |
table works |
columns. |
it will have three rows |
and |
three |
Here's the html code for it:
<table><tbody>
<tr><td bgcolor="#ff0000">If this</td><td bgcolor="#ffff00">table works</td><td rowspan="3" bgcolor="#ff00ff">columns.</td></tr>
<tr><td colspan="2" bgcolor="#c0c0c0">it will have three rows</td></tr>
<tr><td bgcolor="#00ff00">and</td><td bgcolor="#00ffff">three</td></tr>
</tbody></table>
ePluribus Media was formed in 2005. It's an organization that resulted primarily from the work of SusanG and others on the Gannon/Guckert scandal. Our mission statement:
ePluribus Media is a cooperative of citizen volunteers dedicated to researching issues of common concern and encouraging the highest standards of ethics and journalism.
Our mission hasn't changed.
Our organization, however, is undergoing several changes - a metamorphasis and maturing that we're hoping will lead to more active investigations into well researched, fact-checked and edited articles that will be published in our Journal.
We'll be starting a Citizen Journalism group here on DailyKos for people interested in helping us along the way: we'll be looking for folks interested in helping us investigate, write, edit and produce stories.
And we're actively engaged in looking at epublishing work from our Journal (past and ongoing, in addition to some special items) among other exciting projects.
Over the past few months, and in particular over the past week, I (GreyHawk) have seen quite a few folks here lamenting the lack of actual fact-checking in the traditional media. If you're really tired of that, and want to help change it, then you may be interested in jumping aboard and helping us out.
Keep your eyes open for more information as it becomes available. Currently, our Journal is dormant as we redefine the format, delivery and overall structure, but our community site is still open for any crossposts that you think may interest our audience.
If you have any questions, you can add them in comments or use the neat built-in DK4 site messaging for something a little less open & public.
Thanks for reading, and looking forward to any contributed tips & tricks in comments as well as any potential new researchers, writers or editors who may express an interest in our group and organization.
Peace.
1 Reference by elfling regarding upcoming documentation for styles and classes...once they are settled on a "finalized" set that will appear to meet the needs of the majority of the community.
2 Perhaps a class="nomargins" for the <table> tags?
3 You can, however, request that a class with a specific padding size be created. The DK4 builders are open to suggestions and have stated they'd consider adding classes that address a commonly requested padding size.