‹ Help

Embed a race card

The 'race card' is a small, live panel showing key race information and linking back to the full race page. It includes a static snapshot of the race route and usually a description of the most current running, either as future event or published results. Drop the tag into one of your pages and it will remain up to date.

Previewing Long Duddon. To preview your own race, add ?slug=your-race-slug to this page's address (the slug is the last part of your race's URL).

1. Custom tag

Add the tiny fellrace loader script to your site javascript and it will define a <race-card> tag that you can use anywhere on the page. The effect of the tag is to pull in an iframe containing our race card (which is therefore always up to date) and an event listener to maintain the size of the iframe when the page size changes.

<script src="https://fellrace.org.uk/embed.js"></script>
<race-card slug="duddon"></race-card>

You can also specify small, medium or large: small is a compact list row, medium is a tile with essential details, large is a full-width card that adds the elevation profile, stats and a short description beside the route map. Adding orientation="vertical" stacks the route picture above the text instead of beside it — handy for narrow columns and sidebars (the same works as an &orientation=vertical url parameter on the plain iframe).

<race-card slug="duddon" size="small"></race-card>
<race-card slug="duddon" size="medium"></race-card>
<race-card slug="duddon" size="large"></race-card>
<race-card slug="duddon" size="large" orientation="vertical"></race-card>

2. Plain iframe

If you prefer, you can access the iframe directly and style it yourself. This pulls in a small block of html from the fellrace site so it's always up to date. Size can be given as a url parameter.

<iframe
  src="https://fellrace.org.uk/races/duddon/embed"
  width="360" height="340"
  loading="lazy" scrolling="no"
  style="border:0;max-width:100%"></iframe>

3. WordPress shortcode

If you're on wordpress and have access to the theme, it only takes a few lines to define a shortcode that will bring a race onto any page. This is essentially the same as the web component approach above, but it adds our loader javascript to the wordpress lifecycle and presents a [race_card] shortcode around the custom tag. After that you can use it on any page:

<?php
// In your theme's functions.php — registers a [race_card] shortcode.

add_action('wp_enqueue_scripts', function () {
    wp_enqueue_script('fellrace-embed', 'https://fellrace.org.uk/embed.js', [], null, true);
});

add_shortcode('race_card', function ($atts) {
    $a = shortcode_atts(['slug' => ''], $atts);
    return '<race-card slug="' . esc_attr($a['slug']) . '"></race-card>';
});

Then in any post or page:

[race_card slug="duddon"]