Alumni: Homepage New Design

Status: 

Closed

Priority: 

N/A

Test URL(s):

Alumni Homepage: Production Site – Staging site

References:

Request(s):

Replace current Alumni News with two sections:

  1. TCM Spotlights:
    1. Display the latest 6 posts (3 columns x 2 rows) from “TCM Spotlights” Category.
    2. Display the first row with the post’s Feature image. Not to display Featured image on the 2nd row.
    3. Create a shortcode for this section.
    4. More button link: TCM Spotlights page https://alumni-staging.fivebranches.edu/tcm-spotlights/
    5. Responsive display: Desktop 3 cols, Tablet 2 cols, Snartphone single col
  2. Alumni Tales:
    1. Display the latest 6 posts (3 columns x 2 rows) from “Story Sharing” form entries.
    2. Display the first row with the post’s Feature image. Display without Featured image on the 2nd row.
    3. Create a shortcode for this section.
    4. More button link: Story Sharing page
      https://alumni-staging.fivebranches.edu/story-sharing/
    5. Display the button with “Share your story” label instead of “Contribute yours”.
    6. Responsive display: Desktop 3 cols, Tablet 2 cols, Snartphone single col
  3. Keep current “Welcome” section and 3 buttons section.
  4. Main Content : Sidebar width ratio = 2:1
  5. Create “Homepage Sidebar” in Widget are for editors to maintain.
  6. Push Sidebar below Main Content when Tablet is on its Portrait screen mode.
Replace existing Alumni News with TCM Spotlights & Alumni Tales
Keep these two sections

Complete page layout

Create Homepage Sidebar in Widget area

To Fix: Align the dot lines

To Fix: Display Title "as is" without truncating or limiting its length

To Fix: Push Sidebar down below when Tablet is on Portrait screen mode

To Fix: load small size image to display for Alumni Tales

The loaded image for TCM Spotlights is acceptaable.

But the loaded image for Alumni Tales is not acceptable. It loads the full size image and resize to a smaller one. That’s a waste to web server resource.

Image for Alumni Tales now loaded with 400px size

5 thoughts on “Alumni: Homepage New Design”

  3. 1) Push the Sidebar below the Main Content when the Tablet is in its Portrait screen mode. (Done)
    2) Display Title “as is” without truncating or limiting its length (Done)
    3) Post and Story card box same height and set border in Home Page (Done)

    If you have any queries or issues let me know

Leave a Comment

Active Tasks – Closed Tasks

Recent Comments

Recent 20 Comments

Preview page