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

Webhooks

Browser to Web Server to Web Server

When we read pages our browser retrieves them from a web server through an HTML GET. These HTML GETs are our downloads – the bulk of bandwidth and data plans. When a blogger hits the Publish button (input tag) in a WordPress.com site the browser sends an HTML POST to the wordpress.com web server.

<input id="publish" class="button button-primary button-large"
 type="submit" accesskey="p" value="Publish" name="publish">

Then with a webhook tied to your_server.com, the wordpress.com web server can HTML POST details of your posting to your_server.com.  WordPress lets you choose which details to track, and can HTML POST in response to Post Publishing, Page Publishing, and Commenting.

Dashboard(your browser)
 → WordPress.com(Web Server)
   → your_server.com(Web Server)

Essentially a WordPress webhook allows you to collect extensive statistics and identity information on your own server. This means you need to have your own server account and some code in your favorite language to listen for HTML POSTs from WordPress.com to the webhooked URL. Such code can save, analyze and display information from any webhooked blog.

A deep coder extra credit opportunity

Robin could ask us to webhook all our blogs to a code on her server for centralized tracking of class publishing and commenting.  For comments a great deal of information can be gleaned, but it is not specified that the HTML POST will tell us to which blog a comment is posted.  But with a unique URL on Robin’s server for each student blog, we could track the web of commenting relations between students.

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.

Night Zero

GoDaddy Installatron

Stats for GoDaddy’s WordPress

• Version 8.1 installed for free (Gnu Public License)
• 21 MBytes
• A single blogging sub domain of DeepCoder
• Only 3 themes (wordpress.com free account has many more)
• auto magic MySQL database (Thank you Installatron)

After a light exploration of customizations for the install, theme, and settings I think we can spend significant time learning WordPress nomenclature and capabilities.

First Code Evaluation

Let us look at what goes into HTML <title> tag which gets placed on a browser tab for our first page.

<title>DeepCoder's WordPress Initial Experience | Explore In Code</title>

1. Page title is “DeepCoder’s WordPress Initial Experience”
2. Tag line is “Explore In Code”
3. Browser tab is “DeepCoder’s WordPress Initial Experience | Explore In Code”

A theme customization form fills in this title tag. The tag line is optional. The page header uses this same information. I don’t like tying the browser tab display to the page heading / sub-heading. Though we have not seen a favicon hook yet, so there may be hope
inside WordPress’s dashboard (hands distanced from code) — else we will have to go deeper in html or php code