Project

General

Profile

Actions

Design/UX #16534

closed

About Page Re-configure and Re-Skin

Added by Sara Cannon almost 2 years ago. Updated about 1 year ago.

Status:
Resolved
Priority name:
Normal
Assignee:
Category name:
Design
Target version:
Start date:
2022-07-26
Due date:
% Done:

0%

Estimated time:
Deployment actions:

Copy About page content from cdev to production


Description

Re-configure and re-skin the About page: https://commons.gc.cuny.edu/about/


Files

About.png (2.93 MB) About.png Sara Cannon, 2022-07-26 07:34 PM
About.png (2.92 MB) About.png Sara Cannon, 2022-10-04 11:21 AM
cover.png (213 KB) cover.png Boone Gorges, 2023-01-18 01:17 PM
cover-resize.gif (1.1 MB) cover-resize.gif Boone Gorges, 2023-01-18 01:19 PM
header-resize.mov (17.8 MB) header-resize.mov Colin McDonald, 2023-01-23 09:03 AM
should-building-blocks-blade-be-centered-scaled.jpg (149 KB) should-building-blocks-blade-be-centered-scaled.jpg Colin McDonald, 2023-01-23 09:06 AM
Screenshot_2023-01-23_16-07-17.png (27.9 KB) Screenshot_2023-01-23_16-07-17.png Boone Gorges, 2023-01-23 05:09 PM

Related issues

Related to CUNY Academic Commons - Design/UX #16536: Main Navigation Drop-Down EliminationResolvedBoone Gorges2022-07-26

Actions
Actions #1

Updated by Sara Cannon almost 2 years ago

Actions #2

Updated by Boone Gorges over 1 year ago

  • Target version set to 2.1.0
Actions #3

Updated by Colin McDonald over 1 year ago

I looked at it a little more after the call today and I think News still makes sense as the first three-item block on the About page, since it ties into the general Commons content above it. This feed would pull from and link out to:

https://news.commons.gc.cuny.edu/

Then the other blocks in this proposed order, with their respective "More..." links.

Open Educational Resource Projects on the Commons
https://commons.gc.cuny.edu/open-educational-resource-projects-on-the-commons/

Publications on the Commons
https://commons.gc.cuny.edu/about/publications/

Conferences
https://commons.gc.cuny.edu/conferences-on-the-commons/

Wondering if we need "on the Commons" at the end of those two headers above, though? It might be a little redundant, and it doesn't align great with Conferences which doesn't fit the "on the Commons" framing necessarily.

Actions #4

Updated by Sara Cannon over 1 year ago

Updated About Layout - switched the order of OER to Conferences, Removed the "on the commons" wording.
https://share.getcloudapp.com/YEuWrwYg

Actions #5

Updated by Boone Gorges over 1 year ago

How will the OER, Conferences, and Publications sections be populated? We have some group- and site-related metadata that could allow us to pull in OER automatically, but this might be too noisy for the About page. Do we want them all to be manually curated? Colin, I think you mentioned something about a series of blocks that would allow admins to specify the items for these sections?

Actions #7

Updated by Colin McDonald over 1 year ago

Yes, Laurie and I discussed this on the Friday community call and agreed it would be good to curate this manually. The OER section in particular requires some advance vetting.

One wish list item would be to pre-populate more than three items, similar to Featured Groups and Sites on the homepage, so the three-item list can cycle through those randomly and make the page more fresh in between manual curation updates.

How difficult would this be? I think we'd be fine with still basing it off of metadata rather than a custom block or something fully manual, if that helps and allows us to build off of past code.

Actions #8

Updated by Boone Gorges over 1 year ago

  • Assignee changed from Boone Gorges to Jeremy Felt

Thank you for the Figma files, Sara! I'm going to hand this off to Jeremy for implementation.

One wish list item would be to pre-populate more than three items, similar to Featured Groups and Sites on the homepage, so the three-item list can cycle through those randomly and make the page more fresh in between manual curation updates.

It's good that you mentioned this up-front, because it changes the admin UI quite a bit. The most obvious admin UI would be: three slots, and for each of them, you can change the text/image, probably implemented as child blocks. In other words, it would be pretty much WYSIWYG. But if you need a deeper pool of potential items, you'd need a different admin UI. Maybe when the block is active in the editor, you see instead a sort of repeater-list interface, which you can add items to. Jeremy, maybe you have some ideas about how best to handle this.

