• EnglishEspañol日本語한국어Português
  • EntrarComeçar agora

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.

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 dark mode. If a subject matter expert provides you with screenshots in light mode, please request new ones in dark mode. If you are unable to get dark mode images, then any screenshot is better than no screenshot at all.

To add or edit an image:

  1. Place your image in the root of static/images/.

  2. Continue with the following procedures to add or edit images:

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:

<img
title="Screenshot showing the Overview dashboard"
alt="Screenshot showing the Overview dashboard"
src="/images/kubernetes_screenshot-full_cluster-dashboard-detail.webp"
/>
<figcaption>
Go to <DNT>**[one.newrelic.com > All capabilities](https://one.newrelic.com/all-capabilities) > Kubernetes**</DNT>. Select your cluster and click <DNT>**Overview Dashboard**</DNT> in the left navigation pane. It shows useful overview data about the status and performance of the cluster and its containerized workloads.
</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:

  • Use the img tag in the file
  • The src attribute contains the image path: src="/images/IMAGE_NAME.webp"
  • 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
---
Select your app's settings <img src="/images/example_icon_example-icon.webp" class="inline" style={{height: "30px", width: "30px"}} alt="Multiple app names indicator in New Relic" title="Multiple apps name indicator in New Relic" /> icon.

Image sizing

By default all MDX images are given a max height of 550px to prevent vertical images from appearing too large within content.

If you have an image that needs to be taller than 550px, you can set the unbound class in the img attributes.

<img
class="unbound"
title=""
alt=""
src=""
/>

Note: Some images are using a set width="n%;" in the img attributes. This will automatically apply the unbound class and remove the default image height restriction because this causes the image to stretch and not re-size proportionally.

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:

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:

  1. Go to feathericons.com.
  2. Download the database feather icon by clicking on the icon itself.
  3. Once downloaded, open the SVG file in your text editor.
  4. 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.
  5. Open the list of feather icons at src/@newrelic/gatsby-theme-newrelic/icons/feather.js.
  6. Add an entry for database, and assign the code from the previous step to it.
  7. If the icon has multiple paths, include the <> wrapper around it like you see with other icons.
  8. 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" />.

Handling image refactor PR conflicts

Here us a quick look at the contributing changes that went into effect after our image refactor and how to update your file changes in any outstanding PR's.

Make sure you pull in the latest from develop and then update any image related files in your changes:

Adding images to the repo:

Old image convention:

images used to be in ./src/images

├──src/
│ └──content/
│ │ └──docs/
│ │ └── example-page.mdx
│ └──images/
│ └── example-image.webp

New image convention:

images are now in ./static/images

├──src/
│ └──content/
│ └──docs/
│ └── example-page.mdx
├──static/
│ └──images/
│ └── example-image.webp

Using the image in an MDX file

Old image convention:

Previously, we had to import our image paths as a variable then use that variable as the <img> source.

import exampleImage from 'images/example-image.webp'
<img
title="Image title."
alt="Alternate text."
src={exampleImage}
/>

New image convention:

Now the image source is simply the path to the image relative to the static folder:

<img
title="Image title."
alt="Alternate text."
src="/images/example-image.webp"
/>

Using the image in a MD file

Using images in markdown is almost the same as before. We just changed the path used slightly:

Old image convention:

./images

![Image title.](./images/kinesis_data_firehose.webp "Alternate text.")

New image convention:

/images

![Image title.](/images/kinesis_data_firehose.webp "Alternate text.")

Local builds

Follow these steps to resolve errors and failed builds when running your changes locally after you have update your branch with the latest from develop:

  1. update any of your image files and code to the new convention like shown above
  2. run nvm use to make sure you are on the correct node version
  3. run yarn to install the necessary packages
  4. run yarn clean to wipe away any cached images from old builds
  5. run yarn start
Copyright © 2024 New Relic Inc.

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.