From c2edb2075b3eacfb5b1636f1c6f47b1d8167896c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Martin=20Ra=C4=8D=C3=A1k?= Date: Wed, 11 Dec 2024 16:01:20 +0100 Subject: [PATCH] Add more docs for using images (#4280) --- .env.example-full | 3 +++ site/README.md | 9 +++++++++ 2 files changed, 12 insertions(+) diff --git a/.env.example-full b/.env.example-full index 854f02e91c5..735d4a3f99e 100644 --- a/.env.example-full +++ b/.env.example-full @@ -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/". OPENAI_API_KEY= diff --git a/site/README.md b/site/README.md index 4b5aebab6c5..ecbede889df 100644 --- a/site/README.md +++ b/site/README.md @@ -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: ``` @@ -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