GNOME.org
 

[gimp-web/testing] Finish removing script/style inline.

commit a03177c031a2188887bbba9cd94b1d0b5f0ed42b
Author: Pat David <patdavid gmail com>
Date:   Mon Oct 10 11:30:31 2016 -0500

    Finish removing script/style inline.

 .../Digital_Black_and_White_Conversion/index.css   |    9 +++++
 .../Digital_Black_and_White_Conversion/index.md    |   10 +++---
 content/tutorials/Layer_Masks/index.md             |    2 +-
 content/tutorials/Luminosity_Masks/index.md        |    6 ++--
 content/tutorials/Perl-Debugged/index.css          |   13 +++++++
 content/tutorials/Perl-Debugged/index.md           |    8 +++--
 .../Tone_Mapping_Using_GIMP_Levels/index.css       |   14 ++++++++
 .../Tone_Mapping_Using_GIMP_Levels/index.md        |   35 ++++++++++---------
 8 files changed, 68 insertions(+), 29 deletions(-)
---
diff --git a/content/tutorials/Digital_Black_and_White_Conversion/index.css 
b/content/tutorials/Digital_Black_and_White_Conversion/index.css
index 3a1df66..e4b8cab 100644
--- a/content/tutorials/Digital_Black_and_White_Conversion/index.css
+++ b/content/tutorials/Digital_Black_and_White_Conversion/index.css
@@ -1,2 +1,11 @@
 table { margin: 1rem auto; }
 td { padding-right: 1rem; }
+
+.color-ex {
+    text-align: center;
+    padding: 1rem;
+}
+.color080205255 {background-color: rgb(80, 205,255);}
+.color255172080 {background-color: rgb(255,172,80); }
+.color127127127 {background-color: rgb(127,127,127);}
+.color220220220 {background-color: rgb(222,220,220);}
diff --git a/content/tutorials/Digital_Black_and_White_Conversion/index.md 
b/content/tutorials/Digital_Black_and_White_Conversion/index.md
index 62b4357..34c632a 100644
--- a/content/tutorials/Digital_Black_and_White_Conversion/index.md
+++ b/content/tutorials/Digital_Black_and_White_Conversion/index.md
@@ -77,10 +77,10 @@ You are working in an RGB world when you stare at your monitors. Every single pi
 
 The variations in brightness of each of the sub-pixels will “mix” to produce the colors you finally see. The 
scales available in an 8-bit display are discrete levels from 0—255 for each color (2<sup>8</sup> = 256). So 
if all of the sub-pixel values are 0, the resulting color is black. If they are all 255, you’ll see white. 
Any other combination will produce some variation of a color.
 
-<p class="color-ex" style="background-color: rgb(80,205,255); text-align: center; padding: 1rem;">
+<p class="color-ex color080205255" >
 80, 205, 255 for instance
 </p>
-<p class="color-ex" style="background-color: rgb(255,172,80); text-align: center; padding: 1rem;">
+<p class="color-ex color255172080" >
 or 255, 172, 80
 </p>
 
@@ -88,10 +88,10 @@ or 255, 172, 80
 
 The important point to take away from this is to realize that when all three color channels are the same 
value, you’ll got a grey color. So a middle gray value of 127, 127, 127 would look like this:
 
-<p class="color-ex" style="background-color: rgb(127,127,127); color: #222; text-align: center; padding: 
1rem;">
+<p class="color-ex color127127127" >
 127, 127, 127
 </p>
-<p class="color-ex" style="background-color: rgb(222,220,220); text-align: center; padding: 1rem;">
+<p class="color-ex color220220220" >
 While this is a little brighter: 220, 220, 220
 </p>
 
@@ -201,7 +201,7 @@ The weighted function describing relative luminance is:
 <figcaption>This is closer to how our eyes will actually perceive the brightness of each color</figcaption>
 </figure>
 
-<figure style="background-color:white;">
+<figure>
 <img src="{filename}rgb-mix-luminosity.png" alt="RGB Luminosity Mix" />
 <figcaption>
 Notice the overwhelming contribution from green  
diff --git a/content/tutorials/Layer_Masks/index.md b/content/tutorials/Layer_Masks/index.md
index 6c535f2..eda1027 100644
--- a/content/tutorials/Layer_Masks/index.md
+++ b/content/tutorials/Layer_Masks/index.md
@@ -97,7 +97,7 @@ I want to fill this selection with black, but before I do I need to make sure th
 <figure>
 <img src="{filename}Change-Foreground-Color.png" alt="Change-Foreground-Color"/>
 <figcaption>
-Click the <span style="color: #00FF00;">foreground color</span> to change.
+Click the <span class='tGreen'>foreground color</span> to change.
 </figcaption>
 </figure>
 
diff --git a/content/tutorials/Luminosity_Masks/index.md b/content/tutorials/Luminosity_Masks/index.md
index 7208883..a7857ba 100644
--- a/content/tutorials/Luminosity_Masks/index.md
+++ b/content/tutorials/Luminosity_Masks/index.md
@@ -45,7 +45,7 @@ To begin creating the masks we will need to first get a luminosity representatio
 
 Either through the menus, or by Right-Clicking on the base layer in the **Layer Dialog**:
 
-<div class="MenuCmd"><span><span style="text-decoration: underline;">L</span>ayer → D<span 
style="text-decoration: underline;">u</span>plicate Layer</span></div>
+<div class="MenuCmd"><span>Layer → Duplicate Layer</span></div>
 
 <figure>
 <img src="{filename}Layer-Duplicate.png" alt="Layer-Duplicate"/>  
@@ -75,9 +75,9 @@ The easiest way to do this is through the **Channels** Dialog. If you don't see
 The <strong>Channels</strong> Dialog
 </figcaption></figure>
 
-On the <span style="color: #ff5500;">top half</span> of this window you’ll see the an entry for each channel 
in your image (Red, Green, Blue, and Alpha). On <span style="color: #00aaff;">the bottom</span> will be a 
list of any channels you have previously defined.
+On the <span class='tOrange'>top half</span> of this window you’ll see the an entry for each channel in your 
image (Red, Green, Blue, and Alpha). On <span class='tBrightBlue'>the bottom</span> will be a list of any 
channels you have previously defined.
 
-To create a new channel that will become your “Lights” channel, drag any one of the <span style="color: 
#ff5500;">RGB channels</span> down to the <span style="color: #00aaff;">lower window</span> (it doesn’t 
matter which - they all have the same data due to the desaturation operation).
+To create a new channel that will become your “Lights” channel, drag any one of the <span 
class='tOrange'>RGB channels</span> down to the <span class='tBrightBlue'>lower window</span> (it doesn’t 
matter which - they all have the same data due to the desaturation operation).
 
 Now rename this channel to something meaningful (like “**L**” for instance!), by double-clicking on its name 
(in my case it‘s called “Blue Channel Copy”) and entering a new one.
 
diff --git a/content/tutorials/Perl-Debugged/index.css b/content/tutorials/Perl-Debugged/index.css
new file mode 100644
index 0000000..2bdfee3
--- /dev/null
+++ b/content/tutorials/Perl-Debugged/index.css
@@ -0,0 +1,13 @@
+table.ptable {
+    background: #CCFFCC none;
+    max-width:34rem;
+    margin:1rem auto;
+}
+
+.ptable td.t20 {
+    width: 20%;
+}
+
+.ptable td.t40 {
+    width: 40%;
+}
diff --git a/content/tutorials/Perl-Debugged/index.md b/content/tutorials/Perl-Debugged/index.md
index 53b6d54..ece88de 100644
--- a/content/tutorials/Perl-Debugged/index.md
+++ b/content/tutorials/Perl-Debugged/index.md
@@ -64,15 +64,17 @@ The Gimp module provides tracing ability, which is a form of debugging. To activ
 
 This will give the maximum amount of tracing information, displayed on the console window you start GIMP 
