Standardise links to software images using appropriate "constants" instead of string literals

Author: delphidabbler

_software/aboutbox.html

@@ -30,7 +30,7 @@ <h2 class="panel-title">
       This  non-visual component encapsulates an About Box. When displayed the About Box appears like this:
     </p>
     <p class="text-center">
-      <img src="{{ site.base-url }}/assets/images/software/aboutbox.png" alt="Vista screenshot of About dialog box" title="About dialog box" class="scale" style="width:360px;" />
+      <img src="{{ site.base-url }}{{ site.data.core.software-images-base-url}}/aboutbox.png" alt="Vista screenshot of About dialog box" title="About dialog box" class="scale" style="width:360px;" />
     </p>
     <p class="alert alert-warning glyph">
       <var>TPJAboutBoxDlg</var> requires that a DelphiDabbler <a href="{{ site.base-url }}{{ site.data.core.software-base-url}}/verinfo">Version Information Component</a> is already installed in order to compile.

_software/stringpe.html

@@ -84,19 +84,19 @@ <h3 data-toggle="collapse" data-target="#screenshots" class="collapsible collaps
         Our first screen shot is of the extended string editor dialog box, called from Delphi 2010, displaying a two line string.
       </p>
       <p class="text-center">
-        <img src="{{ site.base-url }}/assets/images/software/stringpe-1.png" alt="Extended String Property Editor Screen Shot" title="Extended String Property Editor" class="scale" style="width:380px;">
+        <img src="{{ site.base-url }}{{ site.data.core.software-images-base-url}}/stringpe-1.png" alt="Extended String Property Editor Screen Shot" title="Extended String Property Editor" class="scale" style="width:380px;">
       </p>
       <p>
         The second screen shot shows the object inspector displaying a multi-line string in a label's caption. This caption has been entered using the extended string property editor. The ellipsis button displays the editor when clicked.
       </p>
       <p class="text-center">
-        <img src="{{ site.base-url }}/assets/images/software/stringpe-2.png" alt="Object Inpsector Screen Shot" title="Object Inspector showing elipsis leading to property editor" class="scale" style="width:347px;">
+        <img src="{{ site.base-url }}{{ site.data.core.software-images-base-url}}/stringpe-2.png" alt="Object Inpsector Screen Shot" title="Object Inspector showing elipsis leading to property editor" class="scale" style="width:347px;">
       </p>
       <p>
         As can be seen above we are editing a <var>TLabel</var>. The final screenshot shows the label on a form at design time, displaying the two lines of text.
       </p>
       <p class="text-center">
-        <img src="{{ site.base-url }}/assets/images/software/stringpe-3.png" alt="Form screen shot" title="Two line label in form" class="scale" style="width:175px;">
+        <img src="{{ site.base-url }}{{ site.data.core.software-images-base-url}}/stringpe-3.png" alt="Form screen shot" title="Two line label in form" class="scale" style="width:175px;">
       </p>
     </div> <!-- /#screenshots -->
   </div>