Tip: Creating a newspaper layout in Blogger with the first image before the article

A request that often is brought up in Blogger development forums is the desire to break the conventional post/article format of date -> post title -> post body -> post footer and do something such as moving the first image of the first article to come before the post title, or even elsewhere in the web page.

For example, this is an example request: Trouble Moving the Title Beneath Title Image

This is the graphic included as a visual of what the author is attempting to do:

As I commented at first in the discussion, there are two ways this could be approached. The first, and harder method, is to redevelop the Blogger template. Unless you're skilled in template development, this will not end well, and there is no simple change to make this happen. Additionally, to make the logic work and only affect this change on the first post would be quite difficult.

The second approach uses JQuery. The code provided below will affect this change on ALL pages as it is currently written, but will move the first image of the first post to go before the post's title. If you want you can wrap this code within Blogger if/else statements to make it only occur on certain pages or types of pages, and you can also borrow from other JQuery scripts in our site to easily resize the image to fill the available space.

<script language='javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>//<![CDATA[
/**
this script was written by Confluent Forms LLC http://www.confluentforms.com
for the BlogXpertise website http://www.blogxpertise.com
any updates to this script will be posted to BlogXpertise
please leave this message and give credit where credit is due!
**/
$(document).ready(function(){
// the order goes container -> body -> surround -> image
var body = $('.post-body').first();
var container = $(body).parent();
var image = $(body).find('img').first();
var surround = $(image).parent();
$(surround).prependTo(container);
});
//]]></script>

Download the clean version of the code.