Skip to content

Commit

Permalink
Add more docs for using images
Browse files Browse the repository at this point in the history
  • Loading branch information
rakyi committed Dec 11, 2024
1 parent 5ab1b0b commit 415f4ea
Show file tree
Hide file tree
Showing 2 changed files with 12 additions and 0 deletions.
3 changes: 3 additions & 0 deletions .env.example-full
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,9 @@ R2_SECRET_ACCESS_KEY= # optional
GRAPHER_CONFIG_R2_BUCKET= # optional - for local dev set it to "owid-grapher-configs-staging"
GRAPHER_CONFIG_R2_BUCKET_PATH= # optional - for local dev set it to "devs/YOURNAME"

CLOUDFLARE_IMAGES_ACCOUNT_ID= # Available in Cloudflare, on the main "images" page.
CLOUDFLARE_IMAGES_API_KEY= # Generate your own with read and write permissions, can be the same as other Cloudflare API keys, e.g. R2_SECRET_ACCESS_KEY.
CLOUDFLARE_IMAGES_URL= # Available in Cloudflare, on the main "images" page. Format must be "https://imagedelivery.net/<id>".

OPENAI_API_KEY=

Expand Down
9 changes: 9 additions & 0 deletions site/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,10 @@ This content is only updated in an environment's database when someone presses "

## Images

To use images locally, you need to set the `CLOUDFLARE_IMAGES_ACCOUNT_ID`,
`CLOUDFLARE_IMAGES_API_KEY`, and `CLOUDFLARE_IMAGES_URL` in your `.env` file.
See `.env.example-full` for the format.

Image blocks can be added to gdocs via the follow archie syntax:

```
Expand All @@ -34,6 +38,11 @@ filename: my_image.png

where `my_image.png` is an image that has been uploaded via the `/admin/images` view in the admin client, and thus exists in Cloudflare Images.

> [!CAUTION]
> Cloudflare Images don't have separate environments for production, staging and
> dev, so be careful not to upload images that are only available in one
> environment and even more **careful when deleting images**.
We store information about the image's dimensions and alt text in the database, which is shared via React context to any component that needs to render them. See `Image.tsx` for the (many) implementation details.

## Data Catalog
Expand Down

0 comments on commit 415f4ea

Please sign in to comment.