TRMNL

With the Screenshot plugin you can take a snapshot of any public web page, with any type of content. This could be a CCTV video feed, sports scores, or your child's lunch menu.

Inside TRMNL, navigate to Plugins &gt; Screenshot.

Provide a public website URL and optionally name this plugin instance, then click Save.

Based on your desired refresh settings, TRMNL will begin generating screenshots with this URL.

<i>The website doesn't look the same as in my browser.</i>

The TRMNL display resolution is 800x480. In your browser (Chrome/Firefox) hold down shift+ctrl+c (Windows) or shift+cmd+c (Mac) to enter the Inspector mode. Here you can change the viewport to 800x480 to simulate how TRMNL will see the contents.

- The TRMNL display resolution is 800x480. In your browser (Chrome/Firefox) hold down shift+ctrl+c (Windows) or shift+cmd+c (Mac) to enter the Inspector mode. Here you can change the viewport to 800x480 to simulate how TRMNL will see the contents.

TRMNL does not visit this website directly and take a screenshot. Instead, we copy/paste the page's HTML contents into a new browser, then screenshot that result. This HTML will include references to CSS and JavaScript, which in most cases allows the page to be recreated anywhere.

In some cases, however, the web page may references CSS (styling) via relative links such as <code>"/styles.css"</code> instead of absolute links like <code>"https://some-website.com/styles.css"</code> .

For this situation, TRMNL attempts to convert all relative URLs for CSS + JavaScript to a full URL, granting our generated browser the context it needs to find your styling and interactive elements. This is not a perfect solution however.

If you have control over the web page you are screenshotting, we suggest ensuring that styles and other externally included libraries are available with absolute URLs instead of relative paths.

- TRMNL does not visit this website directly and take a screenshot. Instead, we copy/paste the page's HTML contents into a new browser, then screenshot that result. This HTML will include references to CSS and JavaScript, which in most cases allows the page to be recreated anywhere.
- In some cases, however, the web page may references CSS (styling) via relative links such as <code>"/styles.css"</code> instead of absolute links like <code>"https://some-website.com/styles.css"</code> .
- For this situation, TRMNL attempts to convert all relative URLs for CSS + JavaScript to a full URL, granting our generated browser the context it needs to find your styling and interactive elements. This is not a perfect solution however.
- If you have control over the web page you are screenshotting, we suggest ensuring that styles and other externally included libraries are available with absolute URLs instead of relative paths.

Similar to our note above on relative vs absolute content paths, TRMNL needs embedded images to point to a full URL. So if your web page has an "&lt;img&gt;" tag with a source attribute such as "photo.jpg", TRMNL cannot determine which URL this photo should be loaded from.

While TRMNL attempts to find the image on your website URLs server, this is not a perfect solution.

Image "src" attributes need to contain absolute paths to ensure accuracy during screenshot generation.

- Similar to our note above on relative vs absolute content paths, TRMNL needs embedded images to point to a full URL. So if your web page has an "&lt;img&gt;" tag with a source attribute such as "photo.jpg", TRMNL cannot determine which URL this photo should be loaded from.
- While TRMNL attempts to find the image on your website URLs server, this is not a perfect solution.
- Image "src" attributes need to contain absolute paths to ensure accuracy during screenshot generation.

Step 1 - Visit the Screenshot plugin

Step 2 - You're Done!