Uploaded image for project: 'Jenkins Website'
  1. Jenkins Website
  2. WEBSITE-416

Ability to add CSS-based borders (i.e. box shadows) to images on the jenkins.io site

    Details

    • Similar Issues:

      Description

      Allow contributors to selectively add borders to images (i.e. box shadows) included in documentation on the jenkins.io site.

      Main benefit in implementing this feature: Images (i.e. screenshots) with borders look nicer in documentation than those without them. Image borders create a clear distinction between written text (surrounding the images) and the images themselves, thereby improving the readability of the documentation itself. When taking screenshots for documentation (such as those in the first tutorial posted as part of the Jenkins User Documentation), the writer often needs to include a border within the image itself - as I did so in that tutorial. However, it would be better if screenshots could be taken without the need to consider including borders, and then borders added through CSS tweaks accessed through Asciidoc image reference syntax.

      Implementation consideration: Here's a discussion about one such implementation of this feature.

        Attachments

          Issue Links

            Activity

            Hide
            ggaskell Giles Gaskell added a comment - - edited

            I was originally planning to follow the Implementation consideration approach above (which uses docinfo files).

            However (and I'm prepared to stand corrected), I couldn't see that these were actually being used in the jenkins.io build process.

            Therefore, I edited the https://github.com/jenkins-infra/jenkins.io/blame/master/content/css/jenkins.css file directly to allow people to add a custom role above image references in the Asciidoc.

            Hence, this is now done by specifying [.boxshadow] above an image reference. E.g.

            [.boxshadow]
            image:tutorials/java-maven-01-downloading-maven-docker-image.png[alt="Downloading Maven Docker image",width=100%]
            

            for inline image references or

            [.boxshadow]
            image::tutorials/java-maven-01-downloading-maven-docker-image.png[]
            

            for a block image reference.

            Show
            ggaskell Giles Gaskell added a comment - - edited I was originally planning to follow the Implementation consideration approach above (which uses docinfo files). However (and I'm prepared to stand corrected), I couldn't see that these were actually being used in the jenkins.io build process. Therefore, I edited the https://github.com/jenkins-infra/jenkins.io/blame/master/content/css/jenkins.css  file directly to allow people to add a custom  role above image references in the Asciidoc. Hence, this is now done by specifying [.boxshadow] above an image reference. E.g. [.boxshadow] image:tutorials/java-maven-01-downloading-maven-docker-image.png[alt= "Downloading Maven Docker image" ,width=100%] for inline image references or [.boxshadow] image::tutorials/java-maven-01-downloading-maven-docker-image.png[] for a block image reference.

              People

              • Assignee:
                ggaskell Giles Gaskell
                Reporter:
                ggaskell Giles Gaskell
              • Votes:
                0 Vote for this issue
                Watchers:
                1 Start watching this issue

                Dates

                • Created:
                  Updated:
                  Resolved: