Copying the Clean Blog Less Files

Now when you do a gulp copyfiles then the latest clean blog files will be copied.

We’ll use these files in a little bit as part of the blog’s CSS.

Copying Some Header Images

In order to have a few header images to play with we’ll copy the four header images that the Clean Blog template provides into our upload area. Depending on how you configured your Upload Manager these images will end up either on your local file system (in the public/uploads directory) or on the Amazon S3 servers.

Point your browser to http://l5beauty.app/admin and then click on the Uploads link in the menu bar. Upload the following files:

about-bg.jpg

contact-bg.jpg

home-bg.jpg

post-bg.jpg

The files are located in the img folder of the Clean Blog sources you just coped using Bower (which should be vendor/bower_dl/clean-blog).

Creating the BlogIndexData Job

The last time we touched the BlogController was back in Chapter 7 when we created the 10 Minute Blog. At that time we didn’t have the tagging feature with our blog.

If a tag is specified in the query string, we’ll need to gather the list of posts, filtering them so only posts with that tag displays. Rather than adding the logic to do this in the controller, let’s create a one-off job to gather the index data.

A simple method. If a value for $tag was passed during construction we call one method to gather the data, otherwise a different method is called.

normalIndexData()

This method returns the index data the normal way. That is, without a filter on the tag. The code is almmost identical to what we did with the 10 minute blog, but now any tags the posts have are Eager Loaded (the with() method does this.). Also, we do filter the query to not include any draft posts.

tagIndexData()

Here we first load the Tag and then filter posts to match the tag. This is accomplished with the whereHas() method. Don’t forget that line continuation character (the backslash) where ‘meta_description’ is returned should not be typed, instead continue typing the next line without hitting enter!

Notice all the extra data we’re returning? Before, in the 10 minute blog, we only returned the $posts to the view. But now we return all kinds of information. Shortly, you’ll see how this is used in the index view.

Eager Loading

Eager Loading helps with the n+1 query problem.
It loads queries having this issue in two queries instead of many. This
can drastically increase the application’s performance. See
the Laravel Docs
for a complete example.

Here we pull any $tag value from the request and use that BlogIndexData command just created to figure the data. Because we want the ability to have different index templates for different tags, we ask the Tag class for the template if a $tag is used, otherwise we go with the default.

showPost()

Any associated tags are Eager Loaded with the post. If there’s any $tag passed in the query string, we convert $tag over to the actual Tag record before passing it to the view.

Building the Assets

There’s a bit more of coding to do, and the views to create, but first let’s get all the blog’s assets in place.

Creating blog.js

Create blog.js in the resources/assets/js directory with the following content.

This file pulls in Bootstrap, Font Awesome and Clean Blog. Then the fonts are imported and a touch of styling is added to a few elements. (Again, careful of those line continuation characters on the 4th and 5th @import lines.)

Updating gulpfile.js

Update gulpfile.js to match what’s below. The only changes at this point are the addition of the scripts for blog.js and blog.less.

Seeding the Database

The Blog Is Completely Usable

Browse around. Look at posts, navigate back and forth. You’ll see screens
similar to the one below.

Figure 13.1 - Example Home Page

Recap

This chapter focused on cleaning up the blog pages. To do this we used the Clean Blog template by StartBootstrap as a model. Clean Blog was pulled in with Bower, then we made use of much of the assets as we built the index and post pages.

The blogging application is complete and usable. It’s time to start adding a few featurs to our blog.

In the next chapter we’ll add a “Contact Us” form as we delve into Laravel 5.1 Queues.