Week 5 Project: Bootstrap Carousel

This is Week 5 of the “52 Weekly Websites” challenge (see http://dev.kobayashicoding.net), which was supposed to be published at noon on February 15, 2017. The update to the project website was uploaded before the deadline, but this blog post was neglected. So, here it is, a little late…

This week’s project is pretty recognizable and straightforward: a sliding carousel of photos for a website. The Bootstrap framework provides the capability for this, and it just needed to be customized a bit. Ho hum.

The impetus for this particular project was a request from a client to add a carousel to a page on their WordPress site. So after getting the Bootstrap carousel function to work quickly and easily on the project site, I thought, “how difficult could this be to integrate into WordPress?” Well, as these things often go, it took longer to get it into production than it should have.

I had already used some Bootstrap functions on this particular site, so the WordPress “header.php” in the child theme (more on that next week) already had the code to include the Bootstrap CSS and JavaScript files, as well as the required JQuery files. So – working on the development site, not the production site – I copied the appropriate WordPress page to a new temporary page, added the HTML to it, saved it as a draft, and then clicked the “Preview” button. Success! Worked like a charm. I needed to tweak the image sizes and padding a bit, and also apply the style to round the corners of the photos, but the carousel functionality was working. After the aforementioned tweaks, I saved the draft again and checked the preview version again. Perfect! Time to publish the temporary page just to be sure everything worked correctly and looked good.

Oops… in the “published” version the carousel did not work – the first photo was displayed properly, but it never changed. Hmmm. I changed the status of the page back to “draft” and previewed it again. Again, it worked flawlessly. Clicked the “Publish” button again, checked the result – carousel not working. After much head-scratching and investigation with both Firefox’s and Chrome’s built-in developer’s tools, I finally figured out what the problem was.

The problem turned out to be that when I’d originally added the code to include the files required for Bootstrap, I had used relative paths. Yes, I know, stupid mistake (but aren’t they all once you find them?). Even though I had used Bootstrap functions for the front page of the site, it worked there because the “root directory” was effectively the “working directory” for the front page. However, WordPress adds the short name of the page to the end of the URL when displaying a published page; it does not do this when previewing a draft page. Changing the header.php file in the child theme to use full paths for the Bootstrap-related files solved the problem.

I won’t make that mistake again.

Week 4 Project: The Contact Form!

Well, it was supposed to be for week 4 of the “52 Weekly Websites” challenge (see http://dev.kobayashicoding.net), to be published at noon on December 7, 2016 – an infamous day in its own right, but not the day that this blog post showed up. As I mentioned in the most recent post in this series, the “Contact Form” proved to be a bit more complex that I’d anticipated. This was mostly because I wanted to add a CAPTCHA to it in an attempt to defeat Spambots.

Three resources were invaluable in creating and styling the final form. The following are links to the articles at the named sites:

The CAPTCHA functionality was provided by Securimage, an excellent open-source script with great documentation.

The contact form was actually working when I published the most recent post on November 23, 2016, but as this blog is written by me, well, this post is late. And, because it’s been so long, I don’t recall exactly what the problem with the implementation was. Sorry.

So, I’m going to try to get back to writing here more often, and also get back to the 52 Weekly Websites challenge. I have a couple of things I need to figure out (or find an example of) how to do, so I’ll use those for my next two challenges. One is a photo carousel (I’ve already found an example of how to do this, so that’ll be next week), and the other is updating a (possibly) scrolling <div> on a page with data from the server without refreshing the page. Come back in a couple of weeks to find out how that turned out.

The Second… er, well, Second, Third, and Fourth Weekly Website Update(s)

This post was supposed to be published on Wednesday, November 9, 2016, and comprise the results of the second of my 52 Weekly Websites challenge. However, what I wanted to accomplish was a bit more complex than I thought it would be, and I’ve had some other pressing responsibilities to tend to, and I ran out of time.

So, this is being published on Wednesday, November 23, 2016, and provides a mostly functioning main menu for the overall site. The “Home” and “About” buttons both work now. Each replaces the text in the “Jumbotron” area on the main page by using JavaScript to manipulate the Document Object Model (DOM) in the user’s web browser. You can see the results at http://dev.kobayashicoding.net.

In my defense, these buttons were working before the November 9, 2016, deadline. It was the “Contact Form” page that was the holdup – more about that in next week’s post, so be sure to come back for the whole story.

Update on 2018-07-23: note that if you use the “Projects” drop-down menu and choose “Week 1” you get the home page. If you choose “Week 2” it looks like you just get the home page again, but this time the “Home” menu item is selected; the same goes for “Week 3” and “Week 4” – they really are doing something, it just might not be readily apparent.