Southern Listeners

Loading
Thanks to Greenlava for this cool gadget. Get yours here

Monday, April 11, 2011

Hide Blogger Image from Post Page but not from Main Page


Some of you might be wondering why would anyone want to hide images from the post page but show them in the main page. Well, the reason is that, these images can be used to create TGPs - Thumbnail Gallery Post. The images will appear in the main page, but when the post page is viewed, the images won't be there anymore. Sort of a welcoming committee for a certain event, you see them early on, but they won't be involved in the actual event itself. You get the idea. Let's cut to the chase shall we?



Step 1:

If you're using the old Blogger interface: Go to Dashboard - Design - Edit HTML - Back Up (Download Full Template) -

If you're using the new Blogger interface: Go to Dashboard - Template - Backup/Restore - Download Full Template - Close -  Edit HTML - Proceed -

Find for </b:skin> - Paste the following code directly below </b:skin>
<b:if cond="data:blog.pageType != &quot;index&quot;">
<style>
.ssmainhide{
display: none;
}
</style>
</b:if>
The code in place:


Step 2: 

Go ahead and upload an image to your post. When you click on Edit HTML, the HTML portion of the image will look something like this:
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/--kIkeJaN538/TZix_V4Cd4I/AAAAAAAACz0/orghhQnk3ZE/s1600/P1010367_edit.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="240" src="http://2.bp.blogspot.com/--kIkeJaN538/TZix_V4Cd4I/AAAAAAAACz0/orghhQnk3ZE/s320/P1010367_edit.JPG" width="320" /></a></div>
All you have to do now is, change the word 'separator' in the first line of the HTML, to 'ssmainhide'. You don't have to do this for all the images, just do this to the image that you want to hide from the post page.

The HTML for your image should look like this now:
<div class="ssmainhide" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/--kIkeJaN538/TZix_V4Cd4I/AAAAAAAACz0/orghhQnk3ZE/s1600/P1010367_edit.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="240" src="http://2.bp.blogspot.com/--kIkeJaN538/TZix_V4Cd4I/AAAAAAAACz0/orghhQnk3ZE/s320/P1010367_edit.JPG" width="320" /></a></div>

That will be all. The image that you have modified will appear in mainpage, but not on your post page. Cheers and God bless.

66 comments:

  1. @M.A: Thanks. Enjoy your stay here. Cheers and God bless.

    ReplyDelete
  2. Thanks so much for all your help with my blog the other day! When you have time I was wondering if you might take a look at the tables on this page: http://hisperfectpromises.blogspot.com/p/blogs.html . I can't figure out what is making some of the buttons raise up higher above the rest. (Mostly on the Thursday hop) TIA!

    ReplyDelete
  3. Hi, been following this blog for a while and picked up a few tricks here so thanks but I'm a real amateur with HTML, wondered if there is a simple way to round off the corners on blog posts that you know ? Have looked at other sites but it seems very complicated and don't want to start playing around with it too much as worried I might mess it up.
    Congrats on the TC btw :)

    ReplyDelete
  4. @dirtycowgirl: Well, I didn't bother to figure it out before this, until you asked. I have a working method in hands. Tested and fully functional. I've improvised the way to add them and stuffs, so it's simple enough to add. However, I'm kinda tied up at the moment. I will publish a post on this, probably by this weekend. Stay tuned. Cheers and God bless.

    ReplyDelete
  5. Do you know how to set a static page on homepage? I want to hide any blogpost from homepage. i want to set a link that will point to all my blogpost. thanks

    ReplyDelete
  6. @Paid Critique: I have something close to what you're asking. Not exactly a static page on the homepage, per se. But you can use something similar with text gadget or HTML gadget. Let the tutorial do the talking:

    Blogger Tips: Setting Up Homepage

    If you have further questions (that is not related to the tutorial post on this page), please use the contact form. Cheers.

    ReplyDelete
  7. @Yoboy,

    this is paid critique. thank hope i can understand very well the instruction.

    i want to make something like this. --> http://www.test1.southernspeakers.net/

    Paid Critique@mensitaly

    ReplyDelete
  8. @Paid Critique: Here's the tutorial you're looking for:

    Blogger Tips: Setting Up Homepage

    Cheers.

    ReplyDelete
  9. abolutely useful!!!! :D thank you very much!

    ReplyDelete
  10. @raldical: No problem at all. Cheers.

    ReplyDelete
  11. Hi! What about doing the reverse? i.e. I want the picture on the post but I don't want it on the main page. (Reason is: I want the 2nd picture in the post to show as the "welcome image," not the 1st pic.) Any thoughts?

    Thanks for what you do here! Very helpful!!

    ReplyDelete
  12. @Dietz: Use the following code in step 1:

    <b:if cond="data:blog.pageType != &quot;item&quot;">
    <style>
    .ssmainhide{
    display: none;
    }
    </style>
    </b:if>

    ReplyDelete
  13. Very useful, thx a lot for helping me with other stuffs also!
    Great work, cheers!

    ReplyDelete
  14. @Allentto: No problem at all. Happy to help, as always. Cheers and God bless.

    ReplyDelete
  15. Thank you Very Much for this Post..
    I wanted to display a different picture as a thumbnail to my blog and was struggling to find a way out.

    But, today this post showed me a way!!

    THANK YOU AGAIN

    BTW, Is there any way to show some other picture (other than the first) as thumbnail?

    ReplyDelete
  16. @Aalunga: You can set any picture you want as the thumbnail - not necessarily the first. Just include the 'hiding code' for the picture that you'd want to keep out of your post page.

    Cheers.

    ReplyDelete
  17. @YoboY
    Thanks for the Reply..
    But, How to do that?

    ReplyDelete
  18. @Aalunga: "I wanted to display a different picture as a thumbnail to my blog and was struggling to find a way out."

    Whatever picture you want to display as your thumbnail, just go to Edit HTML mode, copy the HTML portion of that picture, and paste at the top of your blog. That will give you two copies of the same picture. One in your post, and another duplicate at the top of your page. Then perform Step 2 on that picture.

    It goes without saying that the jump break, or better known as 'Read-More' break, should be in place. Or else your entire post will be visible on the front page, and it beats the entire purpose of having a thumbnail.

    In Summary, to have any picture as your thumbnail:
    1) First compose your post normally.
    2) Include pictures to your post, again like how you'd always do.
    3) Include the jump-break (Read more). Note that only the portion before the jump-break will be seen on the front page.
    4) Switch to Edit HTML mode.
    5) Now copy the HTML of the picture that you'd like to use as thumbnail, or feel free to use a picture that is not even in your post.
    6) Paste that HTML portion anywhere before the 'read-more' code.
    7) Perform Step 2 in the tutorial above to that HTML portion.

    ReplyDelete
  19. @Aalunga: Don't mention it :)

    ReplyDelete
  20. Awesome!!! Very helpful, Thank you very much for posting!!! Na Nach!

    ReplyDelete
    Replies
    1. I just noticed that there is a very large space between the post with the hidden images and the next post. I tried everything in your article about reducing spaces between posts, nothing seems to work. This does not happen on any other post. only on the one with the hidden images. Do you have any idea why this might be and how I might be able to change it so as to appear normal? I have about 25 images hidden, I have reduced the images to about 5 or 6. It seemed to help but still way too large. I can't imagine what it might be.

      Delete
    2. Can I have a look at your blog?

      Delete
  21. Thank you so much for your quick responce. Blessings. blog adress is: www.nanach.name please scroll down to see the image in the article "Yayin Hungari"
    click on image to see gallery view. I did a double take on this one. I hid the images from the main page and from the post itself. The reason that I did this is because I wanted to be able to view the gallery with a click on the image without having to display thumbnail views. Everything works wonderful so far except the mentioned issue.

    ReplyDelete
    Replies
    1. The gap was because you had large line breaks between your images. The images itself are hidden, but the line breaks are not. I'm gonna give you a code to hide line breaks as well. But, you need to keep in mind that this code will remove line breaks from your others posts on the main page as well. You don't have any at the moment, but just so that you know:

      This is the code. Use this instead of the one I gave above:
      <b:if cond="data:blog.pageType != &quot;index&quot;">
      <style>
      .ssmainhide{
      display: none;
      }
      .post-body br{
      display: none !important;
      }
      </style>
      </b:if>

      Cheers.

      Delete
  22. Thanks a million, works. In order for the line breaks to be hidden from both the main page and the post page I had to add the same code with a change ( with "item" instead of "index") the result is exactly what I wanted, I am very happy. All the best blessings.

    ReplyDelete
  23. Hi Yoboy,
    I have added auto post summary in my blog. While summarising the summary displays the term ".ssmainhide{ display: none; } " in each summary.
    Is there any way to avoid that?

    ReplyDelete
    Replies
    1. Hi Aalunga,

      If you've added auto summary, you won't be needing the tweak in this tutorial any longer, as most auto post summary plugin chooses a thumbnail by default. Besides, there isn't a way to let these two (auto post summary and the HTML tweak in this tutorial) to co-exist. You gotta remove on them.

      Delete
  24. Hi
    The trick is not working after blogger made the domain corrections (from .com to .country). {One among the reasons why I went for auto post summary}..
    Is there any way to do the same?

    ReplyDelete
    Replies
    1. Hi aalunga,

      I don't quite get that. What trick isn't working again? If you're referring to the tweak in this post, can I have a look at any of your blog that has this tweak installed, without auto post summary?

      Delete
    2. Sorry..
      I made a small error when pasting the code...
      Now, I got what I wanted (Hide Summary and a Picture in Post Pages) by mixing your tweak with Auto Post Summary.

      BTW, You are welcome to visit my site, which is in my mother tongue- Tamil:
      http://aalunga.blogspot.com

      Delete
    3. I am a Tamil as well. Unfortunately, I can't read and write in Tamil. I can speak Malaysian street Tamil though. Valgaai Tamil!

      Delete
  25. How to unhide images(there are images on main page , but no in posts) as I have blogger template where it hidden, can't figured it out...thanks

    ReplyDelete
  26. Hello Yoga;
    I'd like to ask if there's a way to show all thumbnails of the images of every post in Magazine view?
    By default, it only shows a few and I'd like to see them all, at all times.
    Is there any way to do that?

    ReplyDelete
  27. Replies
    1. hi i want to start blogging but before that i have a question How do i add a small image with some text info under post title on my main page like other blogs and i want from visitor click the post title to see more info like images, links.... and of course i want to add different images for each new post titles like this blog www.theologetics.com/

      Delete
    2. Hi there,

      The link you gave doesnt have the image under post title that you're describing. What am I missing? In any case, it doesnt sound like something that we can easily pull off. But if you've seen in other websites, there's probably some tutorial on it somewhere in the web.

      Delete
  28. Hello Yoga, thanks for the useful post. How about if I just want to hide the image caption and not the image itself in the main page but will display both the image and the caption in post page? The reason for this is that the caption became visible in the summary of the post in the main page and it takes the valuable space for other words. May you can help me with my dilemma, I am sure many bloggers would be helped if you write another post for this. Keep it up and happy blogging! :)

    ReplyDelete
    Replies
    1. Hi there,

      It sounds possible, but as for saving space from summary text, I'm afraid there are other players that you need to take into account. If your summary is done using external scripts, this will not work. Let me have a look at your blog. What's your blog's address?

      Delete
  29. I'm sure I'll find the answer by the time you read this but I figured I'd ask anyway so that maybe someone with similar issues can resolve it.

    You're information works, thank you so much, but on my homepage in the preview I see the following code: stLight.options({publisher: "ur-4a2e7b48-6ba3-ae68-ca57-c225b862b4d2", doNotHash: false, doNotCopy: false, hashAddressBar: false}); - See more at: http://purcival.blogspot.com/#sthash.TRRbeJaf.dpuf

    and then my preview begins immediately after.

    I'm working on it now, I'll let you know if anything changes.

    ReplyDelete
    Replies
    1. That looks like some content from some third party script. Have you got it sorted?

      Delete
  30. Thanks,I was searching for this only

    ReplyDelete
  31. This is really nice post works well and easy to configure...thanks for all info..

    ReplyDelete
  32. it doesn't work with my templates...

    ReplyDelete
  33. Good day.I just want to ask some help.
    some image is not appearing in my home page but the image will appear in my post...I would like to show image in both....anybody can help me..this is my blog http://movieslore.blogspot.com

    ReplyDelete
    Replies
    1. I see images appearing on both your homepage and post page.

      Delete
  34. Hey Great tweak. But am interesting in doing around, hide the image in the main page and see it on the inside post page. Can you do that?

    ReplyDelete
    Replies
    1. See the word 'index' in Step 1? Replace it with 'item':

      b:if cond="data:blog.pageType != "item""

      Delete
  35. when i try this its working but the background of my post became change ! from black it became yellow =( any helps how can i fixed it ? i want to use this without a problem on my template please help

    ReplyDelete
  36. please check what happen to my post here http://nonstop-anime.blogspot.com/2015/01/the-chief-of-staff-of-revolutionary.html

    and check to the other post thanks i hope you will help me

    ReplyDelete
  37. Now i get it! thanks for sharing! it is working now =)

    http://nonstop-anime.blogspot.com/2015/01/naruto-shippuuden-jump-super-anime-tour.html

    ReplyDelete

Please use the 'Ask a Question' page to shoot questions that are not related to the tutorial in the post above.