[BETA] AMP Compatibility in version 2.3.0

In version 2.3.0 I added support for AMP. This is a BETA feature and thus do let me know if you encounter bugs. Currently AMP and AMP for WP plugins are supported.

To add rating/result widgets to your AMP pages first enable AMP compatibility mode in advanced settings. The AMP widgets are without any style and thus you need to add style yourself – the style that you should add is at the bottom of this post. Adding the style differs depending on which plugin you use.

AMP plugin

Paired Mode: you simply add the style in the Appearance -> Customize -> Custom CSS section.

Classic Mode: You need to utilize a filter in your child theme’s functions.php or custom-made plugin:

add_action( 'amp_post_template_css', 'xyz_amp_my_additional_css_styles' );

function xyz_amp_my_additional_css_styles( $amp_template ) {
  // only CSS here please...
  ?>
  /* CSS goes here */
  <?php
}

AMP for WP plugin

If you are using AMP for WP plugin, you will first have to disable form sanitization as the plugin automatically strips forms out of the document. A tutorial how to do this is available here: https://ampforwp.com/tutorials/article/override-blacklist-sanitizer/

After form sanitization is disabled you just copy/pase the style to Design -> Style in the AMP for WP settings.

Style

Here is basic style for the rating widget and the result widget. You should edit and adjust it so that it fits to your website.

/* Rate my Post CSS for AMP with the help of AMP by Example - https://ampbyexample.com/advanced/star_rating/ */

  /* Results widget stars */
  .rmp-amp-star::before {
    content: "★";
    font-size: 26px;
    color: #ccc;
    margin: -2px;
  }

  .rmp-amp-star-highlighted::before {
    color: #FF912C;
  }

  .rmp-amp-stars, .rmp-amp-average, .rmp-amp-votes {
    display: inline-block;
  }

  /* Text-align center in rating widget */
  .rmp-amp-rating-widget {
    text-align: center;
  }

  /* Bottom margin on title */
  #rmp-amp-rating-widget-title {
    margin-bottom: 10px;
  }

  /* These two inputs should not be displayed */
  #rmp-amp-action, #rmp-amp-post-id {
    display: none;
  }

  /* Center the stars */
  .rmp-amp-centered-fieldset {
    margin-left: auto;
    margin-right: auto;
    max-width: 200px;
  }

  .rmp-amp-rating {
    --star-size: 3;  /* use CSS variables to calculate dependent dimensions later */
    padding: 0;  /* to prevent flicker when mousing over padding */
    border: none;  /* to prevent flicker when mousing over border */
    unicode-bidi: bidi-override; direction: rtl;  /* for CSS-only style change on hover */
    text-align: left;  /* revert the RTL direction */
    user-select: none;  /* disable mouse/touch selection */
    font-size: 3em;  /* fallback - IE doesn't support CSS variables */
    font-size: calc(var(--star-size) * 1em);  /* because <code>var(--star-size)em</code> would be too good to be true */
    cursor: pointer;
    /* disable touch feedback on cursor: pointer - https://stackoverflow.com/q/25704650/1269037 */
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-tap-highlight-color: transparent;
    margin-bottom: 16px;
  }
  /* the stars */
  .rmp-amp-rating > label {
    display: inline-block;
    position: relative;
    width: 1.1em;  /* magic number to overlap the radio buttons on top of the stars */
    width: calc(var(--star-size) / 3 * 1.1em);
  }
  .rmp-amp-rating > *:hover,
  .rmp-amp-rating > *:hover ~ label,
  .rmp-amp-rating:not(:hover) > input:checked ~ label {
    color: transparent;  /* reveal the contour/white star from the HTML markup */
    cursor: inherit;  /* avoid a cursor transition from arrow/pointer to text selection */
  }
  .rmp-amp-rating > *:hover:before,
  .rmp-amp-rating > *:hover ~ label:before,
  .rmp-amp-rating:not(:hover) > input:checked ~ label:before {
    content: "★";
    position: absolute;
    left: 0;
    color: gold;
  }
  .rmp-amp-rating > input {
    position: relative;
    transform: scale(3);  /* make the radio buttons big; they don't inherit font-size */
    transform: scale(var(--star-size));
    /* the magic numbers below correlate with the font-size */
    top: -0.5em;  /* margin-top doesn't work */
    top: calc(var(--star-size) / 6 * -1em);
    margin-left: -2.5em;  /* overlap the radio buttons exactly under the stars */
    margin-left: calc(var(--star-size) / 6 * -5em);
    z-index: 2;  /* bring the button above the stars so it captures touches/clicks */
    opacity: 0;  /* comment to see where the radio buttons are */
    font-size: initial; /* reset to default */
  }
  form.amp-form-submit-error [submit-error] {
    color: red;
  }

Let’s improve AMP together – I’m listening here ??

• This topic was modified 5 years, 8 months ago by Blaz K..