Project

General

Profile

Actions

Feature #20209

open

Feature #19592: Groups Page Re-Design

Port CSV Editor's cover image selector to BuddyPress groups

Added by Raymond Hoh about 1 month ago. Updated 2 days ago.

Status:
New
Priority name:
Normal
Assignee:
Category name:
Groups (misc)
Target version:
Start date:
2024-04-18
Due date:
% Done:

0%

Estimated time:
Deployment actions:

Description

The CV Editor includes a preset cover image selector.

We're hoping that we can port this functionality over to BuddyPress groups. The CV Editor's implementation has a custom REST API endpoint to set the cover image. BuddyPress also has a REST API endpoint to set the group's cover image: https://github.com/buddypress/BP-REST/blob/master/includes/bp-groups/classes/class-bp-rest-attachments-group-cover-endpoint.php . Perhaps it is possible to simply switch between the two REST API endpoints, but I have a feeling it might not be that easy. To add the markup for the "Select a Commons Art banner" link as per the mockup, this can be added to the /groups/single/admin/group-cover-image.php template part, the Backbone /assets/_attachments/cover-images.index.php template part (this would require a theme template override) or the do_action() hooks available in those templates.

Jeremy, let us know if there are any deficiencies in the BP group cover image REST API and whether it will be much work to get the CV Editor's preset cover image selector working with BuddyPress groups.


Files

Groups - Manage - Cover Image.png (902 KB) Groups - Manage - Cover Image.png Raymond Hoh, 2024-04-19 12:33 AM
Actions #2

Updated by Jeremy Felt 19 days ago

I think I have a path forward here. Some notes:

  • We should leave the current BuddyPress handling of custom cover images alone, at least for the time being. Images are uploaded via admin-ajax.php.
  • A funky thing (to me) is that there is no data stored about the cover image with the group. BuddyPress finds the first file in the group's uploaded cover image directory and uses that.
  • In the CV editor, whether a custom image is uploaded or a CUNY banner is selected, we store the data as post meta.
  • So, I think we can append the banner selection interface to the existing backbone template and add a REST call that is used separately when a CUNY banner is selected to assign meta to the group. We can then use bp_attachments_pre_get_attachment to pre filter the image if a CUNY banner is set.
  • One other difference right now is that we wait to fully set the cover image on the CV until it is updated/published. The current group selector replaces the image immediately. It feels like we should have a confirmation step when selecting a CUNY banner on groups, but that we can leave the existing behavior for uploaded images.

I'll get the first iteration of this wired up shortly!

Actions #3

Updated by Jeremy Felt 12 days ago

I've got this up in feature/19592-cover-images - I think ready to merge into feature/19592-groups-redesign at any point.

  • For now, I've opted to keep the banner images in the CAC CV Editor plugin. We could easily keep a copy of the images there for back-compat and handle this in BP Nelo or another new plugin. `CAC\CVEditor\get_cover_images()` is the only thing handling this.
  • There's still a bit more work to do to dial in the flow of someone who uploads, then deletes, then selects, then wants to delete, etc... But I don't expect that to take much longer.
  • And there's a bit more styling to take care of. I'm poking around for good confirm/cancel patterns elsewhere right now.
A couple questions:
  • Should the "Select a Commons Art Banner" remain right-aligned when there is no existing image to remove?
  • Do we want to leave the default random handling in place if none is assigned?

Ray - feel free to merge this in to the main feature branch if you're comfortable!

Actions #4

Updated by Raymond Hoh 11 days ago

Thanks for your work on this, Jeremy! I've merged your code into the feature/19592-groups-redesign branch.

I forgot to mention that we need to add the art banner selector to the group creation process as well. I've just implemented this in https://github.com/cuny-academic-commons/cac/commit/6796e78417f45c5c0ec9373e0023a1d842165f3e . I've also moved the art banner markup from /groups/admin/group-cover-image.php to /assets/_attachments/cover-images/art-banner.php. This is so we can easily re-use your work on the group creation page.

For now, I've opted to keep the banner images in the CAC CV Editor plugin. We could easily keep a copy of the images there for back-compat and handle this in BP Nelo or another new plugin. `CAC\CVEditor\get_cover_images()` is the only thing handling this.

It might be neat if there were a separate set of art banners solely for groups to distinguish the group pages from the CV, so this might come in handy if we decided to maintain a separate set of cover images.

Should the "Select a Commons Art Banner" remain right-aligned when there is no existing image to remove?

I think it looks fine on the right, but I'll leave the feedback to others.

Do we want to leave the default random handling in place if none is assigned?

I've removed the default random cover image now that we have your art banner selector in place.

Looking forward to further updates to the flow and styling, Jeremy!

Actions #5

Updated by Boone Gorges 3 days ago

In https://redmine.gc.cuny.edu/issues/19724#note-25, Sara asked:

Can we add a way to delete the commons art banner after you select it during the creation flow?

It looks to me like there's no way to do this right now, during creation or manage. When you upload a custom image, a 'delete' button appears. This is not semantically correct for Commons Art Banners, but perhaps we could use a similar button to 'Remove'? Or perhaps always use 'Remove' for the button: in the case of Commons Art Banners, it would remove the link, while in the case of custom-uploaded images, they'd be deleted?

Actions #6

Updated by Jeremy Felt 2 days ago

Can we add a way to delete the commons art banner after you select it during the creation flow?

I just pushed a few changes to feature/19592-groups-redesign that implement an iteration of this. Right now I have "Remove Art Banner" when a banner is selected. I've left the "Delete Group Cover Image" alone when an uploaded image is assigned. There's still a bit more tweaking to do, but I think it's close.

Actions

Also available in: Atom PDF