Embed images

A well-chosen screenshot or image can greatly improve the readability and clarity of a doc. Too many images or an image that's tough to parse can really slow things down.

If you're not part of the docs team and you want to add an image to the docs site, create a GitHub issue.
If you're a New Relic employee, contact the @hero in the documentation Slack channel.

Add an image

We want to ensure that sensitive data does not appear in UI screenshots. That's why we recommend that you provide a permalink to a test account. Do not take a screenshot from your New Relic account.

Here are some things to keep in mind when you're creating an image:

Make sure your image provides useful information at a glance.
Ensure you follow the naming and import statement conventions.
Include a caption with helpful context for the image.
For screenshot captions, include the path in bold.
For video captions, include the approximate running time.
Do not link to an external image file. All images used in docs must be stored in our GitHub repo.
Our default is light mode. If an SME provides you with screenshots in dark mode, please request new ones in light mode. If you are unable to get light mode images, then any screenshot is better than no screenshot at all.

Important

Images are managed a little differently between .mdx files (content in src/content/docs) and .mdfiles (content in src/content/whats-new).

For .mdx files, images are stored in the src/images directory.
For .md files, such as "What's new" posts, images are stored in individual images directories at the root level of each taxonomy category. These images directories contain all the images used in the docs for that category.

To add or edit an image:

Place your image in the relevant directory (usually src/images unless you're working with What's New or release notes).
Continue with the following procedures to add or edit images:

Important

Markdown image syntax isn't supported for .mdx files on the New Relic docs site.

To embed an image in an .mdx file, you need to take two steps:

Insert an image import statement near the top of the .mdx file. Make sure the import statement has new lines above and below it.
Insert the image in the body of the document using the img tags.
Here's a snippet showing the import statement and img tags:
```
---
title: 'Example MDX file'
---

import syntheticsOverviewPage from 'images/synthetics_screenshot-full_overview-page.webp'

<img
  src={syntheticsOverviewPage}
  title="Synthetics UI overview"
  alt="An image showing an overview of the synthetic monitoring UI"
/>

Rest of file
```

Important

REACT image syntax (img) isn't supported for .md files.

Use Markdown to embed an image in an .md doc, such as a "What's new" post.

This is the basic structure:

![alt text](PATH_TO_IMAGE "Image title text")

Here's a completed example:

![An image showing an overview of the synthetic monitoring UI](./images/synthetics_screenshot-full_overview-page.webp 'Synthetics UI overview')

Image naming conventions and import statements

We follow a standard naming convention for import statements and image filenames. Generally rather than memorize the convention, you should create your image import statement automatically with the kkimport Keyboard Maestro macro.

Putting it all together, a complete import statement looks like this:

import apmTransactionTimesChart from 'images/apm_screenshot-full_transaction-times-chart.webp'

The import statement always comes at the top of the doc, right after the frontmatter. Separate multiple import statments with an empty line. For example:

---
title: Create smoother charts with sliding windows
metaDescription: Explains how to use the SLIDE BY clause with TIMESERIES to smooth out "spiky" charts.
redirects:
  - /docs/create-smoother-charts-sliding-windows
---

import queriesnrqlSlidebyWindowTimeSeries from 'images/queries-nrql_diagram_slide-by-window-time-series.webp'

import queriesnrqlNonSlidingWindowTimeSeries from 'images/queries-nrql_diagram_non-sliding-window-time-series.webp'

import queriesnrqlTimeseriesSpikyNRQLQueryBuilder from 'images/queries-nrql_screenshot-full_timeseries-spiky-NRQL-query-builder.webp'

import queriesnrqlTimeseriesSmoothedWithSlidebyNRQLQueryBuilder from 'images/queries-nrql_screenshot-full_timeseries-smoothed-with-slide-by-NRQL-query-builder.webp'

Sliding windows are a technique for generating charts using the `SLIDE BY` clause in conjunction with the `TIMESERIES` clause.

Write image captions

Descriptive captions help the reader know why the image matters. If it's a screenshot, it's helpful to include the path in bold in addition to a description. For example:

---
title: Abbreviated example file
---

import nr1DashboardsImages from 'images/nr1-dashboards.webp'

<img src={nr1DashboardsImages} alt="Dashboards in New Relic" title="Dashboards in New Relic" />

<figcaption>
  **[one.newrelic.com](https://one.newrelic.com/all-capabilities) > Dashboards**: Quickly create information-dense custom views into the data that matters most to you with dashboards in New Relic.
</figcaption>

For more help with captions and other supporting text around images, see Guidelines for explaining images.

Add an inline image (MDX)

To use an inline image:

Import the image at the top of the file.
Use the img tag in the file.
Add a class of inline to img.
Add any optional height/width in the style property.

If the inline image is being used as an icon, always describe it first. When you embed the icon image, follow the image with the word icon in the text. For example:

---
title: Abbreviated example of a file
---

import exampleIcon from 'images/example_icon_example-icon.webp'

Select your app's settings <img src={exampleIcon} class="inline" style={{height: "30px", width: "30px"}} alt="Multiple app names indicator in New Relic" title="Multiple apps name indicator in New Relic" /> icon.

Icons

You can choose from a variety of icons to include in your docs:

Feather icons (prefixed with 'fe-).
New Relic icons (prefixed with nr-).
Logos for third-party products (prefixed with logo-).

To see if we already have an icon you need, go to:

Feather.js for docs-website in GitHub: These are the Feather icons available in the docs-website project but are not included in the Gatsby theme.
Gatsby theme for docs-website in GitHub: This is a subset of Feather, New Relic, and product logo icons that are available across the developer and docs sites.

You can use any icons you need in the Gatsby theme or Feather. Currently these locations have separate, non-overlapping buckets of icons.

Insert icons as tag attributes

If your icon appears as an attribute inside another tag, prefix it with icon as in this example:

<LandingPageTileGrid>
  <LandingPageTile
    title="AWS Lambda"
    href="/docs/serverless-function-monitoring/aws-lambda-monitoring/get-started/monitoring-aws-lambda-serverless-monitoring"
    icon="logo-aws"
  >
</LandingPageTile>

Insert inline icons

If your icon appears inside running text, use the <Icon> component. Here are some examples:

Feather: <Icon name="fe-database" />
New Relic: <Icon name="nr-tdp" />
Logos: <Icon name="logo-apple" />

Install new Feather icons

If you don't see the icon you want in either the Gatsby theme for docs-website in GitHub or in the Feather.js for docs-website in GitHub, you can add a new icon to the Gatsby theme. You can also ask developers to add the icon you want.

Here's an example of adding a database icon:

Go to feathericons.com.
Download the database feather icon by clicking on the icon itself.
Once downloaded, open the SVG file in your text editor.
Copy the "guts" of the SVG, which is everything in between the <svg> tags. For example, if the SVG is <svg><path m="1"></path></svg>, then copy only the <path m="1"></path> portion.
Open the list of feather icons at src/@newrelic/gatsby-theme-newrelic/icons/feather.js.
Add an entry for database, and assign the code from the previous step to it.
If the icon has multiple paths, include the <> wrapper around it like you see with other icons.
Save the feather.js file.

The fe- prefix gets added automatically. Once that icon is added, you can use it with the icon component; for example, <Icon name="fe-database" />.

Add an image

Important

Embed image in `.mdx` file

Important

Embed image in `.md` file

Important

Update image in `.mdx` file

Update image in `.md` file

Image naming conventions and import statements

Image filenames

Image variable names in import statements

Example import statement

Write image captions

Add an inline image (MDX)

Icons

Insert icons as tag attributes

Insert inline icons

Install new Feather icons

Embed images

Add an image

Important

Embed image in .mdx file

Embed image in .md file

Update image in .mdx file

Update image in .md file

Image naming conventions and import statements

Image variable names in import statements

Example import statement

Write image captions

Add an inline image (MDX)

Icons

Insert icons as tag attributes

Insert inline icons

Install new Feather icons

Embed image in `.mdx` file

Embed image in `.md` file

Update image in `.mdx` file

Update image in `.md` file