Tumblelog by Soup.io
Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

July 25 2011

14:30

Vadim Lavrusik: Five key building blocks to incorporate as we’re rethinking the structure of stories

Editor’s Note: Vadim Lavrusik is Facebook’s first Journalist Program Manager, where he is responsible for, among other things, helping journalists to create new ways to tell stories. (You may remember him from his work at Mashable.) In the article below, he provides an wide-angle overview of the key forces that are re-shaping the news article for the digital age.

If we could re-envision today’s story format — beyond the text, photographs, and occasional multimedia or interactive graphics — what would the story look like? How would the audience consume it?

Today’s web “article” format is in many ways a descendent from the golden age of print. The article is mostly a recreation of print page design applied to the web. Stories, for the most part, are coded with a styled font for the headline, byline, and body — with some divs separating complementary elements such as photographs, share buttons, multimedia items, advertising, and a comments thread, which is often so displaced from the story that it’s hard to find. It is only scratching the surface of the storytelling that is possible on the web.

In the last few years, we’ve seen some progress in new approaches to the story format on the web, but much of it has included widgets and tools tacked on for experimentation. And it doesn’t fully account for changes in user behavior and the proliferation of simple publishing tools and platforms on the web. As the Huffington Post’s Saul Hansell recently put it, “There are a lot more people saying things than there is stuff to say in this world.” Tools like Storify and Storyful enable journalists to curate the conversation that’s taking place on the social web, turning ephemeral comments into enduring narratives. A story, Jeff Jarvis notes, can be the byproduct of the process of newsgathering — the conversation.

And the conversation around the story has become, at this point, almost as important as the story itself. The decisions we make now — of design and of content creation — will inform the evolution of the story itself. So it’s worth stepping back and wondering: How can we hack today’s story into something that reflects the needs of today’s news consumers and publishers, integrates the vast amounts of content and data being created online, and generally leverages the opportunities the web has created? Below are some of the most crucial elements of online storytelling; think of it as a starting point for a conversation about the pieces tomorrow’s story format could include.

1. Context

Context wears many hats in a story. It could mean representing historical context through an interactive timeline or presenting contextualized information that puts the story in perspective. It could be an infographic, a subhead with information — or cumulative bits of information that run through a narrative. When the first American newspaper, Publick Occurrences, was published, many of its stories were only a few sentences in length. Most of its stories were reports that were gathered through word of mouth. But because of the infrequency of the publication and short length of the stories, it failed to provide the reader with adequate context in its stories. Haphazard newsgathering led to a somewhat chaotic experience for readers.

Today, though, with publication happening every millisecond, the overflow of information presents a different kind of challenge: presenting short stories in a way that still provides the consumer with context instead of just disparate pieces of information. We’ve seen a piece of the solution with the use of Storify, which enables journalists to organize the social story puzzle pieces together to suggest a bigger picture. But how can this approach be scaled? How can we provide context in a way that is not only comprehensive, but inclusive?

2. Social

Social platforms have, in short, changed the way we consume news. Over the last decade, we consumers spent a big portion of our time searching for news and seeking it out on portals and news sites. Now news finds us. We discover it from friends, colleagues, and people with whom we share intellectual interests. It’s as if on every corner one of our friends is a 1900s paperboy shouting headlines along with their personal take on the news in question. The news is delivered right to us in our personalized feeds and streams.

Social design makes the web feel more familiar. We tend to refer to readers and viewers as consumers, and that’s not only because they consume the content that is presented or pay for it as customers; it’s also because they’re consumed by the noise that the news creates. Social design adds a layer that acts as a filter for the noise.

Stories have certainly integrated social components so far, whether it’s the ability of a consumer to share a story with friends or contribute her two cents in the comments section. But how can social design be integrated into the structure of a story? Being able to share news or see what your friends have said about the piece is only scratching the surface. More importantly, how can social design play nice with other components discussed here? How do you make stories that are not just social, but also contextual — and, importantly, personal?

3. Personalization