It could probably also work to have a separate admin panel where this stuff is managed, based on the Featured Groups/Sites areas. The problem there is that the things we're featuring aren't always of the same type. A Publication could be a group, or a site, or maybe even something else. Instead of a "pick from available options" interface, I think that a "enter the image, the title, and the link" would be more flexible. As such, it might not be very natural to base it on the existing typeahead tools on the Home Curation settings panel.

Actions #9

Updated by Colin McDonald over 1 year ago

Thanks Boone, I didn't think in particular about the fact that it would be hard to parse and pull in possible OERs, Conferences, etc as we do for the Featured Sites and Groups on the homepage, because those categories are more broad and not tied to a specific type of space.

If we just go with a "three slots" block, with image/title/link fields, I think that would be fine. We can keep it updated on our own. If Jeremy has an idea of a way to add more than three items, using the same simple custom fields, in the back end and have a random assortment of the three items displayed for each page load, I'd be curious how big of an extra lift this would be.

Actions #10

Updated by Jeremy Felt over 1 year ago

Things are looking good in the 2.1.x branch. Boone / Ray - can you please pull the latest from 2.1.x to CDEV when you have a chance?

A few notes:

  • I've edited the /about/ page on CDEV (https://commons.gc.cuny.edu/about/) with the new block-editor markup. That can be modified at any time, though things will visually change on the front-end when updated to the latest code.
  • There are placeholder items for OER Projects, Conferences, and Publications. Images and titles will need to be added for each.
  • The cover image should be swapped out with an improved version. I grabbed this from the Figma file, so it may not be accurate.
  • Each `[cac_member_card]` shortcode displays a member. The `id` attribute is the member's user ID on the commons and is necessary for pulling in name, pronouns, and avatar. The `title` attribute is the CAC specific title that should display instead of campus. The `name` attribute is not necessary, though will help with organization when looking at the wall of shortcodes. This may be cool to consider as a block one day instead.

I also believe all of this content can be staged in production as a draft page (e.g. about-new) so that images and links can all be set beforehand. Then, the deployment process will be: "copy content from the code editor view on about-new and paste to about".

On Monday morning I'll work on defining a block template for some of the featured items and documenting the structure and class names used. I think that will make ongoing curation of the page much easier.

Actions #11

Updated by Raymond Hoh over 1 year ago

can you please pull the latest from 2.1.x to CDEV when you have a chance?

Done!

Actions #12

Updated by Jeremy Felt over 1 year ago

Block patterns are now available (on the 2.1.x branch) for Featured Card and Featured Group. A featured card is a combination of image and title. A featured group contains a group title, three featured cards, and a "more ..." link.

Two block styles are also available for the `core/group` block: has-dark-waves and has-grey-background. These can be used on any group when building a page to apply the dark wave background or the #f5f5f5 background.

The about page on CDEV is in a good place and ready for some curation. I'll apply those styles once I confirm that 2.1.x has been pulled.

Actions #13

Updated by Boone Gorges over 1 year ago

Thanks, Jeremy. I've pulled the latest 2.1.x to cdev.

Actions #14

Updated by Jeremy Felt over 1 year ago

Colin - I've recorded a quick walk-through of the about page at https://www.loom.com/share/950692b7f91f4be1add69a3dd74f57e3, please let me know if you'd like clarification on anything.

I don't think it's crucial, but I'll try to get some additional styles up so that its easier to see what has a grey/white/wave background when you're editing the page.

Actions #15

Updated by Colin McDonald over 1 year ago

Hello, could someone check my "colinmcd" dev site account and make sure it has the permission to edit the About page there? I need to access this link I believe:

https://commons.gc.cuny.edu/wp-admin/post.php?post=2&action=edit

I'm adding Ray as a watcher in case he can help. Thanks!

Actions #16

Updated by Boone Gorges over 1 year ago

I've made colinmcd an Editor on cdev. Let me know if that does it for you.

Actions #17

Updated by Colin McDonald over 1 year ago

Working now, thanks!

Actions #18

Updated by Colin McDonald over 1 year ago

I can't seem to get the top header block to stop stretching the (admittedly short and wide, banner style) image that I'd like to use there. Am I doing something wrong, or is this size not workable there?

Actions #19

Updated by Boone Gorges over 1 year ago

Can you define "stretching"? It looks to me like it's being cropped left and right, "cover" style. See cover.png.

If you have the Cover block selected, you can drag the height of the element. See cover-resize.gif. Does that do what you want it to do?

Actions #20

Updated by Laurie Hurson over 1 year ago

Hi All,

Took a look at this on cdev for testing. Some feedback/questions below:

- the links in the gray background under publications read
"Privacy Policy Terms of Service Help Contact Us" but they don't actually link to the correct pages.

