I have my own blog on http://www.picturethenature.com, i am using blogspot as my place to keep the blog. I just have a small, but annoying problem.
I have the front page with all posts i have made, there is a small "example" of the post, with a picture and text, right now the picture doesn't have any function, and then i have the post page with all of the text for the post and the picture. On the post page you can click the image and it will show up bigger.
On the front page i would like to be able to click the picture to go to the post page and still be able to click the image on the post page to make it bigger.
Right now i have tried to put in this line of code different places:
<a expr:href='data:post.link'>[whatever the code for the image is]</a>
But the places i have put it in just make the pictures big with no function or big with the function of making it bigger.
The people i have used to look at the code says the picture isn't mentioned in the code for this specific list on the front page. But is it possible to mention it somehow?
The code for the post example on the front page is this:
<div class='post hentry uncustomized-post-template'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<b:if cond='data:blog.url != data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>
<div class='post-header'>
<div class='post-header-line-1'/>
</div>
<div class='post-body entry-content' expr:id='"post-body-" + data:post.id'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
Is it possible to make this without rewriting everything on the website?
Thank you very much for your time.
Edit: Extra code asked for in the comment
<div class='post-body entry-content'>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == "static_page"'><data:post.body/> </b:if>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<div style='float:right;padding-right:10px;margin-top:10px;'>
<a class='readmorenbt' expr:href='data:post.url'>Read More</a>
</div>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<div style='clear:both;'/>
<div class='post-share-buttons'>
<b:include data='post' name='shareButtons'/>
</div>
The best way to do this would be to replace <data:post.body/> with
<b:if cond='data:blog.pageType == "index"'>
<div class='index-artwork'>
<a expr:href='data:post.url'>
<img expr:alt='data:post.title' expr:src='data:post.firstImageUrl' expr:title='data:post.title'/> </a>
</div>
<b:else/>
<data:post.body/>
</b:if>
If you still want to have text on your index pages as well as the image with a link to the post you could do it like this
<b:if cond='data:blog.pageType == "index"'>
<div class='index-artwork'>
<a expr:href='data:post.url'>
<img expr:alt='data:post.title' expr:src='data:post.firstImageUrl' expr:title='data:post.title'/> </a>
</div>
<data:post.body/>
<b:else/>
<data:post.body/>
</b:if>
and then add this above </head>
<b:if cond='data:blog.pageType == "index"'>
<style>
.post-body img {
display:none;
}
.index-artwork img {
display:block;
}
</style>
</b:if>
Hope this helps
EDIT
Find this line var summary = imgtag + '<div style="text-align:justify;">' + removeHtmlTag(div.innerHTML,summ) + '</div>';
and replace it with
var summary = '<div style="text-align:justify;">' + removeHtmlTag(div.innerHTML,summ) + '</div>';
then find
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
and add this just before it
<b:if cond='data:post.firstImageUrl'><a expr:href='data:post.url'><img expr:alt='data:post.title' expr:src='data:post.firstImageUrl' expr:title='data:post.title' class='pbtthumbimg'/></a></b:if>
don't forget to delete the css from my original answer:
<b:if cond='data:blog.pageType == "index"'>
<style>
.post-body img {
display:none;
}
.index-artwork img {
display:block;
}
</style>
</b:if>