Story-sharing – FBU Tracking & Knowledge Base https://tnh.ilotus.org Tue, 12 Dec 2023 06:08:20 +0000 en-US hourly 1 https://wordpress.org/?v=6.9.4 https://tnh.ilotus.org/wp-content/uploads/2022/06/cropped-fbu_favicon-32x32.png Story-sharing – FBU Tracking & Knowledge Base https://tnh.ilotus.org 32 32 Alumni: Story Sharing Feature https://tnh.ilotus.org/forms/alumni-story-sharing-feature/ https://tnh.ilotus.org/forms/alumni-story-sharing-feature/#comments Tue, 11 Jul 2023 21:58:26 +0000 https://tracking.fivebranches.edu/?p=9297 Read more]]>

Current Status: to decide whether to include sidebar or not for this feature…

Requirements:

  1. The Story index/single pages are open to the public.
  2. The Story Form can be accessed only by users with “Contributor” or above User Roles.
  3. The initially submitted form entries are considered “drafts”.
  4. Drafts should be moderated by the Editor before publishing for the public to view.

Updated on 11/17/2023

A. Create a Gravity Form with the following fields

  1. Writer Name
  2. Email
  3. Story Subject
  4. Story body
  5. Contact phone number — The editing team will collect numbers for re-editing purposes but not release them to the public

Updated on 10/24/2023

B. Create frontend presentation pages

Story List – Individual Story

Reference to the typical WordPress Blog listing – Alumni News.

Set the Page layout similar to Alumni News with the same Sidebar.

The Sidebar content is from Right Sidebar 1 that includes “Recent Listings” and “Alumni News” content blocks
Appearance – Widgets – Right Sidebar 1

See screenshot below ⤵

Updated on 11/14/2023

C. Generate and display resized image file

For image uploaded through Gravity Form, generate at least 400px and height=512px size image files.

Load and display 400px image file for Index page (as in the Homepage and Story Sharing page)

Load and display height=512px image file for Single page.

Verify if the image size is correct for corresponding page

  1. Verify it on New form entry
  2. Verify it on updated image file on an existing form entry

Story Index Page

Story Single Page

Membership Levels

Sidebar Content

Sidebar width specs: 1/3 total width

The specs as a reference:

<div class=”col-lg-9 col-md-9 col-sm-12 col-xs-12″>
<div class=”col-lg-3 col-md-3 col-sm-12 col-xs-12″>

Sidebar Layout Design

Sidebar Link Color

Remove the Email Address field

Display uploaded image on top of the Story

Remove Purple background color

Add "Share Your Story" button and Remove Writer Name

Load 400px image to display on index page

Image for Alumni Tales now loaded with 400px size

Load 1024px image to display on single page

Image for Alumni Tales now loaded with 1024px size

Changs on Index page display

  1. Remove Date block
  2. Limit the length of Story excerpt to around 200 characters

Change on Single page image

Instead of resizing the longest side of the uploaded image at 1024px, set the width at 1024px, and maintain the image’s aspect ratio.

Examples:

Landscape mode image:
4096 / 2304 = Aspect Ratio 16/9 => 1024 / 576 = 16 /9 = 1.778

Portrait mode image:
2304 / 4096 = Aspect Ratio 9/16 => 1024 / 1820 = 9/16 = 0.563

The Width is always set at 1024
and still maintain the Aspect Ratio ( width / height ratio)

Append Ellipsis (...) to the truncated Story Excerpt

Specs change on Single page image

Resizing the height of the uploaded image at 512px, and maintain the image’s aspect ratio.

Examples:

Landscape mode image:
4096 / 2304 = Aspect Ratio 16/9 => 910 / 512 = 16 /9 = 1.778

Portrait mode image:
2304 / 4096 = Aspect Ratio 9/16 => 288 / 512 = 9/16 = 0.563

The height is always set at 512
and still maintain the Aspect Ratio ( width / height ratio)

Default image for Stories without uploaded image

Use the attached image to display on the Homepage and Index page of Story Sharing.

Not to display image on the Single page if no image is uploaded when the form is submitted.

]]> https://tnh.ilotus.org/forms/alumni-story-sharing-feature/feed/ 13