Details
-
Type:
Task
-
Status: To Do (View Workflow)
-
Priority:
Minor
-
Resolution: Unresolved
-
Labels:None
-
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
-
WEBSITE-416 Ability to add CSS-based borders (i.e. box shadows) to images on the jenkins.io site
-
- Done
-
Activity
Field | Original Value | New Value |
---|---|---|
Description |
{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:* {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 |
Description |
*Background:* {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:* {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. |
Description |
*Background:* {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:* {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 |
Link |
This issue relates to |
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?