DOCS-1209 - Replace old image tagging with new tagging - Get started and send data (#5958)

* Start cleanup

* Images for get-started

* Add images to contributing

* Start adding images to send-data

* Continue with send-data images

* Continue with send-data images

* Continue with send-data images

* Finish send-data

* Change hover setting back

* Remove VS Code setting

* Remove .vscode/settings.json file

Author: jpipkin1

blog-service/2025-04-28-manage.md

@@ -12,6 +12,4 @@ import useBaseUrl from '@docusaurus/useBaseUrl';
 
 We are happy to announce that authorized users can now control the visibility of  installed app content. This update allows content administrators and the installing user to configure the roles and users who should be allowed to view the dashboards and log searches that are installed with an app.
 
-For more information about sharing apps, see [Content Sharing in Sumo Logic](/docs/manage/content-sharing/).
-
-<img src={useBaseUrl('img/content-sharing/grant-app-access-to-org.png')} alt="<your image description>" style={{border: '1px solid gray'}} width="<insert-pixel-number>" />
+For more information about sharing apps, see [Content Sharing in Sumo Logic](/docs/manage/content-sharing/).

docs/contributing/style-guide.md

@@ -894,7 +894,7 @@ Always start with `1.`. Markdown automatically numbers sequentially when buildin
    1. Ordered sub-list.
 1. And another item.
 
-  More content for this entry. And a screenshot:<br/> ![span hover](/img/apm/span-hover-view.png)
+  More content for this entry. And a screenshot:<br/><img src={useBaseUrl('img/apm/span-hover-view.png')} alt="Span hover" style={{border: '1px solid gray'}} width="400" />
 
 ```
 </TabItem>
@@ -906,7 +906,7 @@ Always start with `1.`. Markdown automatically numbers sequentially when buildin
 1. Actual numbers do not matter, just that it is a number.
    1. Ordered sub-list.
 1. And another item.
-   * More content for this entry. And a screenshot:<br/> ![span hover](/img/apm/span-hover-view.png)
+   * More content for this entry. And a screenshot:<br/><img src={useBaseUrl('img/apm/span-hover-view.png')} alt="Span hover" style={{border: '1px solid gray'}} width="400" />
 
 </TabItem>
 </Tabs>
@@ -1271,10 +1271,6 @@ In the UI, avoid periods for single sentences on their own. Whenever there are t
 
 Our release notes (also known as changelog) are posted to the both the docs site and corresponding RSS feed. Check out the categories [here](/docs/release-notes). Keep your them concise and add links to documentation. If there are updated UI elements, add an image or gif.
 
-### Text only
-
-To add a text-only release note:
-
 1. In the appropriate blog folder ([blog-collector](https://github.com/SumoLogic/sumologic-documentation/tree/main/blog-collector), [blog-cse](https://github.com/SumoLogic/sumologic-documentation/tree/main/blog-cse), [blog-csoar](https://github.com/SumoLogic/sumologic-documentation/tree/main/blog-csoar), [blog-developer](https://github.com/SumoLogic/sumologic-documentation/tree/main/blog-developer), [blog-service](https://github.com/SumoLogic/sumologic-documentation/tree/main/blog-service)), add a new file that follows the format of the other posts in that folder. For example, for blog-service release notes, the format is `YYYY-MM-DD-<product/feature>`. For Cloud SIEM and SOAR, the format is `YYYY-MM-DD-application-update` or `YYYY-MM-DD-content-update`.<br/><img src={useBaseUrl('img/contributing/release-notes-dropdown-menu.png')} alt="Release notes menu" style={{border: '1px solid gray'}} width="200"/>
 1. Add the following frontmatter, swapping out these example values with your own. Because there's no `image`, we'll use the Sumo Logic logo in its place.
     ```markdown
@@ -1294,29 +1290,10 @@ To add a text-only release note:
     * `hide-table-of-contents`. Hide the TOC on the page, keeping the notes clean and wide on the page.
 1. Document the release notes. Add links, bullets, and images as needed.
 
-#### Long release notes
+### Long release notes
 
 For lengthy release notes, we recommend introducing the notes and adding a truncate line (`<!--truncate-->`), followed by the full set of release notes.
 
-### Text and images
-
-To add release notes with images:
-
-1. In the blog folder, create a new folder with the following name format: `YYYY-MM-DD-product`.
-1. In the new folder, create a markdown file named `index.md`.
-1. Add your release notes with frontmatter:
-    ```markdown
-    ---
-    title: New XYZ Feature
-    hide_table_of_contents: true
-    keywords:
-      - alerts
-    image: https://assets-www.sumologic.com/company-logos/_800x418_crop_center-center_82_none/SumoLogic_Preview_600x600.jpg?mtime=1617040082
-    ---
-    ```
-1. Save the image to this folder and add them to the markdown file: `![alt text](image-name.png)`.
-
-
 ## Reusing content
 
 For repeatable content - an identical section that appears in one or more docs - you can save a lot of time by creating one instance of that content in the `/docs/reuse` folder and then importing that snippet to other docs.
@@ -1386,7 +1363,7 @@ Tables use plain markdown with one header, default left-aligned columns, and mul
 | Started At | 07/27/2020 09:01:04.533 | When the trace started. |
 | Duration | 12.582 ms | The amount of time the trace spans.  |
 | Number of spans | 35 | A trace consists of spans. This number tells you how many spans are in the trace. |
-| Duration Breakdown | ![breakdown](/img/apm/traces/breakdown.png) | Each color indicates a service. The colors assigned to services are always the same on your account. You can change the color in the span summary tab after clicking on the individual span in trace view.<br/>Hover over to view a percentage breakdown of how long each span covers in the trace.<br/>![span hover](/img/apm/traces/span-hover-view.png) |
+| Duration Breakdown | <img src={useBaseUrl('img/apm/traces/breakdown.png')} alt="Breakdown" style={{border: '1px solid gray'}} width="200" /> | Each color indicates a service. The colors assigned to services are always the same on your account. You can change the color in the span summary tab after clicking on the individual span in trace view.<br/>Hover over to view a percentage breakdown of how long each span covers in the trace.<br/><img src={useBaseUrl('img/apm/span-hover-view.png')} alt="Span hover" style={{border: '1px solid gray'}} width="300" /> |
 | Number of errors | 0 | The number of errors in the trace. |
 | Status | 200 | The HTTP status code of the trace. |
 ```
@@ -1421,7 +1398,7 @@ Markdown | Less | Pretty
 | Started At | 07/27/2020 09:01:04.533 | When the trace started. |
 | Duration | 12.582 ms | The amount of time the trace spans.  |
 | Number of spans | 35 | A trace consists of spans. This number tells you how many spans are in the trace. |
-| Duration Breakdown | ![breakdown](/img/apm/traces/breakdown.png) | Each color indicates a service. The colors assigned to services are always the same on your account. You can change the color in the span summary tab after clicking on the individual span in trace view.<br/>Hover over to view a percentage breakdown of how long each span covers in the trace.<br/>![span hover](/img/apm/span-hover-view.png) |
+| Duration Breakdown | <img src={useBaseUrl('img/apm/traces/breakdown.png')} alt="Breakdown" style={{border: '1px solid gray'}} width="200" /> | Each color indicates a service. The colors assigned to services are always the same on your account. You can change the color in the span summary tab after clicking on the individual span in trace view.<br/>Hover over to view a percentage breakdown of how long each span covers in the trace.<br/><img src={useBaseUrl('img/apm/span-hover-view.png')} alt="Span hover" style={{border: '1px solid gray'}} width="300" /> |
 | Number of errors | 0 | The number of errors in the trace. |
 | Status | 200 | The HTTP status code of the trace. |
 

docs/contributing/templates/generic-doc.md

@@ -9,6 +9,8 @@ description: Example template for creating a document in the Sumo Logic guides.
   <meta name="robots" content="noindex" />
 </head>
 
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
 <!--Copy this markdown file and replace it with your own documentation. To view the full list of markdown components, see our [Style Guide](/docs/contributing/style-guide).
 
 Replace the title above in the [Frontmatter section](/docs/contributing/style-guide#frontmatter) with yours. This will render as an H1 header. All other header sections should be H2, H3, H4, or H5.-->
@@ -20,7 +22,7 @@ To add an image, save the .png file with a simple name to the `/static/img` fold
 
 Example:
 
-![Sumo Logic logo](/img/reuse/sumo-square.png)
+<img src={useBaseUrl('img/reuse/sumo-square.png')} alt="Sumo Logic logo" style={{border: '1px solid gray'}} width="50" />
 -->
 
 ### Instructions
@@ -31,7 +33,7 @@ Always use `1.` to start your instructions. You do not need to actually number t
 1. Click **Collections**, then **Sources** tab.
 1. Next step, just write it out.
     * Bullet list just tab and use `*` or `1.`.
-    * Next bullet.<br/>![Sumo Logic logo](/img/reuse/sumo-square.png)
+    * Next bullet.<br/><img src={useBaseUrl('img/reuse/sumo-square.png')} alt="Sumo Logic logo" style={{border: '1px solid gray'}} width="50" />
 1. The numbers continue with content indented above!
 
 Here is an example table:

docs/get-started/help.md

@@ -19,7 +19,7 @@ Docs cover all product features and should be your first resource when you have
 If you haven't found the answer to your question in our online help documentation:
 
 1. [**New UI**](/docs/get-started/sumo-logic-ui). In the top menu select **Help > Support**. <br/> [**Classic UI**](/docs/get-started/sumo-logic-ui-classic). In the main Sumo Logic menu select **Help > Support**. 
-1. You'll be taken to Sumo Logic Support. Click **Submit a Request** to file a ticket.<br/>![Help - Support.png](/img/get-started/Help-Support.png)
+1. You'll be taken to Sumo Logic Support. Click **Submit a Request** to file a ticket.<br/><img src={useBaseUrl('img/get-started/Help-Support.png')} alt="Support page" style={{border: '1px solid gray'}} width="800" />
 
 On this site, you can log in with your account to access resources like Sumo Logic announcements, release notes, Knowledge Base articles, and more. You can also access the Sumo Logic Community in order to ask questions of fellow users.
 
@@ -41,7 +41,7 @@ You can also search for and request features, comment, and vote on issues that a
 
 See the [Sumo Logic Community](https://community.sumologic.com) for more information.
 
-![Help - Community2.png](/img/get-started/Help-Community.png)
+<img src={useBaseUrl('img/get-started/Help-Community.png')} alt="Community page" style={{border: '1px solid gray'}} width="800" />
 
 
 ## Privacy Policy
@@ -74,8 +74,8 @@ The Service Status Indicator on the Help menu shows the severity of the outage.
 | Icon | Status |
 | :-- | :-- |
 | NONE | **None.** All systems operational. |
-| ![](/img/reuse/outage_critical.png) | **Critical.** Major system outage. |
-| ![](/img/reuse/outage_major.png) | **Major.** Partial system outage.  |
-| ![](/img/reuse/outage_minor.png) | **Minor.** Minor system outage. |
+| <img src={useBaseUrl('img/reuse/outage_critical.png')} alt="Critical icon" style={{border: '1px solid gray'}} width="25" />| **Critical.** Major system outage. |
+| <img src={useBaseUrl('img/reuse/outage_major.png')} alt="Major icon" style={{border: '1px solid gray'}} width="25" /> | **Major.** Partial system outage.  |
+| <img src={useBaseUrl('img/reuse/outage_minor.png')} alt="Minor icon" style={{border: '1px solid gray'}} width="25" /> | **Minor.** Minor system outage. |
 
 To determine which pod your account uses, look at the Sumo Logic URL. If you see `us2`, that means you're running on the US2 pod. If you see `eu` or `au`, you're on one of those pods.