Finishing Our Site5:57 with Alena Holligan
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>
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 up