- Just wanted to point out that very similar language about contacting us appears twice:

A. under "contact us" at the top : "To contact the CUNY Academic Commons community team, send an email to . We will get back to you as soon as possible."

B. and again under "project staff" - "Please feel free to contact us with questions or comments. Send an email to and we will get back to you as soon as possible."
I guess this is fine to have the email twice but do we want an extra sentence about the staff? Something about "built and maintained by cuny for cuny" here?

- Community Team: I think Anthony is missing from the Project staff community team

- Site Governance: I think Wendy Hensel is EVC and Uni Provost now? But maybe Matt or Luke can confirm

(I should also add -- this look great!!!! Very excited to see it live)

Actions #21

Updated by Colin McDonald over 1 year ago

Boone, I seem to have lost my Editor status on cdev for my colinmcd account, if you could look into that again. Trying to access the About page editor with no luck.

Actions #22

Updated by Boone Gorges over 1 year ago

colinmcd is now upgraded to Editor on cdev

Actions #23

Updated by Colin McDonald over 1 year ago

Thanks for the assist on restoring my editing privileges, Boone. Laurie mentioned on Friday's call that she sees that on occasion with her dev account as well. Not sure if there's anything to be done about it.

I've addressed Laurie's feedback above (thanks, Laurie!):
- Fixed admin links at bottom (privacy, terms, etc)
- Removed redundant line near Project staff about contacting us (it's at the top, as well as in the admin links I just mentioned toward the bottom)
- Finished populating tiles for featured publications/OERs/conferences. FYI, the easiest way I found to make each tile consistent was to upload a pre-cropped 550x350px thumbnail for each.
- Got staff list as accurate as I can on dev site, will double check upon launch. What's the easiest way to find the ID of a member, to add to Jeremy's new ID-based shortcode for staff members?

Here's my google doc (will also post to the forum) of the current team and about info as I have it, edits welcome:
https://docs.google.com/document/d/1WTV1dOmkhFcCftq3IrUIvgUOPyp6ZtiPlOPcQSMu-j8/edit?usp=sharing

Last but not least, I think I figured out how to make the banner image I was trying to use look good on a large screen. It seems to want a width of ~1315px max, so using an image matching that and its proportional height works well until the screen gets smaller (see attached video). Then the image gets smaller only horizontally, but remains the same height. I don't have a min height selected. Is this some other quirk of the cover block?

Actions #24

Updated by Colin McDonald over 1 year ago

Adding a few watchers and attaching the video of banner image resizing I mentioned in my above comment.

Actions #25

Updated by Colin McDonald over 1 year ago

Sara, what do you think about centering the building blocks part of the new About page? Scott pointed out that it looks a bit misaligned in the context of the page, and I see what he means. Not crucial to the launch, but wanted to run it by you. See screenshot attached.

Actions #26

Updated by Boone Gorges over 1 year ago

Last but not least, I think I figured out how to make the banner image I was trying to use look good on a large screen. It seems to want a width of ~1315px max, so using an image matching that and its proportional height works well until the screen gets smaller (see attached video). Then the image gets smaller only horizontally, but remains the same height. I don't have a min height selected. Is this some other quirk of the cover block?

This does look like a quirk of the block. Jeremy, could you have a look? To me, 'cover' suggests it should use the 'background-size: cover' declaration, but perhaps it doesn't. Perhaps we can just fix this with our own CSS on top of what WP provides?

Actions #27

Updated by Sara Cannon over 1 year ago

Colin - I'm good with the centering of the building blocks. See https://share.getcloudapp.com/eDune5XZ

Actions #28

Updated by Colin McDonald over 1 year ago

Thanks, Sara and Boone. Jeremy, if you're able to troubleshoot in this order for launch, most to least important:

- Cover block sizing issue
- How to find ID of a member?
- Centering the building blocks as Sara references (could be done later)

That would be great!

Actions #29

Updated by Boone Gorges over 1 year ago

Regarding the cover image, I've forced this element to have 'height:auto', which appears to solve the immediate issue. https://github.com/cuny-academic-commons/cac/commit/eea809584375b2ea4cd6c0478a4bad0f5fd0a066 Jeremy, I don't know whether this violates the spirit of this rule, and the selector is probably too broad. Feel free to adjust as you see fit.

To get the ID of a member:
1. Go to the Users page https://commons.gc.cuny.edu/wp-admin/users.php
2. Search for the user
3. Once you've found the user, hover over the link to see the URL of the page. It will be something like https://commons.gc.cuny.edu/wp-admin/user-edit.php?user_id=278&wp_http_referer=%2Fwp-admin%2Fusers.php%3Fs%3Dscott%26action%3D-1%26new_role%26bbp-new-role%26bbp-bulk-users-nonce%3D723d1d176b%26paged%3D1%26action2%3D-1%26new_role2%26bbp-new-role2 Look for user_id=278. 278 is this user's ID.
4. If you can't find the user at this URL, it may mean they don't have a site role, and you'll need to look as a super admin at https://commons.gc.cuny.edu/wp-admin/network/users.php

Actions #30

Updated by Colin McDonald over 1 year ago

Thanks on the cover image, Boone. On the IDs, I'm seeing a URL like this for myself:

https://commons.gc.cuny.edu/wp-admin/users.php?page=bp-profile-edit&wp_http_referer=%2Fwp-admin%2Fusers.php%3Fs%3Dmcdonald%26bbp-new-role%26bbp-bulk-users-nonce%3Dfc039d15a0%26paged%3D1%26bbp-new-role2

So no "user_ID" part in there. Is it possible this only shows up for super admins or some other higher level than what I have on the production site?

For some reason, on the dev site there is an ID column on the main Users page which makes it easy to grab each number.

Actions #31

Updated by Boone Gorges over 1 year ago

I'm not sure whether your comment refers to the production site or cdev. But in any case, if the usernames aren't linked because you don't have sufficient permissions, you could use the Inspect tool to look at the id attribute of the tr element. See screenshot.

I'm unsure from the discussion above exactly what you need the ID for. Is this a requirement on an ongoing basis? I don't understand why there's a column-id on cdev but not on production - probably some plugin, but it's a hard thing to track down without doing a bunch of debugging. If you will need it in the longer run, we could either (a) explore adding the ID column, or (b) change the syntax of the element in question (is it a shortcode?) so that it accepts usernames rather than IDs.

Actions #32

Updated by Jeremy Felt over 1 year ago

change the syntax of the element in question (is it a shortcode?) so that it accepts usernames rather than IDs.

I've just pushed a change to the 2.1.x branch that allows for usernames. That's admittedly easier than tracking down IDs. :)

