Alumni: Design CEU Opportunities Presentation Pages

Status: 

Closed

Priority: 

N/A

Test URL(s):

CEU Opportunities:

Live site: Index page – Single page (any entry from the table list – index page)

Staging site: Index page – Single page (any entry from the table list – index page)

References:

Alumni: CEU Opportunities Feature

CEU Opportunities Form (Form ID = 20)

Request(s):

Index page

Display the content to this page:
CEU Opportunities: Index page
 
Data fields to display on each row in the table
 

Desktop

Col 1: Thumbnail (width: 150 px)
Col 2: CEU Subject
Col 3: Units / Hours
Col 4: Starting Date
Col 5: Location (display either “In-person” or “Online”)
 

Tablet

Col 1: CEU Subject
Col 2: Units / Hours
Col 3: Starting Date
Col 4: Location (display either “In-person” or “Online”)
 

Mobile

Col 1: CEU Subject
Col 2: Units / Hours
 

Table list specs

1. Hide (or expire) the opportunity from the list at the end of  its Starting Date – pass midnight Pacific time.
 
For example, if the Starting Date is 8/25/2023, remove that opportunity from the list after 8/26/2023 12:00 am Pacific time (the time zone set in the WordPress) 
 
2. Initial sorting of the entries is based on Starting Date in Ascending order.
 
3. All 4 columns (excluding thumbnail column) should toggle displaying entries in between Ascending or Descending order if clicked on the column  header or a small icon next to it.
 

Pagination

Add Pagination section at the bottom (above Footer).
Appear only if the number of total entries is higher than the number specified in the shortcode “per_page” parameter (default to 50).
 
Provide a “Rows Per Page” setting from a dropdown list with N (default to 50), 100, 200 (3 steps) options.

N is the “Rows Per Page” (RPP) number assigned by the Editor in the “per_page” parameter of shortcode as shown below. 
[custmix_ceu_list link_2_post_id=”2723″ per_page=”N”]
 

If N is between 1 – 50 (included), RPP = N, and
the RPP dropdown options: [N, 100, 200]

If N > 50 and N <=100, RPP = 100
the RPP dropdown options: [50, 100, 200]

If N > 100, RPP = 200
the RPP dropdown options: [50, 100, 200]

If N entered by the Editor is not an Integer, RPP = 50
the RPP dropdown options: [50, 100, 200]

Check the reference screenshot below. Or check its live demo here.

The screenshot is just to show the feature / function as a reference. The real layout doesn’t have to be exactly like that.

Reference to the layout of:
Career Opportunities

Single page

Display the content to this page:
CEU Opportunities:  Single page
 
Display picture on the top (max-height: 300px)
 
Display all form fields as the layout in the form
 
Keep the page layout plain and unambiguous.

Reference to the layout of:
Acupuncturist

Sidebar

No sidebar. Display content in full width.

Thumbnail image size

Not to load original image and resize it on the page, but load directly the thumbnail size (set up in the WordPress – 150px) image to reduce the page load.

Make sure it keeps the original aspect ratio, not to distort the image.

Set fixed width for all columns except CEU Subject column

Set fixed width for all columns except CEU Subject column.

Assign the rest of the section width for CEU Subject column.

Fixed: Hide Pagination section when entries are less than Rows per page

Fixed: Reduce the width of Rows per page

Make the width good enough to fix 3 digits.

Fixed: Change Date format

Show the Date in the format of  9/5/2023

Fixed: Load thumbnail size image, not original image to display in the table

The thumbnail width is the size set in the WordPress Media section: 150px

CEU index page layout

There are TWO main SECTIONS (area across the whole width of the page):

  1. Table SECTION: the main page content. This will always present.
  2. Paging SECTION: this SECTION shows up only when the total ROWs of the retrieved records are more than the set “Rows per page” (default to 50 unless otherwise set in the shortcode differently.
  3. There two PARTs in Paging SECTION: 
    2L: left PART – Rows per page
    2R: right PART – Pagination Navigation
Total records (4) are more than "Rows per page "(1), so the Paging SECTION should show up.
Total records (4) are less than "Rows per page "(50), so the Paging SECTION should NOT show up.

Our editor will set Default “Rows per page” from the shortcode

per_page=”50″

[custmix_ceu_list link_2_post_id=”2723″ per_page=”50″ start=”1″]
 
the dropdown list:
[1, 50, 100, 200]
 
“start” can be set for 1, 10, 0r 20 from the shortcode.
Retrieve only form entries with star to display on the CEU Courses list

Fixed on Single Page:

1. Different Location, print difffent info

1.1 – Display “Course Link” if  “Location” is “Online”
1.2 – Display “Address” if “Location” is “In-Person”

Fixed on Single Page:

2. ” More Info” should display as the way it’s displayed in Gravity Form – with proper Paragraph format

This is what's been entered
All paragraphes are mixed?

18 thoughts on “Alumni: Design CEU Opportunities Presentation Pages”

  1. The following original requirements are now updated to the ones shown above

    Data fields to display on each row in the table
    CEU Subject
    CEU Units
    Hours (desktop only)
    Starting Date (desktop only)
    Location
    picture (desktop only: show thumbnail)

  2. Hi,
    Thanks for the detailed information.

    I have completed the task as per the instruction. I have only one query in this, I can see the ‘CEU Opportunities’ screenshot but did not get what exactly it means.

    Can you please elaborate it a little more?

    Kind Regards,

  3. Add Opportunity expiration feature to the INDEX page.

    Hide (or expire) the opportunity from the list at the end of its Starting Date – pass midnight Pacific time.

    Check the detail specs stated above.

  9. Add Pagination section at the bottom of the page.
    Appear only if the number of total entries is higher than 50.

    Also provide a dropdown list for Editor to set Rows per Page to display.

  10. This feature has not been implemented
    >>Add Pagination section at the bottom (above Footer).
    Appear only if the number of total entries is higher than 50.

    If the total entries are less than the Rows per page,
    hide the pagination section

  11. Check more details above:
    1. Load thumbnail size image directly, not original size and resize it.
    2. Set fixed width for 4 columns and assign the rest width for CEU Subject column

  14. Simplified requirements

    Provide a “Rows per Page” setting from a dropdown list with 1, 50 (default), 100, 200 (4 steps) options.

    The Editor can set the default “Rows per page” from the shortcode “per_page” parameter.
    [custmix_ceu_list link_2_post_id=”2723″ per_page=”50″]

    Drop “start” parameter. The dropdown list options always starts from 1.
    The dropdown options are always [1, 50, 100, 200]

  15. Modifications from last week’s delivery:

    1. Remove 1 from the dropdown list
    The dropdown list becomes [N, 100, 200]

    2. N is the number, editor enters in the shortcode
    [custmix_ceu_list link_2_post_id=”2723″ per_page=”N″]

    In the PHP code, check the per_page value (N) entered by editor.

    if N is NOT Integer, set Rows per page (RPP) to 50 (the default value)

    if N <= 50, RPP = N in this case N could be between 1 to 50 if N > 50
    if N === 100, RPP = 100
    if N === 200, RPP = 200
    else
    RPP = 50

Leave a Comment

Active Tasks – Closed Tasks

Recent Comments

Recent 20 Comments

Preview page