One of the benefits of social layering on the web is the ability to personalize news delivery and provide social context for a user reading a story. A user can be presented with stories based on what their social connections have shared using applications like Flipboard, Zite, Trove, and many others. Those services incorporate social data to learn what it is you may be interested in reading about, adding a layer of cusomtization to news consumption. Based on your personal interests, you are able to get your own version of the news. It’s like being able to customize a newscast with only segments you’re interested in, or only have the sports section of the local newspaper delivered to your porch…times ten.

How can we serve consumers’ needs by delivering a story in a format they prefer, while avoiding the danger of creating news consumers who only read about things they want know (and not news they should know)? Those are big questions. One answer could have to do with format: enabling users to consume news in a format or style they prefer, enabling them to create their own personalized article design that suits their needs. Whatever it looks like, personalization is not only important in enabling users to get content in a compelling format. It’s also crucial from the business perspective: It enables publishers to learn more about their audiences to better serve them through forms of advertising, deals, and services that are just as relevant and personalized.

4. Mobile

Tomorrow’s story will be designed for the mobile news consumer. Growing accessibility to smartphones is only going to continue to increase, and the story design and format will likely increasingly cater to mobile users. They will also take into account the features of the platform the consumer is on and their behavior when they are consuming the content. The design will take into account how users interact with stories from their mobile devices, using touch-screen technology and actions. We’re already seeing mobile and tablet design influence web design.

These are challenges not only of design, but of content creation. Journalists may begin to produce more abbreviated pieces for small-screen devices, while enabling longform to thrive on tablet-sized screens. Though journalists have produced content from the field for years, the advancement of mobile technology will continue to streamline this process. Mobile publication is already integrated into content management platforms, and companies like the BBC are working on applications that will enable users to broadcast live from their mobile phones.

5. Participation

Citizens enabled by social platforms are covering revolutions on mobile devices. Users are also able to easily contribute to a story by snapping a picture or video and uploading it with their mobile devices to a platform like iReport. Tomorrow’s article will enable people to be equal participants in the story creation process.

Increasingly, participation will mean far more than simply consumption, being cast aside as a passive audience that can contribute to the conversation only by filing a comment below a published story (pending moderator approval). The likes of iReport, The Huffington Post’s “contribute” feature, or The New York Daily News’ recent uPhoto Olapic integration — which enables people to easily upload their photos to a story slideshow and share photos they’ve already uploaded to Facebook, Flickr, and elsewhere — are just the beginning. To harness participatory journalism, these features should no longer be an afterthought in the design, but a core component of it. As Jay Rosen recently put it, “It isn’t true that everyone is a journalist. But a lot more people are involved.”

Image by Holger Zscheyge used under a Creative Commons license.

September 24 2010

14:19

How to create a wordpress magazine theme using Twenty Ten – Part 4

This is part three of a short series outlining how to tweak a wordpress template to get some magazine style functionality. Part onePart Two and Part three are available here.

In part three of this short series we looked at adding a second loop to our edited index page to get round the problem of our Featured Post being repeated on the front page. In this final part I’ll look at adding a thumbnail and styling up the page.

Image thumbnails

Over the years, theme designers magazine themes have come up with many weird and wonderful ways of getting thumbnail images on front pages. But it’s only recently that WordPress developers added solid support.

One of the things I wanted to do with this series is to avoid too much tweaking of files. So I’m going to be relying on some of the core features for wordpress to get thumbnails on the page rather than fancy tricks. So beefore we get back in to editing the template code to display thumbnails there are few things we need to check.

Media settings

When you add an image to a blog post you are given the option to add it as a thumbnail, medium, large or original size. We are going to be using the standard function to to get a thumbnail (you may remember it from part 1) and it uses the same shorthand to get an image

[php]

[/php]

The sizes for each these are set in the Media section of the settings tab.

The image size options

So our edited front-page is going to be based on these sizes. If you want any other sizes for your page you should set them here first. The downside of working this way is that this will impact on the sizes of images placed in your blog posts -that’s the trade off of keeping things simple.

Adding a featured image.

Version 2.9 of WordPress included a new post thumbnail option which allowed you to define an image to display “as the representative image for a Post or Page. The display of this images is up to the theme. This is especially useful for “magazine-style” themes where each post has an image.” The feature was renamed “featured image” in wordpress 3.0 – I’m guessing to avoid confusion with thumbnails. Whatever it’s called it’s ideal for our front page.

Adding a featured image

When you write a post you should see a panel called Featured Image. Clicking the Add featured image link opens up a standard image browser. You simply find the image you want to use and click the Use as Featured Image link and you’re done.

So before we go on, add a featured image to the post in your Featured Story category.

Adding the thumbnail to the template

Now that we have set up the Featured image we can edit our template file and get an image on our frontpage.

Open up the Main Index Template file and add the following and edit the first loop so it looks like this:

[php]

Our medium thumbnail

Now do the same with the second loop.

[php]

Thumbnails added to each loop

And that’s it.

Adding some style.

Technically we are done. All the elements we want are on the page. But it’s not looking as good as it could be. We need to add some styling information and make some amendments to the stylesheet file.

I’m not going to go in to a big write up of CSS here (try the excellent W3Schools for a basic intro) but if you’re interested in tweaking wordpress templates it’s one of those areas you’ll be spending a lot of time with.

For now, its enough that when dealing with stylesheets, we need to keep our eye open for two things; divs and classes.

Divs

If you look at the Main Index template file, you’ll see the following lines
[html]

……


[/html]

The div tag is an html element that doesn’t actually display anything by default, it defines a section of the page. When it comes to look and feel, the key part is the id . This ‘connects’ the div to display instructions defined in the stylesheet. The style definition for container is:

[css]
#container {
float: left;
margin: 0 -240px 0 0;
width: 100%;
}
[/css]

Anything that sits between the div tags will be effected by this definition.

Classes

One restriction of ID’s is that you can only use them once on a page. So if you have a lot of elements on a page that you want to style you have to use a class. Remember the html we used for our post title:

[php]

[/html]

That means we take the standard H2 formatting and add some custom styling.
[css]
#content .entry-title {
color: #000;
font-size: 21px;
font-weight: bold;
line-height: 1.3em;
margin-bottom: 0;
}
[/css]

This says, any time the class entry-title (denoted by the full-stop) is referenced inside the content div (denoted by the # symbol) apply the following styling.

Image Alignment

The first thing to sort out is the alignment of the images. I’m going to cheat a little here and pick up the standard style call for images.

Change the post_thumbnail function call in the first loop to the following :

[php]
“alignleft”)); ?>
[/php]

The post thumbnail function allows you to stack extra information in parameters that can be ‘added’ to the code as it’s generated. We have stuffed a reference to a style called alignleft. If you call up the Stylesheet file in the theme editor you can find the definiton of that style (you may have to search for while)

[css]
#content .alignleft,
#content img.alignleft {
display: inline;
float: left;
margin-right: 24px;
margin-top: 4px;
}
[/css]

This is very similar to our post title example above but this time there is also a reference to the image tag (img).

To finish up we can add the same class to the thumbnail call in the second loop:
Change the post_thumbnail function call in the first loop to the following :

[php]
“alignleft”)); ?>
[/php]

Boxing in the featured story

To make my featured story stand out I’m going to wrap it in a grey box. To start with I’m going to use a DIV to define that extent of the box.

[php]

…the rest of the loop….



[/php]

I’ve added a new DIV tag with an id called FeaturedStory and closed the div after the end of the loop.

If you update the file and looked at the page you should see nothing new. Remember DIV tags don’t show up till you style them.

Open the Stylesheet file in the editor window and scroll all the way down to the bottom. Add the following:

[css]
#FeaturedStory {
background: #f7f7f7;
color: #222;
margin-bottom: 18px;
padding: 1.5em;
height: 350px;
}
[/css]

This does the following:

  • Changes the background colour to grey
  • Changes the text colour to a dark grey
  • Pads the bottom of the box with 18 pixels of space
  • Pads the all the way round with 1.5 em of space
  • Sets the height of the box to 350pixels

Save the file and look at the results. You’ll see a box around the featured content.

Conclusion

That’s pretty much it. We’ve pulled in a featured post and thumbnail to go with it. Then we added a second loop to pull in the rest of the posts without duplicating our featured post on the page and added a thumbnail to them. Then we styled the results to align the thumbnail and wrap the featured post in a box to make it stand out.

Along the way we’ve touched on PHP, functions, variables and stylesheets. All of which are play a big part in theme development. But we have done it all with the minimum of alteration to the core theme files.

Some issues

This method is not without its issues. Editing the raw files like this is risky if you forget to back things up. There is also the risk that if the theme is updates by wordpress (as it is from time to time) then your customization will be deleted. But the exercise has been more about some of the basic concepts than a robust solution.

So I hope you found it useful and it made sense. Here’s the finished Main index template file:

[php]
/**
* The main template file.
*
* This is the most generic template file in a WordPress theme
* and one of the two required files for a theme (the other being style.css).
* It is used to display a page when nothing more specific matches a query.
* E.g., it puts together the home page when no home.php file exists.
* Learn more: http://codex.wordpress.org/Template_Hierarchy
*
* @package WordPress
* @subpackage Twenty_Ten
* @since Twenty Ten 1.0
*/

get_header(); ?>

/* This is the new loop to display a featured story.
* It creates a variable and then loads all the posts that match the query.
*/

$my_query = new WP_Query('category_name=Featured Story&showposts=1');

/* Now it loops through the results and displays the content.
*/

while ($my_query->have_posts()) : $my_query->the_post();
$do_not_duplicate = $post->ID;

/* We load the Page ID in to a variable to check for duplicates later on
* Then it displays the title as a working link with formatting to
* match the Twenty Ten template.
* Then we display the excerpt.
* Then we finish the loop with the endwhile statement
*/
?>

“alignleft”)); ?>

/* This is the second loop that replaces the standard loop
* It uses the standard loop function calls
*/

if (have_posts()) : while (have_posts()) : the_post();

if( $post->ID == $do_not_duplicate ) continue;
update_post_caches($posts);

/* This line gets the post ID and checks it agains our duplicate variable
* If it matches it does nothing. If it’s different we display the content
*/

?>

“alignleft”)); ?>

/* Run the loop to output the posts.
* If you want to overload this in a child theme then include a file
* called loop-index.php and that will be used instead.
*/
//get_template_part( 'loop', 'index' );
?>


[/php]

Don’t forget, you need to update the Stylesheet file as well.

Questions, comments etc always welcome

September 23 2010

12:04

How to create a wordpress magazine theme using Twenty Ten – Part 3

This is part three of a short series outlining how to tweak a wordpress template to get some magazine style functionality. Part one and Part Two are available here.

In the previous part of this tutorial I looked at how we could display some custom content on our front page by adding another loop to the file. This gave us chance to experiment with template tags to customize what we say. But I also pointed out that we had a problem.

Our ‘new’ loop pulls out the latest story in our featured story category and puts the title and excerpt at the top of the page. But the original wordpress loop is still there. It pumps out the last 10 posts published on the site and theres a good chance that our featured post is one of them. That means we get the same story twice on the homepage.

Turning off the original loop

If you remember, the orginal loop is called using a get_template_part function in the Main Index Template file.

[php]
/* Run the loop to output the posts.
* If you want to overload this in a child theme then include a file
* called loop-index.php and that will be used instead.
*/
get_template_part( 'loop', 'index' );
?>
[/php]

We can turn the loop off by commenting it out.
[php]
/* Run the loop to output the posts.
* If you want to overload this in a child theme then include a file
* called loop-index.php and that will be used instead.
*/
// get_template_part( 'loop', 'index' );
?>
[/php]

Notice how the function call has turned green like the comments. By adding a // in front of the function we turn it in to a comment which the server will ignore. If you update your file and look at the front page, you’ll see you only have the featured post.

Commenting out is a common trick when developing code. It allows you to try a few different things without deleting anything. Just don’t do to much, things can get confusing.

You may also have noticed that other comments in the file are marked between /*…*/ rather than a //. They are both valid. The /*…*/ is usually reserved for multi-line or blocks of comments rather than single lines. It also makes for a handy way to differentiate between comments (description of the code) and commenting out.

Adding another loop

Getting rid of the loop altogether is a bit of severe way to solve the repeat post option. What we need to do now is add a loop that allows us to get the posts back in a more controlled way. Add the following code after the new loop we added and before the original loop.

[php]
….

/* This is the new loop to display a featured story.
* It creates a variable and then loads all the posts that match the query.
*/

$my_query = new WP_Query('category_name=Featured Story&showposts=1');

/* Now it loops through the results and displays the content.
*/

while ($my_query->have_posts()) : $my_query->the_post();
$do_not_duplicate = $post->ID;

/* We load the Page ID in to a variable to check for duplicates later on
* Then it displays the title as a working link with formatting to
* match the Twenty Ten template.
* Then we display the excerpt.
* Then we finish the loop with the endwhile statement
*/
?>

wpmodder.com, a great site.

September 22 2010

10:00

How to create a wordpress magazine theme using Twenty Ten – Part 2

This is part two of a short series outlining how to tweak a wordpress template to get some magazine style functionality. Part one is available here.

The copy to clipboard option


Note: If you want to copy code directly from this tutorial roll you mouse over the top, right-hand corner of the code and a little window will pop up with a copy code function.

In the previous part of this tutorial we set ourselves up to experiment with the Twenty Ten Template. So at this point you should have

  • A working installation of the wordpress.org (version 3 or above)
  • The Twenty Ten theme set as the active theme
  • A number of posts sorted in to three categories – News, Sport and Featured Article
  • The permissions for the Twenty Ten theme folder set to 666

The next step is to take a look at the files we are going to edit.

The Main Index template

If you switch to Appearance > Editor and click the Main Index Template link on the right.

You should see the following in the editor window.

[php]
/**
* The main template file.
*
* This is the most generic template file in a WordPress theme
* and one of the two required files for a theme (the other being style.css).
* It is used to display a page when nothing more specific matches a query.
* E.g., it puts together the home page when no home.php file exists.
* Learn more: http://codex.wordpress.org/Template_Hierarchy
*
* @package WordPress
* @subpackage Twenty_Ten
* @since Twenty Ten 1.0
*/

get_header(); ?>

/* Run the loop to output the posts.
* If you want to overload this in a child theme then include a file
* called loop-index.php and that will be used instead.
*/
get_template_part( 'loop', 'index' );
?>


[/php]

We start with some comments. Notice that and see where the PHP starts and ends and you should be able to spot a few function calls. These essentially piece the page together bit by bit. For example…

[php]
get_header();
[/php]

…calls the first part of the webpage including all the HTML needed to set the page up and display the blog title and navigation. The only function that might not be immediately obvious is:

[php]
get_template_part( ‘loop’, ‘index’ );
[/php]

This function calls a template file called loop (loop.php) which contains all the information needed to get and display the list of posts on the front page. It also tells the function that this request has come from the index(homepage).

You can take a look at the loop.php template by opening it in the editor – pretty scary. But the loop is key to the way WordPress works.

What is the loop

Here’s what WordPress say about the loop:

The Loop is used by WordPress to display each of your posts. Using The Loop, WordPress processes each of the posts to be displayed on the current page and formats them according to how they match specified criteria within The Loop tags. Any HTML or PHP code placed in the Loop will be repeated on each post. When WordPress documentation states “This tag must be within The Loop”, such as for specific Template Tag or plugins, the tag will be repeated for each post.

Just to put that in to context, a standard front page would use the loop to :

  1. Get the last 10 posts in the wordpress database, sorted in date order
  2. For each of each post, get the headline, content and other related content and create the HTML to display it
  3. Repeats that process until all ten posts are done.

This might sound complicated but it’s actually got a lot simpler in WordPress 3.0. In earlier versions the loop would be part of the index page. Instead of the relatively simple file above, you would have all the loop content in there as well. This meant a lot more to pick through to sort out a page. You could argue that it’s just shifted the complex stuff to another file. But as we’ll see, it does make life easy for us.

The bottom line is that getting a grip on the loop is the key to tweaking a template. So let’s have a go.

Backing-up

Make sure you have the Main Index Template file loaded in to the editor

  • Copy all the content
  • Open your text editor and paste the content in to a new document.

This is your back up of the file. If anything goes wrong, you can just copy and paste the original file content back. I would advise that you do this at regular intervals. Just copy and paste in to the file and you’ll have a big file with each iteration of the file.

Adding another loop

Now that we are backed up we can edit a file. When working I tend to have two tabs open so I can switch between the backend, where I’m editing, and the front end to see the results.

So, in the backend make sure your in the editor and your looking at the Main Index Template file .

Just after:

[html]

[/html]

Add the following:

[php]
$my_query = new WP_Query('category_name=Featured Story&showposts=1');
while ($my_query->have_posts()) : $my_query->the_post();
?>


[/php]

Click the Update file button to save the changes.

The new loop content

The result should be that the title for the most recent post in the Featured Story category appears at the top of the page with the original list of posts below. It won’t work like a link, that comes next.

[php]
$my_query = new WP_Query(‘category_name=Featured Story&showposts=1′);
[/php]

The first line defines a variable or temporary store for information called $my_query (In PHP variables always start with the $ sign). The ‘value’ of that variable is the result of a new database query which uses the WP_Query function to ask for 1 post from the Featured Story category. By asking for one, you’ll get the latest one.

[php]
while ($my_query->have_posts()) : $my_query->the_post();
[/php]

The second line starts a loop. It says that while our variable has content (posts) spit out the content of the post so we can do something with it. In this case we display the title:

[php]

[/php]

Notice the mix of PHP and HTML here. The H2 tag formats the title but its the function the_title() that gets the content. The last bit…

[php]

[/php]

…ends the loop and lets wordpress get on with the rest of the page.

Because we stipulated one post in the query the loop only goes round once. You could try adding more posts to the Featured Story category and adjusting the showposts value to see how it handles more than one post.

Dealing with errors

oops, you've missed something

When you bash around with PHP you will eventually come across an message like this when you look at your page. Don’t panic! All it means is that you’ve missed a bracket or other element in the code. Juts go back and check through. The error message even gives you a clue to what and where you made the mistake.

Adding more content

We can pull in more content from the post using some simple template tags.

Add the following after the_title() code:

[php]

[/php]

So the the bit you’ve added should resemble

[php]
$my_query = new WP_Query('category_name=Featured Story&showposts=1');
while ($my_query->have_posts()) : $my_query->the_post();
?>



[/php]

The added excerpt

Update the file and have a look at the results. You should get the title with a short excerpt and a continue reading link. Check out the wordpress codex entry for the_excerpt() function to see what’s going on.

It’s that simple!

Making the title in to a link

The last part for today is to get the title to work as a link. Here’s the basic code:

[php]

The formatted title

Conclusions

By adding another loop at the start of the index page we are able to control what which posts are displayed. Using template tags means we can pick which bits of the post we display. The simple nature of the new WordPress 3.0 main index template means we don’t have huge amounts of code to wade through and if we panic we can simply delete the stuff we have added and the original template is intact.

We still have some issues of styling and we also want to add some thumbnails to our posts. But if you look at the list of posts on the front page you will notice we have another problem – the featured post we called in our new loop is repeated in the original loop content. So quite a few things to sort out.

So tomorrow we will look at how we can replace the old loop all together and how to avoid that duplication. Then, in the final part we’ll look at how we can add the thumbnail and style the content to improve the look and feel. For now, heres the complete file we are left with (with comments added by me) :

[php]
/**
* The main template file.
*
* This is the most generic template file in a WordPress theme
* and one of the two required files for a theme (the other being style.css).
* It is used to display a page when nothing more specific matches a query.
* E.g., it puts together the home page when no home.php file exists.
* Learn more: http://codex.wordpress.org/Template_Hierarchy
*
* @package WordPress
* @subpackage Twenty_Ten
* @since Twenty Ten 1.0
*/

get_header(); ?>

/* This is the new loop to display a featured story.
* It creates a variable and then loads all the posts that match the query.
*/

$my_query = new WP_Query('category_name=Featured Story&showposts=1');

/* Now it loops through the results and displays the content.
*/

while ($my_query->have_posts()) : $my_query->the_post();

/* Then it displays the title as a working link with formatting to
* match the Twenty Ten template.
* Then we display the excerpt.
* Then we finish the loop with the endwhile statement
*/
?>

Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.

Don't be the product, buy the product!

Schweinderl