HDDS-6211. [Docs] Image styling on deployed site does not replicate local builds.

[JyotinderSingh]

What changes were proposed in this pull request?

It was noticed that the images on the ozone docs website are not responsive despite being rendered with the appropriate CSS applied to their shortcode. This problem is not seen when building the website locally.

This might be due to bootstrap CSS classes being loaded after the inline styles and hence overriding them.

This task makes the image shortcode use a built-in bootstrap class for sizing the images down to prevent such conflicts.

What is the link to the Apache JIRA

https://issues.apache.org/jira/browse/HDDS-6211

How was this patch tested?

Screenshot

[smengcl]

Thanks @JyotinderSingh for the patch.

When I'm verifying the patch locally, I don't really see any change on the page before and after the patch when scaling (shrinking and extending page width, zooming in and out): http://localhost:1313/feature/prefixfso.html

cd hadoop-hdds/docs
hugo serve

But I do notice the CSS of class img-responsive includes max-width: 100%:

// Responsive image
//
// Keep images from scaling beyond the width of their parents.
.img-responsive(@display: block) {
  display: @display;
  max-width: 100%; // Part 1: Set a maximum relative to the parent
  height: auto; // Part 2: Scale the height according to the width, otherwise you get stretching
}

And the images on the doc site have indeed lost the hard-coded style somehow: https://ozone.apache.org/docs/1.2.1/feature/prefixfso.html

So img-responsive seems to be the proper way to do this. I am +1 on this.

[rakeshadr]

+1 LGTM, I will merge it shortly.

Thanks @JyotinderSingh for reporting and fixing this issue.

Thanks @smengcl for the review help.