You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/ContributorGuide-v2.md
+6-6Lines changed: 6 additions & 6 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -465,7 +465,7 @@ Here is how you can crate an external blog post entry in the HPE Developer Commu
465
465
\[Piece-of-text-to-hotlink](Link-URL)
466
466
467
467
468
-
- **Tip #5: Insert an image in a blog post:**
468
+
- **Tip #5: Insert an image in a blog post to improve SEO and make collateral more accessible:**
469
469
470
470
>**IMPORTANT NOTE:** If your images are stored in**a personal website** you owned, it is recommended to proceed as explained below to get you images uploaded and stored to the HPE Developer CMS rather than using a link URL to your image on your web site. Security filter such as Zscaler may filter your images and make your images unrendered by the CMS.
471
471
@@ -480,7 +480,7 @@ Here is how you can crate an external blog post entry in the HPE Developer Commu
480
480
481
481
- On the top right of the wizard, click **Upload** to upload the image stored on your PC/laptop and selectimage you have just uploaded by clicking **Choose selected**.
482
482
483
-
- Specify a "**Title**"foryour imagein the _TITLE_ section of the _IMAGE_ block. The title will appear when the reader hovers or pauses the mouse over the image.
483
+
- Specify a "**Title**"foryour imagein the _TITLE_ section of the _IMAGE_ block. The title will appear when the reader hovers or pauses the mouse over the image. It aims to make the image collateral more accessible for people with visual impairments.
484
484
485
485
- Make sure to specify a description foryour imagein the _ALT TEXT_ section of the _IMAGE_ block.
486
486
@@ -490,22 +490,22 @@ Here is how you can crate an external blog post entry in the HPE Developer Commu
490
490
491
491
- **Method 1 (recommended):** Use HTML code to set the size (height, width) for your image. First, toggle to **Rich Text** mode to insert your image. Then toggle to **Markdown** mode to obtain the relative path for your image (in the form: */img/myimage.png*) and **substitute** the line **"\!\[\](/img/myimage.png)"** with the HTML syntax below:
492
492
493
-
\<img src=\"relative-path-of-your-image-in-the-form: /img/myimage.png\" width=\"600\" height=\"359\" alt=\"brief description for the image\"\>
493
+
\<img src=\"relative-path-of-your-image-in-the-form: /img/myimage.png\" width=\"600\" height=\"359\" alt=\"brief description for the image\" title=\"brief description for the image\"\>
494
494
495
495
or you can use percent value to reduce the size of your original image:
496
496
497
-
\<img src=\"relative-path-of-your-image-in-the-form: /img/myimage.png\" width=\"50%\" height=\"50%\" alt=\"brief description for the image\"\>
497
+
\<img src=\"relative-path-of-your-image-in-the-form: /img/myimage.png\" width=\"50%\" height=\"50%\" alt=\"brief description for the image\" title=\"brief description for the image\"\>
498
498
499
499
>**Note:** To get appropriate Horizontal and Vertical pixel values, you may want to use the "Resize" fonction of your "Paint" (or equivalent) application.
500
500
501
501
>**Note:** If you wish to center an image, then you can use HTML code below:
502
502
503
-
\<center\>\<img src=\"relative-path-of-your-image-in-the-form: /img/myimage.png\" width=\"500\" height=\"542\" alt=\"brief description for the image\"\>\</center\>
503
+
\<center\>\<img src=\"relative-path-of-your-image-in-the-form: /img/myimage.png\" width=\"500\" height=\"542\" alt=\"brief description for the image\" title=\"brief description for the image\"\>\</center\>
504
504
505
505
506
506
>**Note:** When using HTML code to insert an image, you will see *an empty frame*foryour imagein the preview area (right side of the CMS editor). The frame corresponds to the size of the image (width and height) in the blog post. Adjust the width/height value as appropriate. You will also lose the description (title specified whilein Rich Text mode) of the image.
507
507
508
-
>**IMPORTANT NOTE:** Adding a _ALT Text_ will help promote online content in Search Engine such as Google.
508
+
>**IMPORTANT NOTE:** Adding a _ALT Text_ will help promote online content in Search Engine such as Google. Adding a _Title_ will help make your image collateral more accessible for people with visual impairments and help them understand pictures content.
509
509
510
510
- **Method 2:** Using your PC/Laptop, change image size using you preferred image editor (i.e.: Paint). Toggle to **Rich Text** mode and upload/select the resized image.
0 commit comments