Parallelism of display with common Jetpack plugins

[chrisaldrich]

I was looking at some CSS and noticed a few things that could be tweaked on the output.

As I suppose is reasonably common, many people on WP will be using one or more Jetpack features in addition to Syndication-Links. (I suspect many Gen 2-4 IndieWeb users will rely on Jetpack for syndication for its ease of use.) As a result, it would be nice if Syndication Links had a (default) parallel structure and mark up to "Like", "Share" and "Related Posts" within Jetpack.

To do this I'd suggest something like the following modified structure which Jetpack uses:

<div class="sharedaddy">
  ::before
     <h3 class="relsyn sd-title">Syndicated to:</h3>  //or whatever the programmed option is
          <ul>
               <li>Syndicated names/icons, etc...</li>
               <li>Syndicated names/icons, etc...</li>
          </ul>
</div>

Naturally the styling classes should be something relsyn-related with similar (or exact default) mark up as "sharedaddy" and "sd-title". If I have the patience shortly, I'll dig through the dozens of .css files jetpack throws in to style these and do a PR if you don't suspect any issues with your current roadmap.

Making the syndicated icons the same 34x34 px of the "Share" icons would be nice, but for UX/UI reasons, keeping them smaller to encourage sharing over clicking to view syndicated versions would probably be preferable to most users. Thoughts?

Since, it's early days for indieweb, is it worth wrapping the text "Syndicated to" (as an example) with a url to indieweb.org/POSSE the way that Webmention Form plugin links to WebMention to allow for some additional publicity? Perhaps those who see this functionality on sites will be prompted to want to get it themselves?

Additionally/separately, is it possible to hook Syndication links (as a default) in above all three of these common plugins so that it appears at the top of the list? (IndieWeb > Jetpack) Alternately, providing a setting value to allow placement in this hierarchy may be nice (for the future).

[dshanske]

The size can be set in CSS. These are SVG icons and will scale infinitely. Also, since I am now using the Social Logos pack from Automattic, this is the same icon set Jetpack uses. There are two ways to add it... inside the content block or outside. Outside requires hacking the theme.

[chrisaldrich]

For reference, here's the CSS that jetpack uses:

/* Make the Syndication Links replicate the font characteristics of JetPack */
.relsyn {
    font-family: Montserrat, "Helvetica Neue", sans-serif;
    font-size: 0.8125rem;
    font-weight: 400;
}

[dshanske]

I added support for three different icon sizes. I am reluctant to set font families as I prefer to inherit from the theme.

[chrisaldrich]

That's acceptable and should work well.

For those in the future looking to change their CSS to match JetPack, try the following:

• In the settings, change "Text Before Links" to: Syndicated to: <br/>
• Add the following CSS snippet to your theme (preferably as a child them) or to the "Additional CSS" tab from within the Customizer:
  /* Make the Syndication Links replicate the font characteristics of JetPack */
  .relsyn { font-family: Montserrat, "Helvetica Neue", sans-serif; font-size: 0.8125rem; font-weight: 400; }

I'm guessing the medium size should work well for the icons (once that feature is released). One could add some additional padding/margins and the <hr> as well, but for some reason I've had difficulty pulling it off in CSS (or I've been missing some override somewhere...)

As always, thanks David!