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

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

    XMLWordPrintable

    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

          relates to

          Task - A task that needs to be done. WEBSITE-416 Ability to add CSS-based borders (i.e. box shadows) to images on the jenkins.io site

          • Minor - Minor loss of function, or other problem where easy workaround is present.
          • Done

            Activity

            Ascending order - Click to sort in descending order
            ggaskell Giles Gaskell created issue -
            ggaskell Giles Gaskell made changes -
            Field Original Value New Value
            Description WEBSITE-416 implements its solution for boxshadow borders on images by requiring the author to specify {{[.boxshadow]}} above an image reference. E.g.
            {code:java}
            [.boxshadow]
            image:tutorials/java-maven-01-downloading-maven-docker-image.png[alt="Downloading Maven Docker image",width=100%]
            {code}
            for inline image references or
            {code}
            [.boxshadow]
            image::tutorials/java-maven-01-downloading-maven-docker-image.png[]
            {code}
            for a block image reference.

            This is based on the presence of the following CSS in {{content/css/jenkins.css}} file:
            {code}
            .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);
            }
            {code}             		*Background:*

            WEBSITE-416 implements its solution for boxshadow borders on images by requiring the author to specify {{[.boxshadow]}} above an image reference. E.g.

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

            for inline image references or

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

            for a block image reference.

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

            {code}
            .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);
            }
            {code}

            ----

            *Proposal:*

            It would be better if implement this on a page-specific basis
            ggaskell Giles Gaskell made changes -
            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.

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

            for inline image references or

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

            for a block image reference.

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

            {code}
            .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);
            }
            {code}

            ----

            *Proposal:*

            It would be better if implement this on a page-specific basis             		*Background:*

            WEBSITE-416 implements its solution for boxshadow borders on images by requiring the author to specify {{[.boxshadow]}} above an image reference. E.g.

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

            for inline image references or

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

            for a block image reference.

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

            {code}
            .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);
            }
            {code}

            ----

            *Proposal:*

            It would be better if implement this on a page-specific basis using [Asciidoctor's docinfo features|http://asciidoctor.org/docs/user-manual/#docinfo-file], which would provide the ability to implement CSS customizations on a page specific basis.
            ggaskell Giles Gaskell made changes -
            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.

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

            for inline image references or

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

            for a block image reference.

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

            {code}
            .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);
            }
            {code}

            ----

            *Proposal:*

            It would be better if implement this on a page-specific basis using [Asciidoctor's docinfo features|http://asciidoctor.org/docs/user-manual/#docinfo-file], which would provide the ability to implement CSS customizations on a page specific basis.             		*Background:*

            WEBSITE-416 implements its solution for boxshadow borders on images by requiring the author to specify {{[.boxshadow]}} above an image reference. E.g.

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

            for inline image references or

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

            for a block image reference.

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

            {code}
            .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);
            }
            {code}

            ----

            *Proposal:*

            It would be better if implement this on a page-specific basis using [Asciidoctor's docinfo features|http://asciidoctor.org/docs/user-manual/#docinfo-file], which would provide the ability to implement CSS customizations on a page specific basis.

            See WEBSITE-416 and [GitHub pull request 1193|https://github.com/jenkins-infra/jenkins.io/pull/1193] for details.
            Hide
            Permalink
            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?
            ggaskell Giles Gaskell made changes -
            Link This issue relates to WEBSITE-416 [ WEBSITE-416 ]

              People

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

                Dates

                Created:
                Updated: