Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
To finish our site, we need to add some navigation as well a featured image for our pages. We'll loop through a new instance of a class and check and object for a specific class.
HTML for Featured Image
<!-- Begin page Image -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="first-slide" src="assets/img/<?php //featureImage ?>" alt="First slide">
</div>
</div>
</div>
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
We want to add navigation
to our header file.
0:00
So let's start in views, header.php.
0:02
Where it says add page navigation,
we're going to loop through our pages.
0:05
Foreach (new Pages($repo) as $page).
0:14
For each page,
we're going to add a list item.
0:26
This list item will link to the page slug.
0:30
Echo '<li class="nave-item">.
0:33
For the text of the navigation link,
0:49
I'm going to perform a couple
functions on the page slug.
0:51
We are going to do a string replace.
0:55
And I'm going to replace
the dash with a space.
1:00
On the page slug.
1:06
Then I also want to uppercase the words,
or ucwords.
1:09
This will uppercase the first
letter of each word.
1:17
Now let's add the link.
1:21
A class="nav-link"
1:29
href="index.php?slug=.
1:35
We can set this to $page->slug.
1:44
And close our a tag.
1:52
Then let's add our closing a tag.
1:54
Finally, I want to set the active item, so
1:58
Iām going to use a conditional to
check if the slug variable is set.
2:01
So up with this class,
2:06
if (isset($slug)
2:17
&& $slug == $page->slug).
2:22
Then I'm going to echo ' active'; we also
want to add a link to the blog articles.
2:30
You could add it to the same menu but
I'm going to add it to a secondary menu,
2:40
where I have the comment
to add Latest News.
2:44
So I'm going to add a list
item with a class="nav-item".
2:51
A class="nav-link".
3:01
Href="blog.php".
3:11
Latest Blog Post.
3:17
I also wanna check if our blog is active.
3:20
If
3:34
($_SERVER['SCRIPT_NAME']
3:35
== '/blog.php').
3:46
Then I'm going to echo ' active'.
3:54
Let's test out our navigation.
3:59
Our pages work, our posts work, and
we're ready to add our featured image.
4:08
We're going to add a new feature but
only for our pages.
4:15
So under src/classes/Pages, we're going to
add one more method to our Pages class.
4:19
We'll name this public
function featuredImage.
4:25
This method will return
the current item image.
4:36
Return $this->current()->image.
4:39
Back in header.php,
down where you see Add featured image,
4:44
we're going to add a conditional.
4:50
If ($content instanceof Pages)
4:53
We used instanceof in reference to our
trackable and sharable interfaces earlier.
5:09
Instanceof will let us check for any class
or interface in an object's hierarchy.
5:15
I've added the HTML for the featured image
in the notes associated with this video.
5:21
We can paste this here and
5:26
then we can use the featured image
method from our Pages class.
5:28
Echo $content->featuredImage.
5:31
Let's preview our site one last time.
5:41
Our site is now complete.
5:44
We have featured images on each page.
5:46
And we have a blog listing that
links to individual blog posts.
5:48
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up