Closed dkoo closed 2 years ago
@laurelfulford let's brainstorm on this when you're available! This is going to be in beta status shortly so we'll want to have a solution before any publisher sites start using it.
@dkoo Ooof, sorry it's taken me so long to circle back to this!
I've messed around a bit with the CSS, and the two different common blocks that this could be helpful with (Homepage Posts and Curated List).
I put together some screenshots here -- the options include:
I also included a text label version before it dawning on me that that wouldn't be doable with CSS alone and have it be something that could be translated. I do think having a text label will be the clearest way to indicate that the listings are featured, but it'll also definitely take more work/code changes. Perhaps it's something we could iterate on if clarity becomes a concern.
I'm personally leaning towards the ribbon, but would appreciate your thoughts!
I'm also curious if these styles should be applied on the single view of the listing, or just the block/archive view? I didn't find a ton of varied examples of featured classifieds-like styles, but they seemed to just be on the list-like view -- I just want to make sure I'm not missing something in this case, though, as I think the ribbon won't scale quite as nicely.
Lastly, I haven't addressed the featured-priority at all with these styles; I don't believe that's a needed feature yet, but let me know if I've missed anything!
Anyway -- please let me know what you think and if you have any questions at all about the above!
A draft PR of the 'ribbon' styles has been added to the theme repo here: https://github.com/Automattic/newspack-theme/pull/1877 This seemed like the best location since the styles span elements in the listings plugin, Newspack Blocks and theme, but I'm open to feedback on moving it!
@laurelfulford thanks so much for the various options and screenshots, as well as the draft PR. I agree with you that we should keep this feature as simple as possible for now, and I like the "ribbon" style that can be done via CSS only. I also saw you filed #282, which is a result of the the fact that only publishers who currently use Featured Listings not using Curated List blocks. #285 adds the missing support for Curated List blocks.
Let's move forward with the ribbon style, for now. If we get a lot of requests to add customizable text elements to the labels, we can revisit at that time.
Thanks @dkoo!
I've marked https://github.com/Automattic/newspack-theme/pull/1877 as ready for review, and should be able to look at https://github.com/Automattic/newspack-listings/pull/285 in the next day or so, if no one gets to it first (thanks for tackling that so quickly!).
Since https://github.com/Automattic/newspack-theme/pull/1877 is now merged, I think this issue can be closed for now.
@dkoo Any reason to keep this one open that I'm not thinking of?
Nope, thanks for the reminder!
124 adds two class names to featured listing
article
elements when shown in Homepage Posts, Post Carousel, or Curated List blocks; archive pages; search results; or to thebody
on singular listings.featured-listing
- Added if the listing is currently featured, regardless of priority levelfeatured-listing-priority-#
- The # is an integer from 1–9 indicating the feature priority level.As mentioned in that PR, we need to come up with a universalish way to style these featured items so they're visually distinct from non-featured/regular items. GDG uses what we call "pseudo-labels" which are shown alongside the post's category labels, but this isn't universal enough because many sites choose not to show categories in their blocks. A CSS-only treatment would be cleaner and more customizable, if possible.