Embed how-to

Each widget works on any page, including Drupal pages on trlibrary.com. Add the script tag once per page, then place any of the tags below. Widgets pull live data from plantfinder.labs.trlibrary.com, so they stay current as plants and photos are added.

1. Add the script once

<script type="module" src="https://plantfinder.labs.trlibrary.com/embed.js"></script>

In Drupal, paste it into a Full HTML text block above the first widget. If the editor strips script tags, use the iframe versions at the bottom of this page.

2. A single plant

Use the plant's slug (its scientific name with dashes) or its USDA symbol. Slugs are in the address bar of each plant page.

<trpl-plant-card plant="liatris-punctata"></trpl-plant-card>

3. Plants in one area

Areas: front-entry-rock-garden, site-plantings, roof-northwest, roof-southeast, stormwater-prairie, sun-rock-garden, shade-rock-garden, berm-faces, prairie-restoration, blufftop-prairie, native-lawn, living-fire-lane. Optional: type (grass, sedge, wildflower, shrub, cactus-yucca), limit, title.

<trpl-plant-grid area="roof-northwest" type="wildflower" limit="8" title="Wildflowers on the green roof"></trpl-plant-grid>

4. Blooming now

Shows what usually blooms in the current month. Optional: limit, month (1 to 12) to pin a month.

<trpl-bloom-now limit="6"></trpl-bloom-now>

5. Grow-at-home zone check

<trpl-zone-check></trpl-zone-check>

Iframe versions

Any page of the Plant Finder can be framed without its header and footer by adding ?embed=1.

<iframe src="https://plantfinder.labs.trlibrary.com/?embed=1#/bloom" title="Bloom clock" style="width:100%;height:900px;border:0"></iframe>
<iframe src="https://plantfinder.labs.trlibrary.com/?embed=1#/places/roof-southeast" title="Southeast green roof plants" style="width:100%;height:900px;border:0"></iframe>
<iframe src="https://plantfinder.labs.trlibrary.com/?embed=1#/plant/liatris-punctata" title="Dotted blazing star" style="width:100%;height:1400px;border:0"></iframe>

Styling

Widgets inherit the page's width. Set --pf-min on a grid to change the minimum card width, for example <trpl-plant-grid style="--pf-min:150px">.