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

Implement a cleaner solution for WEBSITE-416 (boxshadow borders on images).

    Details

    • Similar Issues:

      Description

      Background:

      WEBSITE-416 implements its solution for boxshadow borders on images by requiring the author to specify [.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.

      This is based on the presence of the following CSS in content/css/jenkins.css file:

      .imageblock.docinfoboxshadow img {
        margin: 5px 5px 5px 5px;
        -moz-box-shadow: 0 0 15px 0px rgba(0, 0, 0, 0.5);
        -webkit-box-shadow: 0 0 15px 0px rgba(0, 0, 0, 0.5);
        box-shadow: 0 0 15px 0px rgba(0, 0, 0, 0.5);
      }
      
      .paragraph.docinfoboxshadow img {
        margin: 5px 5px 5px 5px;
        -moz-box-shadow: 0 0 15px 0px rgba(0, 0, 0, 0.5);
        -webkit-box-shadow: 0 0 15px 0px rgba(0, 0, 0, 0.5);
        box-shadow: 0 0 15px 0px rgba(0, 0, 0, 0.5);
      }
      

      Proposal:

      It would be better if implement this on a page-specific basis using Asciidoctor's docinfo features, which would provide the ability to implement CSS customizations on a page specific basis.

      See WEBSITE-416 and GitHub pull request 1193 for details.

        Attachments

          Issue Links

            Activity

            Hide
            ggaskell Giles Gaskell added a comment -

            Brief update - I tried the trick described here (http://discuss.asciidoctor.org/Borders-for-images-td1957.html) by placing the CSS tweaks in a docinfo.html file and running the command asciidoctor -a docinfo2 sample.adoc, which successfully resulted in images (in the output HTML) displaying shadow-borders without the need for explicit [.boxshadow] references above each image.

            However, I'm not sure how this would work with jenkins.io's current Awestruct/Asciidoctor setup - i.e. is it possible with this setup to pass the docinfo2 parameter into the asciidoctor command with in the jenkins.io build?

            Show
            ggaskell Giles Gaskell added a comment - Brief update - I tried the trick described here ( http://discuss.asciidoctor.org/Borders-for-images-td1957.html ) by placing the CSS tweaks in a docinfo.html file and running the command asciidoctor -a docinfo2 sample.adoc , which successfully resulted in images (in the output HTML) displaying shadow-borders without the need for explicit [.boxshadow] references above each image. However, I'm not sure how this would work with jenkins.io's current Awestruct/Asciidoctor setup - i.e. is it possible with this setup to pass the docinfo2 parameter into the asciidoctor command with in the jenkins.io build?

              People

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

                Dates

                • Created:
                  Updated: