Welcome
HTML |
---|
<script> //Ver. 2.10 // 2.02 added styles for page-breaks w/o line // 2.03 captions + ruler page-break issue corrected // 2.04 exclusion of img.emoticon (.svg btw) from getting frame & responsiveness // 2.05 no not insert a caption if title is empty // 2.06 force font-weight:normal (no bold) in caption // 2.07 commented/removed 1200 px width limit // 2.08 added class removal for old-fashioned "back to top" bottom icon // 2.09 force NO style whatsoever to tiny images (imgCenter & imgShadow lead to misplacement of icons in mid-sentences) // 2.10 forced caption color (solves orange caption "bug" without the need to clear formatting) $(document).ready(function(){ $("#main-content.wiki-content img").filter(":not([data-linked-resource-default-alias='top_of_page.jpg'])").each(function(){ // for each image but "back-to-top" in the main page $(this).attr({"src": $(this).attr("data-image-src"),"height":""}) // remove any predefined style (snapshot) and any height ('coz width gets modified and it impacts img ratio) $(this).addClass("imgFrame imgShadow imgCenter imgResponsive").css("max-width",$(this).attr("width")+"px"); // add the frameshadow style, sets max-width to user-defined width (700, 900) var t="" if($(this).is("[title]") && $(this).attr("title")!="") { t=$(this).attr("title") // if a title is set, it becomes the value of "t" $(this).parent().after('<figcaption class="imgcaption">'+t+'</figcaption>') // a sub caption is created under the image, with the value of t, the title } if($(this).attr("data-linked-resource-content-type")=='image/png'){ /*remove classes from png */ $(this).removeClass("imgFrame imgShadow imgCenter") } if($(this)[0].width <160) { /*no frame or responsive size for tiny images*/ $(this).removeClass("imgFrame imgResponsive imgShadow imgCenter") //2.08 removeClass("imgFrame imgResponsive"), 2.09 removeClass("imgFrame imgResponsive imgShadow imgCenter") } $("[alt='top_of_page.jpg']").removeClass("imgShadow") //2.08 $(".emoticon").removeClass("imgFrame imgResponsive imgShadow imgCenter") //2.04 }) }) </script> <style> #main-content.wiki-content LI IMG.imgCenter, #main-content.wiki-content LI IMG.imgShadow, #main-content.wiki-content LI IMG.imgResponsive{ /*perfectly centers images in lists by removing the list-induced tabulation*/ transform:translateX(-20px); } .imgFrame {border:1px solid #ccc; background:transparent; padding:5px;} .imgShadow{box-shadow:0 0 15px rgba(0,0,0,0.2);} .imgCenter{margin:20px auto 0 auto !important;} .imgResponsive{/*min-width:160px;*/width:calc(100% - 20px)!important;} .wiki-content .columnLayout {/*max-width:1200px;*/} /* extranet has no width limit: set max width to 1200px */ .imgcaption {font-style:italic;font-size:0.85rem; text-align:center; margin:10px 0;font-weight:normal;color:#172b4d !important; } /* style for the auto generated image sub caption*/ //2.10 .wiki-content .confluence-embedded-file-wrapper.confluence-embedded-manual-size {page-break-inside:avoid;} /*prevents page break between an image and its sub caption*/ .page-break-ruler, .page-break-simple{ page-break-after: always; line-height: 1em; } .page-break-ruler{ border-top: 1px solid #ccc; margin-top: 20px;} </style> |