Options for simple related links in article content

[MirandaEcho]

Goal: Create a new widget area/implement a plugin for simplified related links within the body of an article/post.

Examples of styles:

• Apple news recirculation links as an example
• Washington Post
• Automatic as much as possible
• Ability to customize headline when they’re longer (nice to have)

Options to explore/estimate:

• Largo widget looked good on mobile, but not desktop. Maybe some customization there?
• Plugin for related stories in article content?
• Something else custom?

[benlk]

Appearing in Apple News at the end of articles:

On the Washington Post website, at the end of articles:

I do not see any in-article related links widgets on WaPo or in Apple News.

Their current post-bottom widget, the "Read This Next"-titled Largo Related Posts widget:

And on mobile:

---

Options:

1. Differentiating styles for a Related Posts widget in a SCAIP widget area. Perhaps a different-colored background?
2. Introducing another plugin to their site might be risky; we discussed https://wordpress.org/plugins/wordpress-popular-posts/ in Slack back at https://innorg.slack.com/archives/GEHS15UE8/p1591370277014700

Here's what a two-post Related Posts widget looks like:

And a widget from the WordPress Popular Posts plugin:

Note the weird styles from here that are making it be extra wide below 1250px:

umbrella-mstoday/wp-content/themes/mstoday/less/style.less

Lines 305 to 321 in 6ead81c

	&>aside {
	max-width: unset;
	margin-left: ~"calc(-2 * 15.021276594%)";
	margin-right: ~"calc(-2 * 15.021276594%)";
	@media (max-width:1250px) {
	width: 100vw;
	}
	@media (max-width:979px) {
	margin-left: ~"calc(-2 * 5.382978723%)";
	margin-right: ~"calc(-2 * 5.382978723%)";
	}
	@media (max-width:529px) {
	margin-left: 0;
	margin-right: 0;
	width:unset;
	}
	}

[benlk]

I'd put an estimate for styling either the standard Largo widget or the WP Related Posts widget at 2-4; high because I expect we would have several rounds of back and forth.

As a first pass:

/* child.css | https://mstoday.test/wp-content/themes/mstoday/css/child.css?ver=1594774589 */

@media (max-width: 1250px) {
  .entry-content > aside {
    /* width: 100vw; */
  }
}

.signup-interstitial, .donate-interstitial, .single .scaip {
  /* text-align: center; */
}

.single article aside.scaip {
  max-width: ;
  box-sizing: border-box;
  max-width: 100%;
  background: aliceblue;
}

[MirandaEcho]

Are there any options for something simpler - just the headline and no excerpt, photo, etc like her WaPo/Apple News examples? Are those styling options we could do with the Largo widgets? Same question for the ability to create custom links (shortened versions of the headlines) if needed?

[benlk]

We can hide the excerpt via CSS, and hide/show the byline via a widget option, but Largo Recent Posts does not offer the option to hide the excerpt or image via a widget option.

Custom headlines are not a feature in Largo, and would require extensive custom development to get them to show in particular areas. If they want to continue with the Largo Related Posts widget in this area, and have custom headlines, then we would need to 1) make the custom headline feature (4+h) and 2) one of these, which take about the same amount of time (4-6h):

• Clone the Largo Related Posts widget into the MS Today theme and set up custom functionality to display the custom headline
• Put MS Today on a 0.7-prerelease version of Largo and fix Not all widgets use partials/widget-content.php for outputting a post in a list of posts WPBuddy/largo#1769 in that version, so that we do not have to clone the Largo Related Posts widget

Putting MS Today on 0.7-prerelease also brings with it improved translatability, some CSS/HTML validation improvements, and a fix for the LESS Customizer failing to save on modern PHP. This last one is important because MS Today does use the LESS Customizer.

[MirandaEcho]

This looks like exactly what we're looking for. Can someone take a look? https://intellywp.com/intelly-related-posts/

[joshdarby]

@MirandaEcho It seems like it might check off a few boxes, but I don't think this plugin allows custom titles like they're looking for, since it seems this plugin is close to 100% automated.

[MirandaEcho]

I think the custom titles were more of a nice to have, so lets see how this looks on staging if possible.

[benlk]

The pricing section of the page says that the free version doesn't use featured images. Dunno if that's an issue.

[MirandaEcho]

Not sure if we want them anyway, so we can use the test version to see how it looks for now at least.

[joshdarby]

@MirandaEcho Here's a basic setup example of that plugin on staging: http://mstoday.staging.wpengine.com/2016/03/28/justices-sister-to-plead-guilty-to-federal-fraud-charges/

[MirandaEcho]

Thanks @joshdarby! There's a way to have it in the text rather than the bottom, right?

[joshdarby]

@MirandaEcho Yes, it's currently set to every 250 words (if there are more than that) + at the bottom. Do we want to change that?

[joshdarby]

Longer example post: http://mstoday.staging.wpengine.com/2020/06/15/ihl-college-board-to-approve-relocating-confederate-monument-from-heart-of-ole-miss-campus/

[joshdarby]

@MirandaEcho Styling and config options:

[MirandaEcho]

Lauchlin has purchased the pro version and activated it on staging, but isn't seeing the pro options. Can we take a look? We'd like to add images, and are after this layout from the plugin website: