Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I first posted this on StackOverflow, but now I realise that this is probably more suited for this site.

Updated 26 Feb. 2014

I already that this question will be quite elaborate, so for everyone who is willing to try something to help me: I will put out a bounty as soon as I can.


The loop (front page) of my website looks like this. (Zoomed out for better overview) Front page

As you can see, it is a regular "blog"-like stream of posts with a title, some meta information, a thumbnail ('featured image') and an excerpt. The wrapper (parent) of the thumbnail image is restricted to 658 pixels wide and 120px tall. The image itself has max-width: 100% so it will never be wider than its parent. In code, it looks something like this:

.entry-thumbnail {
  max-height: 120px;
  overflow: hidden;
  margin-bottom: 1em;
.entry-thumbnail img {
  height: auto;
  max-width: 100%;
  margin: 0 auto;

This works quite well if the content on the picture itself is at the top. However, when the top of the image is rather empty, the thumbnail looks empty as well. That is because only the top 120px of the image is shown. The remaining pixels are "cut off" because of the overflow: hidden that sits on its parent.

As an example, you can see that there is way too much white space at the top. Too much white space

A solution

EDIT 1: an answer provided by D. Kasipovic gives a good new insight. Rather than saving two seperate images (a full thumbnail and a cropped one), it should be possible to save the offset positions of the image. That way, these values can be inserted per image on the front page without having to use multiple images.

EDIT 2: I edited the fiddle. Now the value that is seen in the input field (#offset-val) changes whenever one changes the position of the image. The value that is represented is a value relative to its parent.

Ideally this value is saved in a database (and overwritten when changed) and when called, the thumbnail gets a css value of top: X in which case X stands for the value that is in the database.

What I have tried so far

First I have been looking into how I could make a draggable image and all that. (Cf. aforementioned fiddle). This works fine. I have looked into canvas and save canvas to image to save the image. However, this is not what I need. I have finished the fiddle. Now it's only a matter of saving the value of the input field to the database and hooking this value to the the_post_thumbnail function (with a filter?) so that when on the front page an extra argument is passed to it, namely the style="top:X;" value.

What needs to be done/goal

  • (End up with a Wordpress plugin)
  • Save value to database (and overwrite when changed)
  • In the loop the value should be imported as the X value of top inside a style-tag
  • Either the the_post_thumbnail() should be changed so style="top=X;" is inserted, only when in the loop on archive pages or the front page

Please do tell if something is not clear. It's clear in my mind, but it's hard to put into words.

share|improve this question

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Browse other questions tagged or ask your own question.