Actions #33

Updated by Colin McDonald over 1 year ago

Sorry about the confusion Boone, and tying it to usernames definitely helps Jeremy. Thank you both for your help.

Actions #34

Updated by Raymond Hoh over 1 year ago

I've just pushed a change to the 2.1.x branch that allows for usernames. That's admittedly easier than tracking down IDs. :)

Thanks Jeremy. Just pulled the changes onto cdev if anyone wants to test over there.

I don't understand why there's a column-id on cdev but not on production - probably some plugin, but it's a hard thing to track down without doing a bunch of debugging

This is one of my debug plugins that I put on cdev a long time ago without committing -- wp-content/mu-plugins/ray-userid-column.php. I can remove it or can commit it and allow it only on the main site or network admin area?

Actions #35

Updated by Jeremy Felt over 1 year ago

Centering the building blocks as Sara references (could be done later)

I just pushed another change to 2.1.x that adds support for a classnames attribute on the building blocks shortcode as well as some additional CSS to center it.

And I changed the shortcode on the cdev about page to [cac_building_blocks classnames="building-blocks-is-centered"], which will start working once the code has been deployed.

Actions #36

Updated by Boone Gorges over 1 year ago

  • Deployment actions updated (diff)
Actions #37

Updated by Boone Gorges over 1 year ago

  • Status changed from New to Resolved

This has now been deployed. I had to do a good deal of work after the code deployment to make things work, mostly because of differences between cdev and the production site. A summary:

- I copied the text from cdev to production
- I brought over images that weren't present in production, including the "cover" banner at the top, and several thumbnails
- I swapped out user IDs for proper usernames in cases where there was a mismatch
- I had to clear a site transient for the Latest News section to work properly

Colin and team, please review this page carefully to be sure that I've brought everything over correctly. At this point, you are free to edit it yourself as you see fit. If more work is needed from the dev team, please open a new ticket against a future milestone.

Actions #38

Updated by Colin McDonald over 1 year ago

Hi Boone, thanks for the attention to detail here. Let me know if I could have done anything differently to reduce the launch/transition workload on the dev side.

I've given the About page a good review and all seems to be in order. Matt (also adding Luke as a watcher), given your knowledge of the team history it might be good for you to take a look, particularly at the Staff section.

https://commons.gc.cuny.edu/about/

Actions #39

Updated by Matt Gold about 1 year ago

Thanks. Looks good to me. FYI, I updated the governance section slightly

Actions

Also available in: Atom PDF