Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Designing Interfaces in PHP!
You have completed Designing Interfaces in PHP!
Preview
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