First, please download the required files:
1. Duplicator Package
I’ve included two versions of the package (made while running different php versions).
First try version 8. If that doesn’t work, install version 7.
Mac Users: Make sure that your MAMP PHP version is matching the package you are installing. You can set that in the MAMP window.
When you unzip the package, rename the folder to firstname-last-name-ack.
Now install the package in your development environment.
Be sure to add an admin account for yourself. For that admin account, use the following email address: walterwhite@kevinmc.ca.
This will ensure that a gravatar will show up in the exercise.
2. Additional Downloads
Upload the additional graphics files to your site.
Loom Video Demonstration
A short video description of the site appearance and behaviour.
Install Theme & Plugins
Install the following:
- The Astra theme
- The PostX Post Grid Gutenberg Blocks plugin
- The Default Featured Image plugin
Make sure that you activate the plugins and make Astra the active theme.
Install no other plugins, even if prompted by the theme.
Duplicator is already installed in the package. Please update it, if it is not current.
Your Task
Study the screenshots to get a sense of the design of the site.
Some required information:
- All type is set in the Inter Google font, with a range of weights and sizes.
- All backgrounds are white (with the exception of two sections on the front page, which use a lightblue).
- The main accent color on the site is deeppink
Set A Feature Image Fallback (2pts)
One of the posts does not have a feature image.
Using the Default Featured Image plugin, set the fallback image to the fallback-image.webp file that came with the graphics download.
Tag Some Content (1 pt)
With any seven of the posts, add a tag of Feature Stories.
The Header (5 pts)
The header contains the following elements:
- The transparent logo, linked to home, scaled down
- A menu of the site categories, and the Feature Stories tag archive
- A search icon
- An account button: this button will show an avatar when a logged in user is logged in. When no user is logged in, an icon will be shown (as seen below).
- The menu items line up with the content in the Archives, the text in the Single Views, or the Section Content in the home page.
The search icon and the account button do not appear in the mobile version. Yes, this is dumb UI, but hey….
The Footer (5 pts)
The footer looks the same on desktop or mobile: a centered stack of content. It has:
- the logo, scaled down
- the copyright notice, with year and site generated, on own line
- the Powered By notice with the addition of the phrase and coffee.
The is also a working back to top link symbol in the right corner of the footer.
Front Page
The front page has the following characteristics:
- It is a static front page
- It has four sections, one for each Post Category
- The sections’ backgrounds alternate between light blue and transparent.
Front Page Sections (20pts)
You will need to think about how to work efficiently for this part of the exercise.
Each front page section has a Post Grid block from the PostX plugin. Study the Front Page – Large screenshot to determine which one.
Set each section’s Post Grid block to output the latest posts in that particular category (ie one type of category per section).
The only difference between the Post Grids of each section is the category of posts that are output.
Study the large screenshot to see what information is included in each panel of these section grids.
Study to large screenshot, as well, to determine the formatting and appearance of the output.
This part of the exercise will not necessarily require any custom css.
Below the Post Grids (8pts)
Below the post grid is a link to All Posts in [ Section Name ] and some lorem ipsum.
The lorem ipsum in each section (on the right in the desktop view) can be identical.
The links to the category archives (on the left) must work, they must show the correct category, and they must take the user to the correct archive when clicked.
Archives (12pts)
Study the archive screenshots.
The archives have three columns (desktop) or one column (mobile).
The archives take the full width of the page (minus a small space between the content and the edge of the browser window.
The archive titles scale with the page width.
Category archives each have a quotation at the top of the pages. Those quotations are in a text file you downloaded at the start of this exercise.
The Featured Stories archive does not have a quotation.
Archives can have up to 18 posts before pagination.
Single Views (12 points)
With the single views of posts:
- The feature image is full-width, in a 16:9 aspect ratio
- The text box comes up on top of the image at desktop size
- The meta information includes the author avatar, the date, and the category.
- There are NEXT and PREVIOUS post links.
- A Related Posts area shows three posts. Note: this does not require an additional plugin.
Consult the screenshots to see the required formats and presentation of this information and these elements.
When You Are Done
When you are done, make a Duplicator package of your site.
Download the installer.php and zip file Duplicator creates. Do not rename either of them.
Put both of those files into a folder.
Rename that folder first-name-last-name-ack.
Zip that folder. Yes, that means you will have a zip file inside a zip file.
Check that your zip file is not only a few kilobytes. For you to get a mark, you must check that you are handing in your work in the correct form.