Merge pull request #263 from flotiq/feature/24755-screens-update

#24755 screens update
flotiq · Aug 1, 2024 · c4d72c2 · c4d72c2
2 parents d5ab87d + baa0c9c
commit c4d72c2
Show file tree

Hide file tree

Showing 226 changed files with 135 additions and 132 deletions.
diff --git a/README.md b/README.md
@@ -35,7 +35,7 @@ To start server use:
 ```bash
 # Use SOURCE_EDITOR_URL variable to point to speciffic dashboard url. By default, SOURCE_EDITOR_URL=https://editor.flotiq.com is used.
 bash .github/scripts/get-plugins-docs.sh # Pull dynamically generated plugin docs. 
-mkdocs serve # Start devlopment server
+mkdocs serve # Start devlopment server. Use --dirtyreload option to speed up reloading, but be aware, that this might break navigation on the preview.
 ```
 
 After that, the documentation should be available on http://localhost:4000.

diff --git a/docs/API/dynamic-content-api.md b/docs/API/dynamic-content-api.md
@@ -19,7 +19,7 @@ Part of the Content API are the beautiful API docs, along with code samples to s
 
 There are 3 important parts of the API documentation that Flotiq provides for you:
 
-![](images/dynamic-content-api-docs.png)
+![](images/dynamic-content-api-docs-annotated.png){: .border}
 
 1. Every time you create a Content Type Definition - your API is extended with endpoints that support this new Content Type.
 2. The descriptions of these endpoints contain all the information regarding the structure and constraints of the Content Type you defined.
@@ -45,6 +45,6 @@ We currently support the following SDKs:
 
 In a similar fashion - we also provide a downloadable Postman collection, which fully describes your entire Content API. 
 
-![](images/postman.jpeg)
+![](images/postman.jpeg){: .border}
 
 Read more on how to configure Postman to work with Flotiq in [API access → Postman](../#postman)
diff --git a/docs/API/generate-package.md b/docs/API/generate-package.md
@@ -7,7 +7,7 @@ description: Flotiq provides SDKs, or client libraries, to access your Content,
 
 On your Flotiq dashboard, you can find links to download client libraries (SDK packages) for several frameworks and languages.
 
-![Available frameworks and languages](images/frameworkslogos.png)
+![Available frameworks and languages](images/frameworkslogos.png){: .width25 .center .border}
 
 Currently supported generators are:
 

diff --git a/docs/API/generate-package/sdk-nodejs.md b/docs/API/generate-package/sdk-nodejs.md
@@ -7,7 +7,7 @@ description: Flotiq provides SDK NodeJS to access your Content.
 
 On your Flotiq dashboard, you can find link to download client library SDK NodeJS.
 
-![Available frameworks and languages](../images/frameworkslogos-nodejs.png)
+![Available frameworks and languages](../images/frameworkslogos-nodejs.png){: .width25 .center .border}
 
 These package is automatically generated every time you modify your Content Type definitions, just like your API documentation.
 

diff --git a/docs/API/images/api-keys-menu.png b/docs/API/images/api-keys-menu.png
diff --git a/docs/API/images/api-keys.png b/docs/API/images/api-keys.png
diff --git a/docs/API/images/api-keys_1.png b/docs/API/images/api-keys_1.png
diff --git a/docs/API/images/api-keys_2.png b/docs/API/images/api-keys_2.png
diff --git a/docs/API/images/api-keys_3.png b/docs/API/images/api-keys_3.png
diff --git a/docs/API/images/api-keys_4.png b/docs/API/images/api-keys_4.png
diff --git a/docs/API/images/datasource/datasource-page-picker.png b/docs/API/images/datasource/datasource-page-picker.png
diff --git a/docs/API/images/datasource/datasource-page-result.png b/docs/API/images/datasource/datasource-page-result.png
diff --git a/docs/API/images/datasource/datasource-page-usage.png b/docs/API/images/datasource/datasource-page-usage.png
diff --git a/docs/API/images/datasource/datasource-page.png b/docs/API/images/datasource/datasource-page.png
diff --git a/docs/API/images/dynamic-content-api-docs-annotated.png b/docs/API/images/dynamic-content-api-docs-annotated.png
diff --git a/docs/API/images/dynamic-content-api-docs.png b/docs/API/images/dynamic-content-api-docs.png
diff --git a/docs/API/images/edit-content-type-definitions.png b/docs/API/images/edit-content-type-definitions.png
diff --git a/docs/API/images/example-response.png b/docs/API/images/example-response.png
diff --git a/docs/API/images/flotiq.png b/docs/API/images/flotiq.png
diff --git a/docs/API/images/frameworkslogos-nodejs.png b/docs/API/images/frameworkslogos-nodejs.png
diff --git a/docs/API/images/frameworkslogos.png b/docs/API/images/frameworkslogos.png
diff --git a/docs/API/images/personalizacja.jpg b/docs/API/images/personalizacja.jpg
diff --git a/docs/API/images/personalizacja2.jpg b/docs/API/images/personalizacja2.jpg
diff --git a/docs/API/images/personalizacja3.jpg b/docs/API/images/personalizacja3.jpg
diff --git a/docs/API/images/small_logo.png b/docs/API/images/small_logo.png
diff --git a/docs/API/images/user-profile.png b/docs/API/images/user-profile.png
diff --git a/docs/API/index.md b/docs/API/index.md
@@ -3,9 +3,9 @@
 
 All API endpoints that are published in Flotiq are currently using an API-key authorization method. 
 
-There are two types of API keys - [Application Keys](#application-api-keys) and [User Defined Keys](#user-defined-api-keys). Both types of keys can be retrieved from the API Keys page in the Flotiq Panel (click on your avatar to open the menu):
+There are two types of API keys - [Application Keys](#application-api-keys) and [User Defined Keys](#user-defined-api-keys). Both types of keys can be retrieved from the API Keys page in the Flotiq Panel:
 
-![](images/user-profile.png){: .center .border}
+![](images/api-keys-menu.png){: .center .width25 .border}
 
 All keys restrict access to not only CRUD of the Content Objects, but also to their hydration and search; the same restrictions apply to GraphQL endpoint.
 

diff --git a/docs/API/workflow/content-publishing-workflow.md b/docs/API/workflow/content-publishing-workflow.md
@@ -44,7 +44,7 @@ Custom workflows can be defined in Flotiq, for example a simple editorial workfl
 
 with the following possible transitions
 
-![](./images/publishing-workflow.svg)
+![](./images/publishing-workflow.svg){: .center}
 
 can be used to help teams curate content, manage publication and archiving of content.
 

diff --git a/docs/Deep-Dives/Building-a-blog-in-3-minutes.md b/docs/Deep-Dives/Building-a-blog-in-3-minutes.md
@@ -14,7 +14,7 @@ First off - you will need to define how your content will be structured in Floti
 
 We labeled the new Content Type `Blog Post` and gave it an API name `blogpost`. Once you do that - you'll have to add the properties that will be defined for each of the entries. The `Add property` button will open a form, where you will define the characteristics of each of the fields (like if it's required, what kind of a field it is, etc.):
 
-![](images/building-a-blog-in-3-minutes/3-minute-blog-content-type-title-field.png){: .center .width75 }
+![](../panel/images/AddContentTypeDefinitionsTitle.png)
 
 
 Here are the details of the fields we added for this tutorial:
@@ -29,13 +29,13 @@ Here are the details of the fields we added for this tutorial:
 
 and this is how the Content Type Editor should look like in the end:
 
-![](images/building-a-blog-in-3-minutes/3-minute-blog-content-type-all-fields.png){: .center .width75 }
+![](../panel/images/AddContentTypeDefinitions.png)
 
 If you're happy with the result - click the `Save` button and navigate to `Content` → `Blog Posts` in the side menu. 
 
 !!! hint
     At this point you can also verify the result of your work in the [Dynamic Content API](../API/dynamic-content-api.md) - head to you API docs and see how the API has automatically expanded to support your new Content Type:
-    ![](images/building-a-blog-in-3-minutes/3-minute-blog-content-api.png)
+    ![](../API/images/dynamic-content-api-docs.png)
 
     Three important things to note here:
 
@@ -52,7 +52,7 @@ If you're happy with the result - click the `Save` button and navigate to `Conte
 
 It's now time to write your first post! The first time you go to the `Blog Posts` item in the `Content` menu you will be prompted with a screen encouraging to create your first Content Object, go ahead and click the `Add new Blog Post object` button. You will see an empty form that is automatically generated based on the Content Type Definition you provided in the previous step. Fill it in, however you like!
 
-![](images/building-a-blog-in-3-minutes/3-minute-blog-first-post.png){: .center .width75 }
+![](../panel/images/AddBlogPost.png){: .border }
 
 That's it. Now make sure you have your [read-only API key](../API/index.md) in your clipboard!
 

diff --git a/docs/Deep-Dives/images/add-ctd-1.png b/docs/Deep-Dives/images/add-ctd-1.png
diff --git a/docs/Deep-Dives/images/building-a-blog-in-3-minutes/3-minute-blog-content-api.png b/docs/Deep-Dives/images/building-a-blog-in-3-minutes/3-minute-blog-content-api.png
diff --git a/...s/images/building-a-blog-in-3-minutes/3-minute-blog-content-type-all-fields.png b/...s/images/building-a-blog-in-3-minutes/3-minute-blog-content-type-all-fields.png
diff --git a/.../images/building-a-blog-in-3-minutes/3-minute-blog-content-type-title-field.png b/.../images/building-a-blog-in-3-minutes/3-minute-blog-content-type-title-field.png
diff --git a/docs/Deep-Dives/images/building-a-blog-in-3-minutes/3-minute-blog-first-post.png b/docs/Deep-Dives/images/building-a-blog-in-3-minutes/3-minute-blog-first-post.png
diff --git a/docs/Deep-Dives/images/cloudflare-workers-add-script.png b/docs/Deep-Dives/images/cloudflare-workers-add-script.png
diff --git a/docs/Deep-Dives/images/cloudflare-workers-launch-editor.png b/docs/Deep-Dives/images/cloudflare-workers-launch-editor.png
diff --git a/docs/Deep-Dives/images/create-definition-recipe.png b/docs/Deep-Dives/images/create-definition-recipe.png
diff --git a/docs/Deep-Dives/images/flotiq-blog.png b/docs/Deep-Dives/images/flotiq-blog.png
diff --git a/.../images/jamstack-recipes-complex-data-structures/add-definition-type-recipe.png b/.../images/jamstack-recipes-complex-data-structures/add-definition-type-recipe.png
diff --git a/...mages/jamstack-recipes-complex-data-structures/recipe-object-scrambled-eggs.png b/...mages/jamstack-recipes-complex-data-structures/recipe-object-scrambled-eggs.png
diff --git a/docs/Deep-Dives/images/metaapi/original-size/img-0.jpg b/docs/Deep-Dives/images/metaapi/original-size/img-0.jpg
diff --git a/docs/Deep-Dives/images/metaapi/original-size/img-0.png b/docs/Deep-Dives/images/metaapi/original-size/img-0.png
diff --git a/docs/Deep-Dives/images/metaapi/original-size/meta-1.png b/docs/Deep-Dives/images/metaapi/original-size/meta-1.png
diff --git a/docs/Deep-Dives/images/metaapi/original-size/meta-10.png b/docs/Deep-Dives/images/metaapi/original-size/meta-10.png
diff --git a/docs/Deep-Dives/images/metaapi/original-size/meta-11.png b/docs/Deep-Dives/images/metaapi/original-size/meta-11.png
diff --git a/docs/Deep-Dives/images/metaapi/original-size/meta-13.png b/docs/Deep-Dives/images/metaapi/original-size/meta-13.png
diff --git a/docs/Deep-Dives/images/metaapi/original-size/meta-14.png b/docs/Deep-Dives/images/metaapi/original-size/meta-14.png
diff --git a/docs/Deep-Dives/images/metaapi/original-size/meta-15.png b/docs/Deep-Dives/images/metaapi/original-size/meta-15.png
diff --git a/docs/Deep-Dives/images/metaapi/original-size/meta-16.png b/docs/Deep-Dives/images/metaapi/original-size/meta-16.png
diff --git a/docs/Deep-Dives/images/metaapi/original-size/meta-17.png b/docs/Deep-Dives/images/metaapi/original-size/meta-17.png
diff --git a/docs/Deep-Dives/images/metaapi/original-size/meta-17a.png b/docs/Deep-Dives/images/metaapi/original-size/meta-17a.png
diff --git a/docs/Deep-Dives/images/metaapi/original-size/meta-18.png b/docs/Deep-Dives/images/metaapi/original-size/meta-18.png
diff --git a/docs/Deep-Dives/images/metaapi/original-size/meta-2.png b/docs/Deep-Dives/images/metaapi/original-size/meta-2.png
diff --git a/docs/Deep-Dives/images/metaapi/original-size/meta-3.png b/docs/Deep-Dives/images/metaapi/original-size/meta-3.png
diff --git a/docs/Deep-Dives/images/metaapi/original-size/meta-4.png b/docs/Deep-Dives/images/metaapi/original-size/meta-4.png
diff --git a/docs/Deep-Dives/images/metaapi/original-size/meta-5.png b/docs/Deep-Dives/images/metaapi/original-size/meta-5.png
diff --git a/docs/Deep-Dives/images/metaapi/original-size/meta-6.png b/docs/Deep-Dives/images/metaapi/original-size/meta-6.png
diff --git a/docs/Deep-Dives/images/metaapi/original-size/meta-7.png b/docs/Deep-Dives/images/metaapi/original-size/meta-7.png
diff --git a/docs/Deep-Dives/images/metaapi/original-size/meta-8.png b/docs/Deep-Dives/images/metaapi/original-size/meta-8.png
diff --git a/docs/Deep-Dives/images/metaapi/original-size/meta-9.png b/docs/Deep-Dives/images/metaapi/original-size/meta-9.png
diff --git a/docs/Deep-Dives/images/metaapi/original-size/meta-about.png b/docs/Deep-Dives/images/metaapi/original-size/meta-about.png
diff --git a/docs/Deep-Dives/images/metaapi/original-size/meta-flotiq-1.png b/docs/Deep-Dives/images/metaapi/original-size/meta-flotiq-1.png
diff --git a/docs/Deep-Dives/images/metaapi/original-size/meta-flotiq-2.png b/docs/Deep-Dives/images/metaapi/original-size/meta-flotiq-2.png
diff --git a/docs/Deep-Dives/images/metaapi/original-size/meta-flotiq-3.png b/docs/Deep-Dives/images/metaapi/original-size/meta-flotiq-3.png
diff --git a/docs/Deep-Dives/images/metaapi/original-size/meta-flotiq-4.png b/docs/Deep-Dives/images/metaapi/original-size/meta-flotiq-4.png
diff --git a/docs/Deep-Dives/images/metaapi/original-size/meta-spr-1.png b/docs/Deep-Dives/images/metaapi/original-size/meta-spr-1.png
diff --git a/docs/Deep-Dives/images/mobile-expo-product-showcase-1.png b/docs/Deep-Dives/images/mobile-expo-product-showcase-1.png
diff --git a/docs/Deep-Dives/images/mobile-expo-product-showcase-2.png b/docs/Deep-Dives/images/mobile-expo-product-showcase-2.png
diff --git a/docs/Deep-Dives/images/mobile-expo-product-showcase-3.png b/docs/Deep-Dives/images/mobile-expo-product-showcase-3.png
diff --git a/docs/Deep-Dives/images/mobile-expo-product-showcase/create-api-key.png b/docs/Deep-Dives/images/mobile-expo-product-showcase/create-api-key.png
diff --git a/docs/Deep-Dives/images/mobile-expo-product-showcase/create-product-ctd-2.png b/docs/Deep-Dives/images/mobile-expo-product-showcase/create-product-ctd-2.png
diff --git a/docs/Deep-Dives/images/mobile-expo-product-showcase/create-product-ctd.png b/docs/Deep-Dives/images/mobile-expo-product-showcase/create-product-ctd.png
diff --git a/docs/Deep-Dives/images/snipcart-gatsby-demo/flotiq-user-api-key.png b/docs/Deep-Dives/images/snipcart-gatsby-demo/flotiq-user-api-key.png
diff --git a/.../Deep-Dives/images/snipcart-gatsby-demo/predefined-content-type-definitions.png b/.../Deep-Dives/images/snipcart-gatsby-demo/predefined-content-type-definitions.png
diff --git a/...ives/images/todomvc-react-headless-cms/3a687849-d11c-4772-a696-50d7306b3dbe.png b/...ives/images/todomvc-react-headless-cms/3a687849-d11c-4772-a696-50d7306b3dbe.png
diff --git a/...ives/images/todomvc-react-headless-cms/c39442a7-138b-4c71-b63c-925f8224a63f.png b/...ives/images/todomvc-react-headless-cms/c39442a7-138b-4c71-b63c-925f8224a63f.png
diff --git a/docs/Deep-Dives/jamstack-recipes-website-complex-data-structures.md b/docs/Deep-Dives/jamstack-recipes-website-complex-data-structures.md
@@ -142,7 +142,7 @@ If you'd like to dig a little deeper into this recipe website, here's your quick
 
     Create your [Flotiq.com](https://flotiq.com) account. Next, create the `Recipe` Content Type:
 
-    ![Recipe content type in flotiq](images/jamstack-recipes-complex-data-structures/add-definition-type-recipe.png){: .center .width75 .border}
+    ![Recipe content type in flotiq](../panel/images/definition-builder-create-recipe.png){: .center .width75 .border}
 
     _Note: You can also create `Recipe` using [Flotiq REST API](https://flotiq.com/docs/API/)._ 
 

diff --git a/docs/Deep-Dives/mobile-expo-product-showcase.md b/docs/Deep-Dives/mobile-expo-product-showcase.md
@@ -89,10 +89,10 @@ The screen you will see allows you to connect with your Flotiq account, but we w
 Now it's time to create the Content Type definition in the Flotiq. You can use our predefined
 types to speed up the modelling process. You can update the Content Type definition in further development.
 
-Go to the Content Type definitions tab and choose `Products`.
+Go to the Content Type definitions tab and choose `Product`.
 Save your Content Type definition. Now you can add your products to the Flotiq.
 
-![](images/mobile-expo-product-showcase/create-product-ctd.png){: .border}
+![](../panel/images/definition-builder-create-product.png){: .border}
 
 ## Code updates
 

diff --git a/docs/Deep-Dives/node-js-ecommerce-snipcart-gatsby-demo.md b/docs/Deep-Dives/node-js-ecommerce-snipcart-gatsby-demo.md
@@ -35,7 +35,7 @@ The most crucial step - you have to tell Flotiq what kind of data you want to st
 
 When you first log in - it's going to be pretty empty. No content, nothing. Head over to the `Type definitions` screen.
 
-![Predefined Content Type Definitions](images/snipcart-gatsby-demo/predefined-content-type-definitions.png){: .center .border}
+![Predefined Content Type Definitions](../panel/images/TypeDefinitionsTiles.png){: .center .width75 .border}
 
 
 Here you find a list of simple boilerplate content types, which are a great start if you're in a hurry. 
@@ -92,7 +92,7 @@ SNIPCART_API_KEY="YOUR SNIPCART API KEY"
 
 You can find your Flotiq API keys in `API Keys` section:
 
-![Flotiq user API key](images/snipcart-gatsby-demo/flotiq-user-api-key.png){: .border}
+![Flotiq user API key](../API/images/api-keys-menu.png){: .border .width25 .center}
 
 !!! caution
     We strongly recommend that you create a scoped API key (read more about [API access](../API/index.md)), but for development, you can use the default Read Only key provided in the interface. 

diff --git a/docs/Flotiq-Mobile-Expo/images/logo-github.png b/docs/Flotiq-Mobile-Expo/images/logo-github.png
diff --git a/docs/Universe/deployment/images/flotiq-api-keys-button.png b/docs/Universe/deployment/images/flotiq-api-keys-button.png
diff --git a/docs/Universe/deployment/images/flotiq-api-keys-gui.png b/docs/Universe/deployment/images/flotiq-api-keys-gui.png
diff --git a/docs/Universe/deployment/netlify-nextjs.md b/docs/Universe/deployment/netlify-nextjs.md
@@ -84,11 +84,14 @@ The essential two environment variables needed for every Gatsby project are **FL
 
 For example, if you're using the [Gatsby and Snipcart starter](https://github.com/flotiq/gatsby-starter-products) you will also provide the Snipcart API key. The project Readme always described the needed variables.
 
-To obtain the Flotiq API key - in your Flotiq account, click your profile icon in the sidebar and go to **API keys**: ![](images/flotiq-api-keys-button.png){: .center .width25 .border}
+To obtain the Flotiq API key - in your Flotiq account, click `API keys` in the sidebar:
+
+ ![](../../API/images/api-keys-menu.png){: .center .width25 .border}
+
 
 You can either select the application-wide read-only key:
 
- ![](images/flotiq-api-keys-gui.png){: .center .width75 .border}
+ ![](../../API/images/api-keys_1.png){: .center .width75 .border}
 
 Or, as a safer option, create a scoped read-only API key that will only be used for the Netlify build. Read more about [Flotiq API access](https://flotiq.com/docs/API/).
 

diff --git a/docs/Universe/deployment/vercel-gatsby.md b/docs/Universe/deployment/vercel-gatsby.md
@@ -102,15 +102,14 @@ The essential environment variable needed for every Gatsby project is **GATSBY_F
 
 For example, if you're using the [Gatsby and Snipcart starter](https://github.com/flotiq/gatsby-starter-products) you will also provide the Snipcart API key. The project Readme always describes the needed variables.
 
-To obtain the Flotiq API key - go to your Flotiq account and click your profile icon in the sidebar and go to [API keys](https://editor.flotiq.com/api-keys):
+To obtain the Flotiq API key - in your Flotiq account, click `API keys` in the sidebar:
 
-
- ![](images/flotiq-api-keys-button.png){: .center .width25 .border}
+ ![](../../API/images/api-keys-menu.png){: .center .width25 .border}
 
 
 You can either select the application-wide read-only key:
 
- ![](images/flotiq-api-keys-gui.png){: .center .width75 .border}
+ ![](../../API/images/api-keys_1.png){: .center .width75 .border}
 
 
 Or, as a safer option, create a scoped read-only API key that will only be used for the Vercel build. Read more about [Flotiq API access](https://flotiq.com/docs/API/).

diff --git a/docs/Universe/deployment/vercel-nextjs.md b/docs/Universe/deployment/vercel-nextjs.md
@@ -101,15 +101,14 @@ The essential two environment variables needed for every Gatsby project are `FLO
 
 For example, if you're using the [Gatsby and Snipcart starter](https://github.com/flotiq/gatsby-starter-products) you will also provide the Snipcart API key. The project Readme always described the needed variables.
 
-To obtain the Flotiq API key - in your Flotiq account, click your profile icon in the sidebar and go to `API keys`:
+To obtain the Flotiq API key - in your Flotiq account, click `API keys` in the sidebar:
 
- ![](images/flotiq-api-keys-button.png){: .center .width25 .border}
+ ![](../../API/images/api-keys-menu.png){: .center .width25 .border}
 
 
 You can either select the application-wide read-only key:
 
-
- ![](images/flotiq-api-keys-gui.png){: .center .width75 .border}
+ ![](../../API/images/api-keys_1.png){: .center .width75 .border}
 
 
 Or, as a safer option, create a scoped read-only API key that will only be used for the Vercel build. Read more about [Flotiq API access](https://flotiq.com/docs/API/).

diff --git a/docs/Universe/images/gatsby/gatsby-starters.png b/docs/Universe/images/gatsby/gatsby-starters.png
diff --git a/docs/Universe/images/n8n/add_gmail_node.png b/docs/Universe/images/n8n/add_gmail_node.png
diff --git a/docs/Universe/images/n8n/example_data.png b/docs/Universe/images/n8n/example_data.png
diff --git a/docs/Universe/images/n8n/example_data_n8n.png b/docs/Universe/images/n8n/example_data_n8n.png
diff --git a/docs/Universe/images/n8n/webhook_params.png b/docs/Universe/images/n8n/webhook_params.png
diff --git a/docs/Universe/images/nextjs/nextjs-starters.png b/docs/Universe/images/nextjs/nextjs-starters.png
diff --git a/docs/index.md b/docs/index.md
@@ -36,7 +36,7 @@ There are 2 primary ways to interact with Flotiq: 1. through the [user interface
 
 Data model in Flotiq is created by adding one or more Content Type Definitions (we often refer to them as CTDs). CTDs are a key part of the system, where you - the user - describe the content (data model) you will be storing in Flotiq. The [Content Type builder](panel/content-types.md) is the tool we provide for you to easily define your Content Types, using a graphical User Interface. Type Definitions are like classes in object-oriented programming, they describe object properties. 
 
-![](panel/images/EditContentTypeDefinitions.png)
+![](panel/images/EditContentTypeDefinitions.png){.center .width50 .border}
 
 Read more about how to use the Content Type editor in the [Panel docs](panel/content-types.md)
 

diff --git a/docs/panel/Plugins/Gatsby-cloud-integration.md b/docs/panel/Plugins/Gatsby-cloud-integration.md
@@ -85,7 +85,7 @@ For example, if you're using the [Gatsby and Snipcart starter](https://github.co
 
 To obtain the Flotiq API key - in your Flotiq account, click your profile icon in the sidebar and go to `API keys`:
 
-![Access Flotiq API keys](../../API/images/user-profile.png){: .center .width25 .border}
+![Access Flotiq API keys](../../API/images/api-keys-menu.png){: .center .width25 .border}
 
 You can either select the application-wide read-only key:
 

diff --git a/docs/panel/Plugins/images/netlify/netlify-plugin-settings.png b/docs/panel/Plugins/images/netlify/netlify-plugin-settings.png