Images

Outputs including a significant number of all kinds of images might require a fair amount of testing and editing of those images, especially in localized versions. To deal with any issue related to images, it is quite handy to include their filename in the debug output, for instance:

• Makes it easier to access image files among a myriad of image files tacked under a several layers deep directory
• Helps in making further references to any given image file when, for example, logging an issue with that image or requesting an edit from the artwork editors

A technique to accomplish such goal consists of concatenating the src attribute value of an image tag to the tag itself. For example: given the image tag

the src value ../figure.jpg is appended to the closing /> string:

The appended filename can be further styled by enclosing it in a <span> tag with its appropriate class. To achieve such results, run a regular expression text replacement procedure in Flare Find and Replace in Files:

The required expression settings are:

The following image shows Flare Find and Replace in Files pane settings:

The resulting underlying code would look like this:

<img src="../figure.jpg" /><span class="imgDbug">../figure.jpg</span>

Debug.css includes the following selector and declaration for this supporting class:

    .imgDbug {
        font-size: .6em;
        background-color: lightgray;
        display: inline;
    }

An example of generated output might look like this: