09 - Implementing the Blog - Part 1

We’ll take another bite off of our responsive Portfolio project in this chapter by beginning the implementation of the blog.  The blog houses a good share of the complexity of the site due to its Tumblr like way of presenting different content types.

 
Download the EE Code for 09 - Implementing the Blog - Part 1

Work the Plan
Back in Chapter 4 of this tutorial we laid out a Content Model for the entire site.  Now is when we work the plan, creating all the items we conjured up in it.

Create Three Blog-Related File Upload Directories
These need to be created first so that they are available to choose when we create the File fields that will upload images to them. 

Within your local EE install (or server, wherever you are building your site), identify or create the target folders where the uploaded assets will go.
I’m working within root/assets/uploads and creating a folder for every upload directory:

  • root/assets/img/uploads/blog_image (for when the purpose of the blog post is to feature an image)
  • root/assets/img/uploads/blog_post (it looks like the design calls for every generic blog post to have a header image)
  • root/assets/blog_audio

Make sure the permissions are such that EE will be able to write images here (777 equivalent)

Create Three Upload Destinations:
Blog Images

  • Descriptive name = Blog Images
  • Server Path to Upload Directory: The initial part of this path will depend on your install location which I assume you can figure out or use the defaults that EE has provided.  The latter part should be /assets/img/uploads/blog_image
  • For URL of Upload Directory: Same as above, the initial portion will be dependent on your install, the latter part should be /assets/img/uploads/blog_image/ Skip all the way down to Image Manipulations

Image Manipulations:

  • Short Name: main
  • Resize Type: Constrain
  • Width: leave blank
  • Height: 300px
  • Short Name: popup
  • Resize Type: Constrain
  • Width: 1200px
  • Height: leave blank

Blog Audio

  • Descriptive Name: Blog Audio
  • Server Path to Upload Directory: (your root path)/assets/blog_audio/
  • URL to Upload Directory: (your root path)/assets/blog_audio/
  • Allowed File Types: All File Types
  • Leave everything else as-is.

Blog Posts

  • Descriptive Name: Blog Posts
  • Server Path to Upload Directory (your root path)/assets/img/uploads/blog_post
  • URL to Upload Directory: (your root path)/assets/img/uploads/blog_post
  • Allowed File Types: Images Only

Image Manipulations:

  • Short Name: main
  • Resize Type: Constrain
  • Width: 640px
  • Height: 260px
  • Short Name: footer
  • Resize Type: Crop
  • Width: 54px
  • Height: 54px

Create Field Groups & Fields:
Before starting down this path you might want to investigate the Field Editor add-on as it might speed your process here.  Here’s what we need:

Field Group Name: Blog - Audio

  • Type: File
  • Label: Audio
  • Short Name: blog_audio_file
  • Allowed Directory: Blog Audio

Field Group Name: Blog - Image

  • Type: File
  • Label: Blog Image
  • Short Name: blog_image
  • Allowed Directory: Blog Image
  • Type: Textarea (Rich Text)
  • Label: Image Description
  • Short Name: blog_image_description

Field Group Name: Blog - Link

  • Type: Text Input
  • Label: Link Target
  • Short Name: blog_link_target
  • Max Length: 250
  • Type: Text Input
  • Label: Link Text
  • Short Name: blog_link_text
  • Max Length: 250

Field Group Name: Blog - Post

  • Type: Textarea (Rich Text)
  • Label: Summary
  • Short Name: blog_post_summary
  • Type: Textarea (Rich Text)
  • Label: Full Text
  • Short Name: blog_full_text
  • Type: File
  • Label: Blog Image
  • Short Name: blog_post_image
  • File Type: Image
  • Allowed Directory: Blog Post

Field Group Name: Blog - Quote

  • Type: Textarea
  • Label: Quote Text
  • Short Name: blog_quote_text
  • Type: Text Input
  • Label: Quote Author
  • Short Name: blog_quote_author

Field Group Name - Blog Video
Here’s where we will deviate from the norm a bit.  Keep in mind that fieldtypes are add-ons in ExpressioEngine. so some content types really benefit from having custom field types in them.  Video is one of those types.  Channel Videos from DevDemon makes the Control Panel experience of finding and selecting videos quite nice, and the add-on is free so I’ve used it here.  Just note that DevDemon provides support for it, so I don’t.

  • Type: Channel Videos
  • Label: Video
  • Short Name: {blog_video}
  • Video Services: YouTube
  • Type: Textarea (Rich Text)
  • Label: Video Description
  • Short Name: {blog_video_description}

Create Category Group - blog
Don’t worry about creating the actual categories yet - we’ll get back to this.  Just create an empty group.

Create Channels
Create one Channel per Field Group and name it the same. While creating the Channel remember to:

  • Assign the appropriate field group
  • Assign the blog category group
  • Assign Statuses status group

Enter Content
Enter one type of each content so we’ll know if the code works.

Update Snippets
The updated Snippets are in the zip file you can download above so I won’t post the entire code here, but will hit the highlights for each:

snp_blog_audio
Two main issues here.  One was that our chunked out embeds/header wasn’t including the necessary javascript and CSS links that the audio player needed, so I updated it to include those (wrapped in a conditional so they only load on the blog).

The other issue was that I wanted to use an MP3 file, and the player wasn’t setup for it so I had to Google for the docs for the player and update the code accordingly.  Once I had made those changes and got the paths all correct it hooked up and played nicely.

A smaller issue was that of formatting. The Folder template had specified all-caps for the 3-letter month indicators (JAN vs. Jan, etc).  EE doesn’t have a all-caps option in it’s date formatting variables, so I just tweaked the stylesheet to apply a

text-transform:uppercase

to the proper div handling the Month name markup.

snp_blog_image
This snippet uses the Image Manipulations we setup:

<a href="{blog_image:popup}" data-rel="prettyPhoto">
<
img src="{blog_image:main}" alt="{title}" /> 

I note that the lightbox tool that the Folder template uses creates a mid-size image that first appears upon clicking the ‘main’, and then our popup size is linked to from there.

Each of these snippets will link to single-entry template that is unique to its content type (and I think we’ll actually be able to re-use these snippets on those pages).

Each snippet uses the following variables from the channel:entries loop that pulls them in:

snp_blog_link
Pretty straightforward here.  Note that there are url-specific fieldtypes available on Devot-ee if you want better validation for the URL as it gets entered.

snp_blog_post
Also very straightforward, using the Image Manipulation we setup.

snp_blog_quote

Again, just using the custom fields we created and applying the Folder template markup to them.

snp_blog_video
Since we are using an add-on here there is some non-native code in the template that is provided by the add-on:

{exp:channel_videos:videos entry_id="{entry_id}" limit="1"}
      {video
:embed_code}
{
/exp:channel_videos:videos} 

This came pretty much straight from the Channel Videos documentation.  Channel Videos allows entry authors to choose >1 video, so I added the limit here to ensure only one appears on the front end of the site (I also added help text to this affect).

Updated blog/index template:
I’ll also include this one in the Companion Files - but some specifics:

{exp:channel:entries channel="blog_audio|blog_video|blog_link|blog_quote|blog_post|blog_image" limit="10"

This is why I don’t mind splitting up content into multiple channels - you can group them all back together in one loop if need be.  What this loop will do is look at the combined entries across all the channels I’ve specified and grab the latest 10.

In the rest of the template I just had to add conditionals that looked at the source channel for a specific entry and pulled in the proper Snippet to return the content:

{!-- Choose appropriate snippet based on source channel --}
{if channel_short_name 
== "blog_audio"}
    {snp_blog_audio}
{
/if}

{if channel_short_name 
== "blog_video"}
        {snp_blog_video}
{
/if} 

After you update all the templates and Snippets covered in this chapter your Blog index template should load and show all your entries marked up correctly based on the Channel you published them in. 

There’s still plenty to do here - we need our single entry templates, working pagination, working categories, etc. but for now this is a big enough bite to take off.

 

Category Navigation

<< Previous Entry   

Next Entry >>

 

Previous Comments

Picture of Kyle Skrinak

by Kyle Skrinak

Date: Monday, February 11th, 2013
Comment: #1

I was following along until I read Create Field Groups & Fields: I see there’s “Channel Field Groups” wherein I define “Channel Fields” (Within the Admin menu, btw, for fellow initiates) Perhaps your instructions make sense if I were to use the Field Editor add on, but I’m still evaluating EE and don’t want to spend money just yet. Your description seems to lump these together, but I’m sure I’m missing something simple?

Picture of Kyle Skrinak

by Kyle Skrinak

Date: Monday, February 11th, 2013
Comment: #2

Nevermind, I see now. You create the Channel Field Group and then add the field as per your spec.

Add Your Comment

Commenting is not available in this channel entry.

Unless otherwise stated all content is © Michael Boyink of Train-ee.com & Boyink Interactive. Please don't steal - I've got kids to feed...

dy>