Tag Archives: wordpress.com

May 15 2014
Leave a comment
wordpress, wordpress.com Gallery

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
Tagged , , , , , , , , , , , , ,
May 07 2014
Leave a comment
wordpress, wordpress.com

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.
Tagged , , , , ,
Apr 24 2014
Leave a comment
wordpress, wordpress.com Video

video code

Code Impact from Dashboard Format Selection

By changing from Standard to Video format of the blog post we get the following three additions:

<body class="... single-format-video ...">
<div class="...format-video ...">
<span class="entry-format">
<a href="https://deepcoder.wordpress.com/type/video/"
   title="All Video posts">Video</a></span>

The first two additions are classes for extra CSS code.  My theme does not seem to take advantage of this code, but if we customize this theme we will have a place to hang our CSS which will hopefully be portable across theme upgrades, changes, or WordPress.org upgrades.

The third addition is a button titled “All Video posts” to presumably bring up a page with all the Video format blog posts.

Tagged , , ,
Apr 11 2014
Leave a comment
wordpress, wordpress.com

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

Media Library Thumbnail Insert

Brian in Photoshop Class


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.
Tagged , , , ,