Images

Learn how to add, modify, and remove images on Braze Docs. For general information about images, see 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

When linking to your new image, you can either use in-line or reference-style syntax. In-line syntax prioritizes clarity, while reference-style syntax prioritizes readability.

• in-line
• reference-style

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

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

1
![ALT_TEXT.][REFERENCE_NUMBER]

1
![The form for creating a new pull request on GitHub.][10]

1
[REFERENCE_NUMBER]: {% image_buster /assets/img/DIRECTORY/IMAGE.png %}

1
[10]: {% image_buster /assets/img/contributing/getting_started/github_pull_request.png %}

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.