Managing images

Learn how to add, modify, and remove images on Braze Docs. For general information about images, see About content management.

Prerequisites

If you haven’t already, complete the steps for Contributing to Braze Docs.

Adding a new image

Step 1: Add the image file

In your text editor, open assets > img. Generally, your new image should be added to the same directory as the other images on your page. However, you may use your best judgment. Confirm your new image follows the Braze Docs Style Guide, then add the PNG file to the relevant subdirectory.

1
2
3
4
5
braze-docs
└── assets
    └── img
        └── DIRECTORY
            └── FILE.png

Replace the following:

Your image file should be similar to the following:

1
2
3
4
5
braze-docs
└── assets
    └── img
        └── contributing 
            └── github_home_page.png

Step 2: Link to the image

In your Markdown file, link to your new image using the in-line syntax.

1
![ALT_TEXT.]({% image_buster /assets/img/DIRECTORY/IMAGE.png %})

Replace the following:

Your in-line image should be similar to the following:

1
![The form for creating a new pull request on GitHub.]({% image_buster /assets/img/contributing/getting_started/github_pull_request.png %})

Step 3: Set the image’s maximum width (optional)

You can set the image’s maximum width by appending the following Liquid code to your image link:

1
{: style="max-width:NUMBER%;"}

Replace NUMBER with the maximum width you’d like to set as a percentage. Your image link should be similar to the following:

1
![The form for creating a new pull request on GitHub.]({% image_buster /assets/img/contributing/getting_started/github_pull_request.png %}){: style="max-width:65%;"}

Updating an image

Step 1: Find the original reference

Open the relevant Markdown file and look for the old in-line or reference-style image link, which will be similar the following.

1
{% image_buster /assets/img/DIRECTORY/IMAGE.png %}

Step 2: Update the image

When updating an existing image, you can either add a new image file or replace the existing image file. Be sure your new image follows the Braze Docs Style Guide.

• Overwrite existing file (recommended): Use this method if the original image depicts accurate content, but is visually out-of-date, such as an image depicting old branding. This method reduces the total number of images stored in the Braze Docs repository.
• Add new file: Use this method if the original image depicts completely out-of-date content, such as an image depicting a deprecated feature or workflow.

• overwrite existing file
• add new file

1
2
3
4
5
braze-docs
└── assets
    └── img
        └── contributing 
            └── getting_started_with_github_select_start3.png

1
2
3
4
5
braze-docs
└── assets
    └── img
        └── DIRECTORY
            └── FILE.png

1
2
3
4
5
braze-docs
└── assets
    └── img
        └── contributing 
            └── github_home_page.png

Removing an image

To remove an image, open the relevant Markdown file and remove the in-line or reference-style image link. Do not delete the image file from the repository.