style: migrate image assets to content-domain layout and align docs with new image rules (#747)

* docs: add image rules to style and formatting guides

* refactor: migrate images to content-domain folder structure

* docs: align image syntax and alt text with new rules across languages

Author: RiskeyL

en/develop-plugin/dev-guides-and-walkthroughs/agent-strategy-plugin.mdx

@@ -156,7 +156,9 @@ extra:
 
 Once you’ve configured these parameters, the plugin will automatically generate a user-friendly interface so you can easily manage them:
 
-![Agent Strategy Plugin UI](https://assets-docs.dify.ai/2025/01/d011e2eba4c37f07a9564067ba787df8.png)
+<Frame>
+  ![Agent Strategy Plugin UI](https://assets-docs.dify.ai/2025/01/d011e2eba4c37f07a9564067ba787df8.png)
+</Frame>
 
 #### 2.2 Retrieving Parameters and Execution
 
@@ -215,7 +217,9 @@ To view the complete functionality implementation, please refer to the Example C
 
 This code achieves the following functionality: after a user inputs a command, the Agent strategy plugin automatically calls the LLM, constructs the necessary parameters for tool invocation based on the generated results, and enables the model to flexibly dispatch integrated tools to efficiently complete complex tasks.
 
-![Request parameters for generating tools](https://assets-docs.dify.ai/2025/01/01e32c2d77150213c7c929b3cceb4dae.png)
+<Frame>
+  ![Request Parameters for Generating Tools](https://assets-docs.dify.ai/2025/01/01e32c2d77150213c7c929b3cceb4dae.png)
+</Frame>
 
 ### 4. Handle a Tool
 
@@ -257,7 +261,9 @@ for tool_call_id, tool_call_name, tool_call_args in tool_calls:
 
 With this in place, your Agent Strategy Plugin can automatically perform **Function Calling**—for instance, retrieving the current time.
 
-![Tool Invocation](https://assets-docs.dify.ai/2025/01/80e5de8acc2b0ed00524e490fd611ff5.png)
+<Frame>
+  ![Tool Invocation](https://assets-docs.dify.ai/2025/01/80e5de8acc2b0ed00524e490fd611ff5.png)
+</Frame>
 
 ### 5. Creating Logs
 
@@ -295,7 +301,9 @@ yield self.finish_log_message(
 
 When the setup is complete, the workflow log will output the execution results:
 
-![Agent Output execution results](https://assets-docs.dify.ai/2025/01/96516388a4fb1da9cea85fc1804ff377.png)
+<Frame>
+  ![Agent Output Execution Results](https://assets-docs.dify.ai/2025/01/96516388a4fb1da9cea85fc1804ff377.png)
+</Frame>
 
 If multiple rounds of logs occur, you can structure them hierarchically by setting a `parent` parameter in your log calls, making them easier to follow.
 
@@ -1038,7 +1046,9 @@ class BasicAgentAgentStrategy(AgentStrategy):
 
 After finalizing the plugin’s declaration file and implementation code, run `python -m main` in the plugin directory to restart it. Next, confirm the plugin runs correctly. Dify offers remote debugging—go to **Plugin Management** to obtain your debug key and remote server address.
 
-![](https://assets-docs.dify.ai/2024/12/053415ef127f1f4d6dd85dd3ae79626a.png)
+<Frame>
+  ![Finalizing the Plugin’S Declaration File and Implementation Code, Run Python -M](https://assets-docs.dify.ai/2024/12/053415ef127f1f4d6dd85dd3ae79626a.png)
+</Frame>
 
 Back in your plugin project, copy `.env.example` to `.env` and insert the relevant remote server and debug key info.
 
@@ -1056,7 +1066,9 @@ python -m main
 
 You’ll see the plugin installed in your Workspace, and team members can also access it.
 
-![Browser Plugins](https://assets-docs.dify.ai/2025/01/c82ec0202e5bf914b36e06c796398dd6.png)
+<Frame>
+  ![Browser Plugins](https://assets-docs.dify.ai/2025/01/c82ec0202e5bf914b36e06c796398dd6.png)
+</Frame>
 
 ### Packaging the Plugin (Optional)
 

en/develop-plugin/dev-guides-and-walkthroughs/creating-new-model-provider.mdx

@@ -30,7 +30,9 @@ dify plugin init
 
 Select the `LLM` type plugin template from the available options. This template provides a complete code structure for model integration.
 
-![Plugin type: llm](https://assets-docs.dify.ai/2024/12/8efe646e9174164b9edbf658b5934b86.png)
+<Frame>
+  ![Plugin Type: LLM](https://assets-docs.dify.ai/2024/12/8efe646e9174164b9edbf658b5934b86.png)
+</Frame>
 
 ### Configure Plugin Permissions
 
@@ -40,7 +42,9 @@ For a model provider plugin, configure the following essential permissions:
 * **LLM** - Permission for large language model functionality
 * **Storage** - Permission for file operations (if needed)
 
-![Model Plugin Permission](https://assets-docs.dify.ai/2024/12/10f3b3ee6c03a1215309f13d712455d4.png)
+<Frame>
+  ![Model Plugin Permission](https://assets-docs.dify.ai/2024/12/10f3b3ee6c03a1215309f13d712455d4.png)
+</Frame>
 
 ### Directory Structure Overview
 

en/develop-plugin/dev-guides-and-walkthroughs/datasource-plugin.mdx

@@ -29,7 +29,9 @@ Each data source plugin type supports multiple data sources. For example:
 
 The relationship between data source types and data source plugin types is illustrated below.
 
-![](/images/data_source_type.png)
+<Frame>
+  ![Data Source Type](/images/develop-plugin/dev-guide/data-source-type.png)
+</Frame>
 
 ## Develop a Data Source Plugin
 
@@ -41,7 +43,9 @@ You can use the scaffolding command-line tool to create a data source plugin by
 dify plugin init
 ```
 
-![](/images/datasource_plugin_init.png)
+<Frame>
+  ![Datasource Plugin Init](/images/develop-plugin/dev-guide/datasource-plugin-init.png)
+</Frame>
 
 <Info>
   Typically, a data source plugin does not need to use other features of the Dify platform, so no additional permissions are required.

en/develop-plugin/dev-guides-and-walkthroughs/develop-a-slack-bot-plugin.mdx

@@ -23,7 +23,9 @@ The Dify plugin ecosystem focuses on making integrations simpler and more access
 
 Slack is an open, real-time communication platform with a robust API. Among its features is a webhook-based event system, which is quite straightforward to develop on. We’ll leverage this system to create a Slack Bot plugin, illustrated in the diagram below:
 
-![Slack Bot diagram ](https://assets-docs.dify.ai/2025/01/a0865d18f1ca4051601ca53fa6f92db2.png)
+<Frame>
+  ![Slack Bot Diagram](https://assets-docs.dify.ai/2025/01/a0865d18f1ca4051601ca53fa6f92db2.png)
+</Frame>
 
 > To avoid confusion, the following concepts are explained:
 >
@@ -52,19 +54,27 @@ Slack is an open, real-time communication platform with a robust API. Among its
 
 Go to the [Slack API platform](https://api.slack.com/apps), create a Slack app from scratch, and pick the workspace where it will be deployed.
 
-![](https://assets-docs.dify.ai/2025/01/c1fd0ac1467faf5a3ebf3818bb234aa8.png)
+<Frame>
+  ![](https://assets-docs.dify.ai/2025/01/c1fd0ac1467faf5a3ebf3818bb234aa8.png)
+</Frame>
 
 1.  **Enable Webhooks:**
 
-![](https://assets-docs.dify.ai/2025/01/7112e0710300f1db16827e17f3deac00.png)
+<Frame>
+  ![Enable Webhooks](https://assets-docs.dify.ai/2025/01/7112e0710300f1db16827e17f3deac00.png)
+</Frame>
 
 2.  **Install the App in Your Slack Workspace:**
 
-![](https://assets-docs.dify.ai/2025/01/88c360ff4f7b04fea52174ce330522fa.png)
+<Frame>
+  ![Install the App in Your Slack Workspace](https://assets-docs.dify.ai/2025/01/88c360ff4f7b04fea52174ce330522fa.png)
+</Frame>
 
 3.  **Obtain an OAuth Token** for future plugin development:
 
-![](https://assets-docs.dify.ai/2025/01/dcd8ec947253f2ef9ae121ed77ec9f26.png)
+<Frame>
+  ![Obtain an OAuth Token for Future Plugin Development](https://assets-docs.dify.ai/2025/01/dcd8ec947253f2ef9ae121ed77ec9f26.png)
+</Frame>
 
 ### 1. Developing the Plugin
 
@@ -82,7 +92,9 @@ Follow the prompts to provide basic project info. Select the `extension` templat
 
 For additional details on reverse-invoking Dify services within a plugin, see [Reverse Invocation: App](/en/develop-plugin/features-and-specs/advanced-development/reverse-invocation-app).
 
-![Plugins permission](https://assets-docs.dify.ai/2024/12/d89a6282c5584fc43a9cadeddf09c0de.png)
+<Frame>
+  ![Plugins Permission](https://assets-docs.dify.ai/2024/12/d89a6282c5584fc43a9cadeddf09c0de.png)
+</Frame>
 
 #### 1.2 Edit the Configuration Form
 
@@ -244,7 +256,9 @@ class SlackEndpoint(Endpoint):
 
 Go to the Dify platform and obtain the remote debugging address and key for your plugin.
 
-![](https://assets-docs.dify.ai/2025/01/8d24006f0cabf5bf61640a9023c45db8.png)
+<Frame>
+  ![](https://assets-docs.dify.ai/2025/01/8d24006f0cabf5bf61640a9023c45db8.png)
+</Frame>
 
 Back in your plugin project, copy the `.env.example` file and rename it to `.env`.
 
@@ -264,38 +278,45 @@ python -m main
 
 From the plugin management page in Dify, locate the newly installed test plugin and create a new endpoint. Provide a name, a Bot token, and select the app you want to connect.
 
-<img
-src="https://assets-docs.dify.ai/2025/01/07f87e8a2786d6f5f05195961c5630c3.png"
-className="mx-auto"
-alt="Test Plugins"
-/>
+<Frame>
+  ![Test Plugins](https://assets-docs.dify.ai/2025/01/07f87e8a2786d6f5f05195961c5630c3.png)
+</Frame>
 
 After saving, a **POST** request URL is generated:
 
-<img
-src="https://assets-docs.dify.ai/2025/01/e6952a5798a7ae793b3fe7df6f76ea73.png"
-className="mx-auto"
-alt="Generated POST Request URL"
-/>
+<Frame>
+  ![Generated POST Request URL](https://assets-docs.dify.ai/2025/01/e6952a5798a7ae793b3fe7df6f76ea73.png)
+</Frame>
 
 Next, complete the Slack App setup:
 
 1. **Enable Event Subscriptions**
-   ![](https://assets-docs.dify.ai/2025/01/1d33bb9cde78a1b5656ad6a0b8350195.png)
+
+   <Frame>
+     ![Enable Event Subscriptions](https://assets-docs.dify.ai/2025/01/1d33bb9cde78a1b5656ad6a0b8350195.png)
+   </Frame>
 
    Paste the POST request URL you generated above.
-   ![](https://assets-docs.dify.ai/2025/01/65aa41f37c3800af49e944f9ff28e121.png)
+
+   <Frame>
+     ![Paste the POST Request URL You Generated Above](https://assets-docs.dify.ai/2025/01/65aa41f37c3800af49e944f9ff28e121.png)
+   </Frame>
 
 2. **Grant Required Permissions**
-   ![](https://assets-docs.dify.ai/2025/01/25c38a2cf10ec6c55ae54970d790f37e.png)
+
+   <Frame>
+     ![Grant Required Permissions](https://assets-docs.dify.ai/2025/01/25c38a2cf10ec6c55ae54970d790f37e.png)
+   </Frame>
 
 ---
 
 ### 4. Verify the Plugin
 
 In your code, `self.session.app.chat.invoke` is used to call the Dify application, passing in parameters such as `app_id` and `query`. The response is then returned to the Slack Bot. Run `python -m main` again to restart your plugin for debugging, and check whether Slack correctly displays the Dify App’s reply:
 
-![](https://assets-docs.dify.ai/2025/01/6fc872d1343ce8503d63c5222f7f26f9.png)
+<Frame>
+  ![In Your Code, Self](https://assets-docs.dify.ai/2025/01/6fc872d1343ce8503d63c5222f7f26f9.png)
+</Frame>
 
 ---
 

en/develop-plugin/dev-guides-and-walkthroughs/endpoint.mdx

@@ -22,11 +22,15 @@ This document uses the [Neko Cat](/en/develop-plugin/dev-guides-and-walkthroughs
 
 An `Endpoint` group is a collection of multiple `Endpoints`. When creating a new `Endpoint` within a Dify plugin, you might need to fill in the following configuration.
 
-![](https://assets-docs.dify.ai/2024/11/763dbf86e4319591415dc5a1b6948ccb.png)
+<Frame>
+  ![](https://assets-docs.dify.ai/2024/11/763dbf86e4319591415dc5a1b6948ccb.png)
+</Frame>
 
 Besides the `Endpoint Name`, you can add new form items by writing the group's configuration information. After clicking save, you can see the multiple interfaces it contains, which will use the same configuration information.
 
-![](https://assets-docs.dify.ai/2024/11/b778b7093b7df0dc80a476c65ddcbe58.png)
+<Frame>
+  ![Besides the Endpoint Name, You Can Add New Form Items by Writing the Group's](https://assets-docs.dify.ai/2024/11/b778b7093b7df0dc80a476c65ddcbe58.png)
+</Frame>
 
 #### **Structure**
 

en/develop-plugin/dev-guides-and-walkthroughs/tool-oauth.mdx

@@ -2,7 +2,9 @@
 title: "Add OAuth Support to Your Tool Plugin"
 ---
 
-![b0e673ba3e339b31ac36dc3cd004df04787bcaa64bb6d2cac6feb7152b7b515f.png](/images/b0e673ba3e339b31ac36dc3cd004df04787bcaa64bb6d2cac6feb7152b7b515f.png)
+<Frame>
+  ![OAuth Authorize Example](/images/develop-plugin/dev-guide/oauth-authorize-example.png)
+</Frame>
 
 This guide teaches you how to build [OAuth](https://oauth.net/2/) support into your tool plugin.
 
@@ -45,24 +47,17 @@ As an example, here are the steps to setting up an OAuth client for Dify's Gmail
   <Accordion title="Enter Credentials in Dify">
     Enter the client_id and client_secret on the OAuth Client configuration popup to set up the tool provider as a client.
 
-    <img
-      src="/images/acd5f5057235c3a0c554abaedcf276fb48f80567f0231eae9158a795f8e1c45d.png"
-      alt="acd5f5057235c3a0c554abaedcf276fb48f80567f0231eae9158a795f8e1c45d.png"
-      title="acd5f5057235c3a0c554abaedcf276fb48f80567f0231eae9158a795f8e1c45d.png"
-      className="mx-auto"
-      style={{ width:"66%" }}
-    />
+    <Frame>
+      ![OAuth Client Settings Dialog](/images/develop-plugin/dev-guide/oauth-client-settings-dialog.png)
+    </Frame>
+
   </Accordion>
   <Accordion title="Authorize Redirect URI">
     Register the redirect URI generated by Dify on the Google OAuth Client's page:
 
-    <img
-      src="/images/dfe60a714a275c5bf65f814673bd2f0a0db4fda27573a2f0b28a1c39e4c61da2.png"
-      alt="dfe60a714a275c5bf65f814673bd2f0a0db4fda27573a2f0b28a1c39e4c61da2.png"
-      title="dfe60a714a275c5bf65f814673bd2f0a0db4fda27573a2f0b28a1c39e4c61da2.png"
-      className="mx-auto"
-      style={{ width:"77%" }}
-    />
+    <Frame>
+      ![OAuth Google Redirect URI](/images/develop-plugin/dev-guide/oauth-google-redirect-uri.png)
+    </Frame>
 
     <Info>
       Dify displays the `redirect_uri`  in the OAuth Client configuration popup. It usually follows the format:
@@ -84,13 +79,9 @@ As an example, here are the steps to setting up an OAuth client for Dify's Gmail
 
 After configuring OAuth clients, individual Dify users can now authorize your plugin to access their personal accounts.
 
-<img
-  src="/images/833c205f5441910763b27d3e3ff0c4449a730a690da91abc3ce032c70da04223.png"
-  alt="833c205f5441910763b27d3e3ff0c4449a730a690da91abc3ce032c70da04223.png"
-  title="833c205f5441910763b27d3e3ff0c4449a730a690da91abc3ce032c70da04223.png"
-  className="mx-auto"
-  style={{ width:"67%" }}
-/>
+<Frame>
+  ![OAuth User Authorization](/images/develop-plugin/dev-guide/oauth-user-authorization.png)
+</Frame>
 
 ## Implementation
 

en/develop-plugin/dev-guides-and-walkthroughs/tool-plugin.mdx

@@ -16,7 +16,9 @@ description: This document provides detailed instructions on how to develop tool
 
 Tools refer to third-party services that can be called by Chatflow / Workflow / Agent-type applications, providing complete API implementation capabilities to enhance Dify applications. For example, adding extra features like online search, image generation, and more.
 
-![Tool Plugin Example](https://assets-docs.dify.ai/2024/12/7e7bcf1f9e3acf72c6917ea9de4e4613.png)
+<Frame>
+  ![Tool Plugin Example](https://assets-docs.dify.ai/2024/12/7e7bcf1f9e3acf72c6917ea9de4e4613.png)
+</Frame>
 
 In this article, **"Tool Plugin"** refers to a complete project that includes tool provider files, functional code, and other structures. A tool provider can include multiple Tools (which can be understood as additional features provided within a single tool), structured as follows:
 
@@ -26,7 +28,9 @@ In this article, **"Tool Plugin"** refers to a complete project that includes to
     - Tool B
 ```
 
-![Tool Plugin Structure](https://assets-docs.dify.ai/2025/02/60c4c86a317d865133aa460592eac079.png)
+<Frame>
+  ![Tool Plugin Structure](https://assets-docs.dify.ai/2025/02/60c4c86a317d865133aa460592eac079.png)
+</Frame>
 
 This article will use `Google Search` as an example to demonstrate how to quickly develop a tool plugin.
 
@@ -59,7 +63,9 @@ All templates in the scaffolding tool provide complete code projects. In this ex
 
 > If you are already familiar with plugin development and do not need to rely on templates, you can refer to the [General Specifications](/en/develop-plugin/features-and-specs/plugin-types/general-specifications) guide to complete the development of different types of plugins.
 
-![Plugin Type: Tool](https://assets-docs.dify.ai/2024/12/dd3c0f9a66454e15868eabced7b74fd6.png)
+<Frame>
+  ![Plugin Type: Tool](https://assets-docs.dify.ai/2024/12/dd3c0f9a66454e15868eabced7b74fd6.png)
+</Frame>
 
 #### Configuring Plugin Permissions
 
@@ -74,7 +80,9 @@ The plugin also needs permissions to read from the Dify platform. Grant the foll
 
 After checking all permission items, press Enter to complete the plugin creation. The system will automatically generate the plugin project code.
 
-![Plugin Permissions](https://assets-docs.dify.ai/2024/12/9cf92c2e74dce55e6e9e331d031e5a9f.png)
+<Frame>
+  ![Plugin Permissions](https://assets-docs.dify.ai/2024/12/9cf92c2e74dce55e6e9e331d031e5a9f.png)
+</Frame>
 
 ### Developing the Tool Plugin
 
@@ -321,7 +329,9 @@ After completing plugin development, you need to test whether the plugin can fun
 
 Go to the ["Plugin Management"](https://cloud.dify.ai/plugins) page to obtain the remote server address and debugging Key.
 
-![Remote Debug Key](https://assets-docs.dify.ai/2024/12/053415ef127f1f4d6dd85dd3ae79626a.png)
+<Frame>
+  ![Remote Debug Key](https://assets-docs.dify.ai/2024/12/053415ef127f1f4d6dd85dd3ae79626a.png)
+</Frame>
 
 Return to the plugin project, copy the `.env.example` file and rename it to `.env`, then fill in the remote server address and debugging Key information you obtained.
 
@@ -335,7 +345,9 @@ REMOTE_INSTALL_KEY=********-****-****-****-************
 
 Run the `python -m main` command to start the plugin. On the plugins page, you can see that the plugin has been installed in the Workspace, and other members of the team can also access the plugin.
 
-![](https://assets-docs.dify.ai/2024/11/0fe19a8386b1234755395018bc2e0e35.png)
+<Frame>
+  ![Run the Python -M Main Command to Start the Plugin](https://assets-docs.dify.ai/2024/11/0fe19a8386b1234755395018bc2e0e35.png)
+</Frame>
 
 ### Packaging the Plugin (Optional)