from. You can cut back on what all gets displayed by using an "or'ed" combination of the following other 
options in place of TRACE_ALL:
 
-<table style="background: #CCFFCC none; max-width:34rem;margin:1rem auto;">
+<link rel='stylesheet' type='text/css' href='index.css' />
+
+<table class='ptable'>
 
 <tbody>
 
 <tr>
 
-<td style="width: 20%;">TRACE_NONE</td>
+<td class='t20'>TRACE_NONE</td>
 
-<td style="width: 40%">turn off tracing</td>
+<td class='t40'>turn off tracing</td>
 
 </tr>
 
diff --git a/content/tutorials/Tone_Mapping_Using_GIMP_Levels/index.css 
b/content/tutorials/Tone_Mapping_Using_GIMP_Levels/index.css
new file mode 100644
index 0000000..a66e605
--- /dev/null
+++ b/content/tutorials/Tone_Mapping_Using_GIMP_Levels/index.css
@@ -0,0 +1,14 @@
+ol {
+    max-width: 35rem !important;
+}
+
+.italic {
+    font-style: italic;
+}
+
+.float-right { float: right; }
+.bottom-margin { margin-bottom: 1rem; }
+.top-margin-05 { margin-top: -0.5rem; }
+.top-margin-1 { margin-top: 1rem; }
+
+ol.lowerroman { list-style-type: lower-roman; }
diff --git a/content/tutorials/Tone_Mapping_Using_GIMP_Levels/index.md 
b/content/tutorials/Tone_Mapping_Using_GIMP_Levels/index.md
index bd5c732..bc672ad 100644
--- a/content/tutorials/Tone_Mapping_Using_GIMP_Levels/index.md
+++ b/content/tutorials/Tone_Mapping_Using_GIMP_Levels/index.md
@@ -12,6 +12,7 @@ canonical: http://ninedegreesbelow.com/photography/gimp-tone-map-with-levels.htm
 <span xmlns:dct="http://purl.org/dc/terms/";>GIMP Tutorial - Tone Mapping Using GIMP Levels (text & 
images)</span> by [Elle Stone](http://ninedegreesbelow.com/) is licensed under a [Creative Commons 
Attribution-ShareAlike 3.0 Unported License](http://creativecommons.org/licenses/by-sa/3.0/).
 </small>
 
+<link rel='stylesheet' type='text/css' href='index.css'>
 
 <!-- BEGIN ARTICLE -->
 
@@ -30,7 +31,7 @@ This step-by-step tutorial shows you how to use GIMP's unbounded floating point
 <figure>
 <img src='power-lines.jpg' alt='power-lines' width='768' height='614' >
 <figcaption>
-<em style='font-weight: 400;'>Power lines at noon</em>, before and after tone mapping (aka "shadow 
recovery") using high bit depth GIMP's floating point "Colors/Exposure".<br>
+<em><strong>Power lines at noon</strong></em>, before and after tone mapping (aka "shadow recovery") using 
high bit depth GIMP's floating point "Colors/Exposure".<br>
 (Click to view):<br>
 <span class='toggle-swap' data-fig-swap='before-auto-stretch-contrast.jpg'>Scene-referred interpolated raw 
file.</span><br>
 <span class='toggle-swap' data-fig-swap='power-lines.jpg'>After tone mapping/shadow recovery using GIMP 
unbounded Levels.</span>
@@ -69,7 +70,7 @@ Using high bit depth GIMP's "Colors/Exposure" to lighten the ground by one stop
 
 This step-by-step example provides a sample image and is broken down into five steps, starting with 
downloading the image. Steps 3, 4, and 5 describe the actual procedure, so here's an overview:
 
-<ol start='3' style='padding-left: 3rem; font-style: italic;' markdown=1 >
+<ol start='3' class='italic' markdown=1 >
 3. Duplicate the base layer and then use GIMP's unbounded Levels to add one stop of positive exposure 
compensation to the duplicated layer.
 4. Add an inverse grayscale layer mask to the now much brighter duplicated layer.
 5. Do "Auto/Stretch Contrast" on the layer mask and then fine-tune the mask until you are happy. Then make a 
"New from Visible" layer.
@@ -77,7 +78,7 @@ This step-by-step example provides a sample image and is broken down into five s
 
 ---
 
-<ol style='max-width: 35rem;' markdown=1>
+<ol markdown=1>
 
 <li><b>Download <a href="tree.png">tree.png</a></b>, which is a 16-bit integer sRGB image. High bit depth 
GIMP really is an "sRGB only" image editor, so it's best if you don't even try to edit in other RGB working 
spaces.</li>
 
@@ -109,7 +110,7 @@ When using "Colors/Exposure" to add one stop of positive exposure compensation,
 </li>
 
 <li>
-<img style='float: right;' src="add-inverse-grayscale-mask.jpg" alt="add-inverse-grayscale-mask" width='292' 
height='381'>
+<img class='float-right' src="add-inverse-grayscale-mask.jpg" alt="add-inverse-grayscale-mask" width='292' 
height='381'>
 <b>Add an inverse grayscale layer mask</b>: Right-click on the layer and select "Layer/Mask/Add Layer Mask", 
and when the "Add a mask to the Layer" dialog pops up, choose "Grayscale copy of layer" and check the "Invert 
mask" box. 
 <p>As shown in Figure 5 below, at this point the highlights will be brought back into the display range, 
meaning all RGB channel values are between 0.0f and 1.0f. But the image will probably look a little odd (sort 
of cloudy and flat), and depending on the image, the brightest highlights might actually have dark 
splotches&mdash;don't worry! this is temporary.</p>
  
@@ -123,7 +124,7 @@ When using "Colors/Exposure" to add one stop of positive exposure compensation,
 
 
 <li>
-<img src="auto-stretch-contrast-mask.jpg" alt="auto-stretch-contrast-mask" style='float:right; margin-left: 
1rem;' width='301' height='230' >
+<img src="auto-stretch-contrast-mask.jpg" alt="auto-stretch-contrast-mask" class='float-right' width='301' 
height='230' >
 <b>Click on the layer mask to select it for editing, and then select "Colors/Auto/Stretch Contrast"</b>: 
 <p>"Keep Colors" should be checked (though it doesn't really matter on grayscale images such as layer 
masks). Figure 6 below shows the final result:</p>
 
@@ -158,20 +159,20 @@ That's the whole procedure for using "Colors/Exposure" to add a stop of positive
 (Click to view):<br>
 <span class='toggle-swap' data-fig-swap='apple-orchard-truck-from-camera.jpg'>1. Image from the camera, 
underexposed to avoid blowing out highlights..</span><br>
 <noscript>
-<img src='apple-orchard-truck-from-camera.jpg' alt='apple-orchard-truck-from-camera' 
style='margin-bottom:1rem;' width='593' height='395'>
+<img src='apple-orchard-truck-from-camera.jpg' alt='apple-orchard-truck-from-camera' class='bottom-margin' 
width='593' height='395'>
 </noscript>
 <span class='toggle-swap' data-fig-swap='apple-orchard-truck-tone-mapped-using-gimp-colors-exposure.jpg'>2. 
After tone mapping/shadow recovery using high bit depth GIMP's floating point "Colors/Exposure".</span><br>
 <noscript>
-<img src='apple-orchard-truck-tone-mapped-using-gimp-colors-exposure.jpg' 
alt='apple-orchard-truck-tone-mapped-using-gimp-colors-exposure' style='margin-bottom:1rem;' width='593' 
height='395'>
+<img src='apple-orchard-truck-tone-mapped-using-gimp-colors-exposure.jpg' 
alt='apple-orchard-truck-tone-mapped-using-gimp-colors-exposure' class='bottom-margin' width='593' 
height='395'>
 </noscript>
 <span class='toggle-swap' data-fig-swap='apple-orchard-truck-tone-mapped-using-gegl-mantuik.jpg'>3. For 
comparison, Mantuik tone-mapping using the GEGL default settings.</span><br>
 <noscript>
-<img src='apple-orchard-truck-tone-mapped-using-gegl-mantuik.jpg' 
alt='apple-orchard-truck-tone-mapped-using-gegl-mantuik' style='margin-bottom:1rem;' width='593' height='395'>
+<img src='apple-orchard-truck-tone-mapped-using-gegl-mantuik.jpg' 
alt='apple-orchard-truck-tone-mapped-using-gegl-mantuik' class='bottom-margin' width='593' height='395'>
 </noscript>
 
 <p>Using GIMP's floating point "Colors/Exposure" plus layer masks to add two and a half stops of positive 
exposure compensation to the shadows and midtones of a "bright sun" photograph of an apple orchard truck.</p>
 
-<p><img style='float:right;' src="orchard-truck-layer-stack.jpg" alt="orchard-truck-layer-stack" width='465' 
height='432'>To the right is a screenshot of the layer stack that I used to tone-map the photograph of the 
apple orchard truck. Tone-mapping by hand gives you complete control over the resulting image. Mantuik and 
other "automagic" tone-mapping algorithms are CPU-intensive, unpredictable, and often produce 
unnatural-looking results.</p>
+<p><img class='float-right' src="orchard-truck-layer-stack.jpg" alt="orchard-truck-layer-stack" width='465' 
height='432'>To the right is a screenshot of the layer stack that I used to tone-map the photograph of the 
apple orchard truck. Tone-mapping by hand gives you complete control over the resulting image. Mantuik and 
other "automagic" tone-mapping algorithms are CPU-intensive, unpredictable, and often produce 
unnatural-looking results.</p>
 </figcaption>
 </figure>
 </li>
@@ -190,20 +191,20 @@ Before and after doing "Colors/Auto/Stretch Contrast" on the base layer, plus th
 <span class='toggle-swap' data-fig-swap='after-auto-stretch-contrast.jpg'>2. After doing 
"Colors/Auto/Stretch Contrast".</span><br>
 <span class='toggle-swap' data-fig-swap='power-lines.jpg'>3. Final "Power lines" image.</span>
 
-<ol style='margin-top: 1rem;'>
+<ol class='top-margin-1'>
 <li>This scene-referred interpolated raw file from the PhotoFlow raw processor (which provides a GIMP 
plug-in for easy opening of raw files) has out-of-display-range RGB channel values that will be brought back 
into the display range by doing "Colors/Auto/Stretch Contrast".</li>
 <noscript>
-<img src='before-auto-stretch-contrast.jpg' alt='before-auto-stretch-contrast' style='margin-top:-0.5rem; 
margin-bottom:1rem;' width='593' height='474'>
+<img src='before-auto-stretch-contrast.jpg' alt='before-auto-stretch-contrast' class='top-margin-05 
bottom-margin' width='593' height='474'>
 </noscript>
 
 <li>After doing "Colors/Auto/Stretch Contrast", shadows are lighter and highlights are darker because the 
dynamic range has been compressed to fit within the display range. This looks like an editing step in the 
wrong direction! but actually it's necessary.</li>
 <noscript>
-<img src='after-auto-stretch-contrast.jpg' alt='after-auto-stretch-contrast' style='margin-top:-0.5rem; 
margin-bottom:1rem;' width='593' height='474'>
+<img src='after-auto-stretch-contrast.jpg' alt='after-auto-stretch-contrast' class='top-margin-05 
bottom-margin' width='593' height='474'>
 </noscript>
 
 <li>Here's the final "Power lines" image after tone mapping the scene-referred interpolated raw file using 
the procedure described in this tutorial.</li>
 <noscript>
-<img src='power-lines.jpg' alt='power-lines' style='margin-top:-0.5rem; margin-bottom:1rem;' width='593' 
height='474'>
+<img src='power-lines.jpg' alt='power-lines' class='top-margin-05 bottom-margin' width='593' height='474'>
 </noscript>
 </ol>
 
@@ -217,9 +218,9 @@ Before and after doing "Colors/Auto/Stretch Contrast" on the base layer, plus th
 
 
 <li> <b>Dispensing with "useless" shadow and highlight information:</b> Sometimes interpolated raw files of 
photographs of high dynamic range scenes end up with a sprinkling of highlight and shadow pixels that 
contains essentially no useful information. The easiest thing to do with such pixels is to use 
"Colors/Exposure" to set the desired black and white points, and then clip the resulting out of gamut channel 
information.
-  <ol style="list-style-type: lower-roman">
+  <ol class='lowerroman'> 
   <li><i><b>Useless highlight information:</b></i>
-<p><img style='float:right;' src="histogram-specular-highlights.jpg" alt="histogram-specular-highlights" 
width='374' height='322'>
+<p><img class='float-right' src="histogram-specular-highlights.jpg" alt="histogram-specular-highlights" 
width='374' height='322'>
 For the "Power lines" picture shown in Figure 8 above, after doing "Color/Auto/Stretch Contrast", a measly 
48 pixels occupied nearly half the tonal range (see the histogram to the right). A little investigation with 
GIMP's Threshold tool revealed that all 48 pixels are the peak values of specular highlights on the ceramic 
insulators on the power line pole in the foreground.</p> 
 
 <p>In cases where nearly half the histogram is occupied by a sprinkling of specular highlights, clipping the 
pixels is often the best and easiest solution. For the "Power lines" image, the 48 pixels in question carried 
essentially zero information. So I used "Colors/Exposure" to raise the white point, and then used "Tools/GEGL 
Operation/Clip RGB" to actually clip the channel information in the highlights (this time making sure the 
"Clip high pixel values" box was checked). </p>
@@ -246,13 +247,13 @@ For the "Power lines" picture shown in Figure 8 above, after doing "Color/Auto/S
 <span class='toggle-swap' data-fig-swap='without-bilateral-smoothing-of-mask.jpg'>Without applying bilateral 
smoothing to the mask, micro contrast is flattened.</span><br>
 
 <noscript>
-<img src='without-bilateral-smoothing-of-mask.jpg' alt='without-bilateral-smoothing-of-mask' 
style='margin-bottom: 1rem;' width='593' height='474'>
+<img src='without-bilateral-smoothing-of-mask.jpg' alt='without-bilateral-smoothing-of-mask' 
class='bottom-margin' width='593' height='474'>
 </noscript>
 
 <span class='toggle-swap' data-fig-swap='with-bilateral-smoothing-of-mask.jpg'>After applying bilateral 
smoothing to the mask, micro contrast is restored.</span>
 
 <noscript>
-<img src='with-bilateral-smoothing-of-mask.jpg' alt='with-bilateral-smoothing-of-mask' style='margin-bottom: 
1rem;' width='593' height='474'>
+<img src='with-bilateral-smoothing-of-mask.jpg' alt='with-bilateral-smoothing-of-mask' class='bottom-margin' 
width='593' height='474'>
 </noscript>
 
 <p>Adding exposure compensation combined with an inverse grayscale mask does flatten micro contrast, which 
might or might not be desireable depending on your artistic intentions for the image. To restore micro 
contrast, try using an edge-respecting blur such as G'MIC's bilateral smoothing filter. GIMP G'MIC doesn't 
work on layer masks. A workaround is to to turn the unblurred mask into a selection, save the selection as a 
channel, and then drag the channel to the layer stack for blurring.</p>
[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]