Blog post migration: Cleaning up image references

[oraNod]

This issue follows up on #300

Several migrated blog posts contain references to hosted images on HubSpot (ansible.com) or Google user content. There is manual effort required for image references within the converted markdown files.

### Tasks
- [x] Remove as many image references as possible: https://github.com/ansible-community/community-website/issues/353#issuecomment-1876962088
- [x] Download all required images and add them to the source repository: https://github.com/ansible-community/community-website/issues/353#issuecomment-1878459587
- [x] Remove all unnecessary HTML and inline CSS from image references: https://github.com/ansible-community/community-website/issues/353#issuecomment-1876929242
- [x] Ensure all image references are in valid markdown format and add alternative text to image references where needed: https://github.com/ansible-community/community-website/issues/353#issuecomment-1876972412

[oraNod]

Here are the names of markdown files that contain HubSpot or Google image references.

Files that reference images on HubSpot:

• [ ] agnostic-network-automation-examples-with-ansible-and-juniper-nre-labs.md
• [ ] ansible-and-infoblox-roles-deep-dive.md
• [ ] ansible-linting-with-github-actions.md
• [ ] ansible-network-resource-purge-parameter.md
• [ ] ansible-servicenow-howto-part-3-making-outbound-restful-api-calls-to-ansible-tower.md
• [ ] ansible-servicenow-opening-and-closing-tickets.md
• [ ] ansible-tips-and-tricks-dealing-with-unreliable-connections-and-services.md
• [ ] ansible-tower-advanced-smart-inventory-usage.md
• [ ] automating-a-rhel-8-installation-using-the-vmware-rest-ansible-collection.md
• [ ] automation-savings-planner.md
• [ ] centralize-your-automation-logs-with-ansible-tower-and-splunk-enterprise.md
• [ ] command-module-deep-dive-for-networks.md
• [ ] configure-network-cards-by-pci-address-with-ansible-facts.md
• [ ] connecting-to-a-windows-host.md
• [ ] deep-dive-on-cli-command-for-network-automation.md
• [ ] deep-dive-on-vlans-resource-modules-for-network-automation.md
• [ ] enable-self-healing-applications-with-ansible-and-dynatrace.md
• [ ] exploring-new-possibilities-with-the-aws-cloud-control-collection.md
• [ ] genie.md
• [ ] getting-started-ldap-authentication-in-ansible-tower.md
• [ ] getting-started-with-ansible-and-check-point.md
• [ ] getting-started-with-ansible-collections.md
• [ ] getting-started-with-ansible.utils-collection-for-playbook-creators-part-2.md
• [ ] getting-started-workflow-job-templates.md
• [ ] hands-on-with-ansible-collections.md
• [ ] how-to-migrate-your-ansible-playbooks-to-support-aws-boto3.md
• [ ] how-useful-is-ansible-in-a-cloud-native-kubernetes-environment.md
• [ ] infoblox-integration-in-ansible-2.5.md
• [ ] installing-and-using-collections-on-ansible-tower.md
• [ ] introducing-the-awx-collection.md
• [ ] introduction-to-ansible-builder.md
• [ ] kubernetes-operators-ansible-deep-dive-part-1.md
• [ ] kubernetes-operators-ansible-deep-dive-part-2.md
• [ ] large-scale-deployments-using-ansible.md
• [ ] learn-about-edge-automation-at-red-hat-summit-and-ansiblefest-2023.md
• [ ] learn-about-event-driven-ansible-at-red-hat-summit-and-ansiblefest-2023.md
• [ ] make-your-ansible-playbooks-flexible-maintainable-and-scalable.md
• [ ] migrating-to-ansible-collections-webinar-qa.md
• [ ] monitoring-as-code-with-sensu-ansible.md
• [ ] new-libssh-connection-plugin-for-ansible-network.md
• [ ] providing-terraform-with-that-ansible-magic.md
• [ ] pump-up-your-itil-with-automation.md
• [ ] rebooting-network-devices-with-ansible.md
• [ ] red-hat-ansible-tower-monitoring-using-prometheus-node-exporter-grafana.md
• [ ] red-hat-single-sign-on-integration-with-ansible-tower.md
• [ ] shell-scripts-to-ansible.md
• [ ] summary-of-authentication-methods-in-red-hat-ansible-tower.md
• [ ] taking-automation-to-the-next-level-using-ansible-gitops-to-manage-the-lifecycle-of-a-containerized-application.md
• [ ] the-anatomy-of-automation-execution-environments.md
• [ ] the-automation-experience-ansiblefest-2022.md
• [ ] the-total-economic-impact-of-red-hat-ansible-tower.md
• [ ] thoughts-on-restructuring-the-ansible-project.md
• [ ] three-quick-ways-to-move-your-ansible-inventory-into-red-hat-ansible-tower.md
• [ ] two-simple-ways-automation-can-save-money-on-aws.md
• [ ] using-an-inventory-plugin-from-a-collection-in-ansible-tower.md
• [ ] using-ansible-automation-platform-gitlab-ce-and-webhooks-to-deploy-iis-website.md
• [ ] using-infoblox-as-a-dynamic-inventory-in-red-hat-ansible-tower.md
• [ ] using-netbox-for-ansible-source-of-truth.md
• [ ] using-new-ansible-utilities-for-operational-state-management-and-remediation.md
• [ ] using-the-win_dsc-module-in-ansible.md
• [ ] using-vmware-vcenter-tags-in-a-red-hat-ansible-tower-dynamic-inventory.md
• [ ] welcome-to-the-ansible-lightspeed-technical-preview.md
• [ ] windows-package-management.md

Files that reference images from Google user content:

• [ ] ansible-and-packer-why-they-are-better-together.md
• [ ] automation-at-the-edge-summit-2022.md
• [ ] continuous-detection-and-mitigation-cdm.md
• [ ] deep-dive-on-ansible-vscode-extension.md
• [ ] exploring-new-possibilities-with-the-aws-cloud-control-collection.md
• [ ] getting-started-with-ansible.utils-collection-for-playbook-creators-part-2.md
• [ ] introducing-a-brand-new-way-to-automate-your-azure-cloud.md
• [ ] introducing-event-driven-ansible.md
• [ ] let-ansible-keep-an-eye-on-your-aws-environment.md
• [ ] managing-a-vmware-template-lifecycle-with-ansible.md
• [ ] migrating-from-python-virtual-environments-to-automation-execution-environments-in-ansible-automation-platform-2.md
• [ ] taking-automation-to-the-next-level-using-ansible-gitops-to-manage-the-lifecycle-of-a-containerized-application.md
• [ ] terraforming-clouds-with-ansible.md
• [ ] the-anatomy-of-automation-execution-environments.md
• [ ] the-zen-of-ansible.md
• [ ] thoughts-on-restructuring-the-ansible-project.md
• [ ] three-quick-ways-to-move-your-ansible-inventory-into-red-hat-ansible-tower.md
• [ ] two-simple-ways-automation-can-save-money-on-aws.md
• [ ] walking-on-clouds-with-ansible.md
• [ ] whats-new-cloud-automation-with-amazon.aws-6.0.0.md

[oraNod]

Removing unnecessary HTML and CSS

To remove all the unnecessary HTML and inline CSS bits from the conversion you can do something like this:

Before

![NRE 1](https://www.ansible.com/hs-fs/hubfs/NRE%201.png?width=986&name=NRE%201.png){width="986"
style="width: 986px;"
srcset="https://www.ansible.com/hs-fs/hubfs/NRE%201.png?width=493&name=NRE%201.png 493w, https://www.ansible.com/hs-fs/hubfs/NRE%201.png?width=986&name=NRE%201.png 986w, https://www.ansible.com/hs-fs/hubfs/NRE%201.png?width=1479&name=NRE%201.png 1479w, https://www.ansible.com/hs-fs/hubfs/NRE%201.png?width=1972&name=NRE%201.png 1972w, https://www.ansible.com/hs-fs/hubfs/NRE%201.png?width=2465&name=NRE%201.png 2465w, https://www.ansible.com/hs-fs/hubfs/NRE%201.png?width=2958&name=NRE%201.png 2958w"
sizes="(max-width: 986px) 100vw, 986px"}

Here you can see the conversion created an image reference in markdown format: ![alt_text](url) but it also includes a bunch of HTML attributes and CSS properties that are not necessary. We can simply delete all that.

After

![NRE 1](https://www.ansible.com/hs-fs/hubfs/NRE%201.png)

[oraNod]

Removing image references

We should remove any image references that are used for decorative purposes and do not convey meaning to users. Likewise, in the interest of both accessibility and to avoid bloating the site, we should remove any image references where the image supplements the text but isn't really necessary.

Here is an example in the large-scale-deployments-using-ansible.md file: https://www.ansible.com/hs-fs/hubfs/2018_Images/Social-Blog/Ansible-Tower-Large-Scale-Deployment.png

While this image might provide some aesthetic qualities to the post it does not supplement or accompany the text in a way that helps users understand the content. Rather than keeping these sort of images during the clean up effort it would be better to remove them for accessibility, longer term maintenance, and overall performance.

Here are some more examples of image references that could be considered more decorative than informative:

https://www.ansible.com/hs-fs/hubfs/2018_Images/Social-Blog/Ansible-Simple-Powerful-Agentless.png

https://www.ansible.com/hs-fs/hubfs/Images/blog-social/blog_ansible-and-service-now-part2.png

https://www.ansible.com/hs-fs/hubfs/Images/blog-social/blog_getting-started_content-collections.png

[oraNod]

Checking markdown format and adding alternative text to images

We should ensure all image references have alternative text. As a best effort we should ensure that the alternative text is meaningful.

Here is an example in the getting-started-with-ansible-collections.md file:

![Screen Shot 2019-11-13 at 4.11.45
PM](https://www.ansible.com/hs-fs/hubfs/Screen%20Shot%202019-11-13%20at%204.11.45%20PM.png)

There are two issues with this reference:

1. The image reference is on multiple lines. (not strictly a requirement for it to be on the same line but good to have)
2. The alternative text is confusing and not very meaningful.

An improvement could be as follows:

![Collection directory layout](https://www.ansible.com/hs-fs/hubfs/Screen%20Shot%202019-11-13%20at%204.11.45%20PM.png)

Note that it's not necessary to go into too much detail about the alternative text. Two or three words is enough. In this case even just "Screenshot" would be OK because the image is described in the following text. It's more important to avoid confusing or nonsense alt text.

Here is another example:

![IMG_0284](https://www.ansible.com/hs-fs/hubfs/IMG_0284.gif)

In this case something generic like "animated gif" would probably do the job.

[oraNod]

Downloading images and adding to source

Images hosted on HubSpot will be removed and no longer available at some point in the future. For this reason we should remove as many of those image references as possible.

However, there are some images that are critical to the information within the blog post. In these cases we should add the image to the source repository and update the reference in the corresponding markdown file.

Determining if images are critical

Downloading and copying images takes up space and will increase the size of the repository and resulting container image so use caution when adding images to source.

Images should be added to source only when they convey information that helps readers understand the content of the post. If removing the image makes it seem like the post is obviously missing information then we should probably add it.

All images should be added to the images/posts/archive directory in the source repository.

All image references to images should be updated in the markdown source, for example:

![alternative_text](/images/posts/archive/<image_name>.png)

In case it helps, here is a hubspot-image-urls.txt.

A convenient way to download everything from that txt file:

#!/bin/bash

while IFS= read -r url; do
    curl -L "$url" -o "archive/$(basename $url)"
done < hubspot-image-urls.txt

Note that there is one post, migrating-to-ansible-collections-webinar-qa.md, that references a PDF on HubSpot. We should probably just remove that.