Explore & mock up options for sponsored and cultural content

[MirandaEcho]

Requirements:

• A custom layout/template for cultural content and sponsored content on the site
• Clear labeling for partner content story posts by adding different color and styling to new category
• New widget areas for in-house ads highlighting content - essentially like SCAIP but specific to this type of content
• Distinct from other types of content -- New layout -- Use Block editor -- Longer, cultural stories --Distinquished on homepage and on story itself

Examples:

• Template ideas: https://bittersoutherner.com/folklore-project/2020/comfort-food
• Distinguishing on homepage: See partner voices and opinion lables on https://www.voiceofsandiego.org/
• Also see sponsors list in sidebar here: https://www.voiceofsandiego.org/partner-voices/the-international-rescue-committee-adapts-workforce-development-programs-to-meet-pandemic-needs/

What we need:

• [ ] Proposed technical approach
• [ ] Wireframe for new template
• [ ] Mockups of ways to add category distinctions on homepage

[joshdarby]

For technical approach:

• [ ] A custom template to be used on posts/pages (we should ask if it needs to work with both or just one or the other)
• [ ] We can add new widget areas inside of the new custom template and/or copy SCAIP functionality to insert these widget areas inside of the post content
• [ ] We can create a new sidebar named Cultural Coverage Sidebar (or something else) through Largo and display it by default on this new template, but still allow users the option to overwrite it with a different sidebar if needed
• [ ] For distinguishing these on the homepage, we could
  • exclude the new category from all post loops on the homepage and create a new section for it
  • not exclude this new category from all post loops, but rather target these posts by category-cultural-coverage or whatever the category name will be and style them from there to make them look like the examples on https://www.voiceofsandiego.org/

@benlk anything I missed?

[benlk]

One simple thing that Lauchlin mentioned was having the Top Term tags be different colors for certain different types of content. We can do that with the top-term classes ostensibly introduced in https://github.com/INN/largo/issues/1474

The Largo implementation appears to be bugged in WP >= 4.9, however, and we may need to copy this code into MS Today from Rivard Report: https://github.com/INN/umbrella-rivard-report/blob/master/wp-content/themes/rivard-report/inc/post-tags.php#L62-L118

[MirandaEcho]

@joshdarby - can I get estimates for the options above? Thanks!

[joshdarby]

@MirandaEcho

• 2-8 hours to create a custom template, depending on final designs
  • includes creating a custom sidebar that would be the default for this template, but allow users to override it by selecting a different sidebar in the post editor
• Copying SCAIP functionality to make widget areas that appear inside the content on only this template
  • 2-4 hours to create the widget area(s?) and make the widget area display inside of the content
  • 2 hours (if they want this) to create a settings metabox to copy the SCAIP settings that allow setting paragraph limit, widget placement between paragrapgs, etc.
• For distinguishing these posts on the homepage
  • 2 hours to exclude these from all loops on the homepage (assuming they have a category assigned)
  • 2 hours to create styling for any articles on the homepage that have a specific category assigned for these posts

[MirandaEcho]

@joshdarby can I get a browser mockup/screenshot examples of:

• Styling for specific category labels on the homepage? (mock up in browser of some possibilities on MSToday if possible)
• Visual examples of how specific category sections could be implemented on their homepage?

[joshdarby]

@MirandaEcho Here's a mockup of how category labels could look on the homepage (using the example from https://www.voiceofsandiego.org/):

[benlk]

2-8 hours to create a custom template, depending on final designs

• includes creating a custom sidebar that would be the default for this template, but allow users to override it by selecting a different sidebar in the post editor

If the layout will not differ, just colors and fonts, then we may be able to get by without a specific template for this post. We can hook CSS styles on the article tag's classes, hnews item post-543933 post type-post status-publish format-standard has-post-thumbnail hentry category-commentary prominence-top-story featured-media featured-media-image, or add another set of options to our Developer-Driven Custom Post Classes plugin in https://github.com/INN/umbrella-mstoday/blob/master/wp-content/themes/mstoday/inc/DDCPC.php

Going a CSS-only route would probably save 2h from template creation, but knowing whether we can do that depends on the complexity of the layout.

For distinguishing these posts on the homepage

• 2 hours to exclude these from all loops on the homepage (assuming they have a category assigned)
• 2 hours to create styling for any articles on the homepage that have a specific category assigned for these posts

We should check with them whether this needs to be excluded from all loops on the homepage, or just the main post river. Largo already has a function to exclude specific categories from the main post river, with the cats_home option.

[MirandaEcho]

@joshdarby this is great, thanks! Can I see a version with Blue as well?

[joshdarby]

@MirandaEcho Here are two examples of how adding 2 categories could look on the bottom of their homepage:

One column (custom)

Two column (default)

[joshdarby]

@MirandaEcho Blue tags: