Gratuitous Gallery

Where We Start

Where We Want To Go

Code

<div class="tiled-gallery type-square" ...
    <div class="tiled-gallery-item">
        <a href="https://deepcoder.wordpress.com/?attachment_id=55" border="0">
            <img width="189" height="189" ...
        </a>
        <div class="tiled-gallery-caption" style="display: none;">Where We Start</div>
    ...
        <div class="tiled-gallery-caption" style="display: none;">Where We Want To Go</div>

The WordPress Chunk theme gallery code opens with CSS classes for a tiled-gallery of type-square layout. Then the item gets its own div and class tiled-gallery-item. The item is actually an image (img tag) wrapped in a link (a tag).

Nice, except my theme throws away my carefully worded captions as seen in the last lines with local (read low tech, poor style) style=”display: none;“.

Update

Happy after publishing the post as my captions show up in a hover event.  But there is a mystery which begs deeper code browsing.  While there are CSS hover sections, the low level HTML local style=”display: none;“ gets dynamically overwritten at the HTML level by some script.  Firebug shows me a goodly number of javascripts. And we know that WordPress uses PHP such that we may need FirePHP to go deep into this code.

Stay tuned as we learn about Firebug and FirePHP for HTML/CSS delving with the Inspect-Element button and progress to deeper looks at script code.

Advertisement

Media Library Reduced Image: Does it Cost a Full Size Download?

Media Library Thumbnail Insert

Photoshop Class Photo

The above thumbnail is 132 by 150 pixels or a total of 19,800 pixels inserted from a full size photo in the media library.  The original is 648 by 732 pixels for 475,632 total pixels in a 68KiB JPEG file.  The full size image is 24 times larger than the thumbnail.

Thumbnail Insert Code:

---

 

<div id=”attachment_9” style=”width: 142px” class=”wp-caption aligncenter“>
<a href=”https://deepcoder.files.wordpress.com/2014/04/w_retouch_brianstafford_q60.jpg“>
<img class=”size-thumbnail wp-image-9”
src=”https://deepcoder.files.wordpress.com/2014/04/w_retouch_brianstafford_q60.jpg?w=132&h=150”
alt=”Brian in Photoshop Class”
width=”132”
height=”150” />
</a>
<p class=”wp-caption-text“><br />Photoshop Class Photo</p></div>

---

We see fixed sizing in the enclosing ‘div’ with id ‘attachment_9’ with a width of 142px.  The ‘img’ tag also has fixed sizing, width = “132” and height = “150”.  My first guess from the ‘img’ sizing is that a full sized download may be used, and the browser is given the work of resizing the download.

My second guesses involve the ‘img’ tag’s src =

“https://deepcoder.files.wordpress.com/2014/04/w_retouch_brianstafford_q60.jpg?w=132&h=150“.
The part after the .jpg file name translates to: ? w=132 & h=150. This could be telling the WordPress (MySQL) database to either actively reduce the original file size, or else the database has stored the reduced file size and this suffix (after the ? part) is accessing a hidden thumbnail (not shown in my Media Library).

The issues are:

• Risk of an over sized download with high data charges for phone users or hosts other than WordPress.com
• Streamlining the Media Library to hide variants of our originals.