Google

Client Login.



Justin Long // ExpressionEngine Expert

My Version of Building a Tumblr Blog Part 1

Written by: Justin Long | On: January 3, 2011

Andy Johnson of Shaping the Page recently posted an article on “How to create a Tumblr styled blog with ExpressionEngine”. I created something similar on my site but used EE2’s Publish Page Layouts to create the same effect with one Channel.

In this tutorial I use a single Channel, a single Field Group, 2 Templates, and 6 Snippets to create the desired effect of haveing 6 different types of content for my blog.

Channel

I created a channel called “Blog” with a short name of “blog”. A single channel works better with my publishing and editing workflow and allows me to keep all of the contents of my blog together.

Custom Fields

I have 19 custom fields to cover all of the content that I might need to enter.
For ease of use I follow a naming convention for all of my custom fields, the first part is the channel name the following part is the blog section and the third part is the descriptive of the content data.
The Journal Fields:

In the Matrix field I have a few additional fields that allow me to upload photos and add them to the post with varying widths, heights and floats.
Matrix Fields:

The Link Fields:

The Photo Fields:

The Quote Fields:

The Video Fields:

The File Fields

Templates

For the display of my blog I am using 2 templates. The main index template which list all the entries of the blog and then the single page template which shows a single entry. For both templates I am using conditionals to check to see if the main field for each section has data if it does I then display the custom fields for that section. Lets start with the index template.
Index Template

{exp:channel:entries channel="blog" disable="categories|category_fields|member_data|trackbacks" limit="15"}
<article class="article-list">
<
h1><a href="{title_permalink=blog/single}">{title}</a></h1>
<
class="post_details">Written by: <span>{author}</span> | On: <span>{entry_date format="%F %j, %Y"}</span> | <a href="{title_permalink=blog/single}" alt="{title} Permalink">Permalink</a></p>
{if blog_journal_summary != ""}
    
<p>{blog_journal_summary}</p>
    
{/if}
    {if blog_link 
!= ""}
        
<p>{blog_link_description}</p>
    
{/if}
    {if blog_photo_upload 
!= ""}
        
<a href="{title_permalink=blog/single}" alt="{title} Permalink"><img src="{blog_photo_upload}" /></a>
    
{/if}
{if blog_quote_url 
!= ""}
    
<p>{blog_quote}</p>
{/if}
{if blog_video 
!= ""}
    {exp
:channel_videos:videos entry_id="{entry_id}"}
        
<a href="{title_permalink=blog/single}"><img src="{video:img_url_hd}" width="480px" height="360px" alt="{video:title}" class="video-image"></a>
        
    
{/exp:channel_videos:videos}
{
/if}
{if blog_file_name 
!= ""}
    
<a href="{title_permalink=blog/single}" alt="{title} Permalink"><img src="{blog_file_photo}" /></a>
    
{blog_file_name}
{
/if}
<a href="{title_permalink=blog/single}" class="read-more-link" alt="{title} Permalink">Read More >></a>
</
article>
<
hr class="article_separator" />
<
div class="pagination-area">
{paginate}{if previous_page}<a href="{auto_path}" class="prev-link">Previous Page</a>{/if}{if next_page}<a href="{auto_path}" class="next-link">Next Page</a>{/if}{/paginate} 
</div>   
{if no_results}<h2>Nothing Yet</h2><p>I am working on adding new content to my site so check back in a couple of days to see what has been on my mind.</p>{/if}
{
/exp:channel:entries} 

The if statements check to see if the field is empty. If it is the template engine goes to the next if statement and repeats the process until it finds a field that has content. Once it has found a field that has content it will display the content within the if statement.
The Single Template

{exp:channel:entries channel="blog" disable="categories|category_fields|member_data|pagination|trackbacks" limit="1"}
<article>
<
h1>{title}</h1>
<
class="post_details">Written by: <span>{author}</span> | On: <span>{entry_date format="%F %j, %Y"}</span></p>
{if blog_journal_summary != ""}
    {snippet_journal_entry}          
{
/if}
{if blog_link 
!= ""}
    {snippet_link_entry}
{
/if}

{if blog_photo_upload 
!= ""}
    {snippet_photo_entry}
{
/if}
{if blog_quote_url 
!= ""}
    {snippet_quote_entry}
{
/if}
{if blog_video 
!= ""}
    {snippet_video_entry}
{
/if}
{if blog_file_name 
!= ""}
    {snippet_file_entry}
{
/if}
</article>
{if no_results}{redirect="404"}{/if}
{
/exp:channel:entries} 

As you can see from the template code above that within each of my conditionals I have a single tag in it, which contains a snippet that I have created. I went with this approach so that I could keep my template code a little bit more manageable.

Snippets

The Journal Snippet:

{blog_journal_photos}
{exp
:nsm_transplant:content id="photo_{row_count}"}
<img src="{blog_journal_photo_upload}"  style="float: {blog_journal_photo_float}; max-width:{blog_journal_photo_width}px; margin:10px; padding: 10px; margin-bottom: 0px;" />
{/exp:nsm_transplant:content}
{
/blog_journal_photos}
{exp
:nsm_transplant:body}
<div class="journal_entry">
{blog_journal_body}
</div>    
{/exp:nsm_transplant:body} 

The Link Snippet:

<div class="journal_entry">
{blog_link_description}
Visit Site
: <a href="{blog_link}" name="{title}">{exp:strip_html}{blog_link_display}{/exp:strip_html}</a>
</
div

The Photo Snippet:

<div class="photo-entry">
<
img src="{blog_photo_upload}" alt="{title} Photo" />
{blog_photo_description}
</div

The Quote Snippet:

<div class="quote-entry">
<
blockquote>{blog_quote}</blockquote>
<
class="quote-referance">By: <em>{exp:strip_html}{blog_quote_author}{/exp:strip_html}</em> | {if blog_quote_source != ""}Source{if blog_quote_url != ""}<a href="{blog_quote_url}">{/if}{exp:strip_html}{blog_quote_source}{/exp:strip_html}{if blog_quote_url != ""}</a>{/if}{/if}</p>
{blog_quote_description}
</div

The Video Snippet:

{blog_video_description}
{exp
:channel_videos:videos entry_id="{entry_id}" embed_width="580px"}
    {video
:embed_code_hd}
    
<span class="video-links"><a href="{video:web_url}">View on <span>{video:service}</span></a> | Runtime{video:duration} Video by{video:author} Views{video:views}</span>
{/exp:channel_videos:videos} 

The File Snippet:

<div class="file-entry">
    <
img src="{blog_file_photo}" />
    <
class="file-details">
        <
span>Filename:</span{exp:strip_html}{blog_file_name}{/exp:strip_html}<br />
        <
span>Download:</span> <a href="{blog_file_upload}">Download Files</a>
    </
p>
    <
p>{blog_file_description}</p>
</
div

We have now created a functioning Tumblr styled blog that allows us to post 6 different types of content with vastly different types of content from a single location. In the next tutorial we will polish things up on the Publish and Edit pages by utilizing a new feature in EE2.  **EDIT** You can now read Part 2 of this series. **EDIT**

 

Next entry >>> <<< Previous entry

Comments

<<< Go back to entry list