How to display featured images or post thumbnails on blog home page?


#1

Hi I have my blog www. technosians. com and I want to show Images on it’s home page. Please visit it and suggest me the change. I am new to this forum. Please help me soon.

I can also put my template code here.

table { border-collapse: separate; border-spacing: 0;} caption, th, td { text-align: left; font-weight: normal;} blockquote:before, blockquote:after, q:before, q:after { content: “”;} blockquote, q { quotes: “” “”;} sup{ vertical-align: super; font-size:smaller;} a img{ border: none;} ol, ul { padding: 10px 0 20px; margin: 0 0 0 35px; } ol li { list-style-type: decimal; padding:0 0 5px; } ul li { list-style-type: square; padding: 0 0 5px; } ul ul, ol ol { padding: 0; } h1, h2, h3, h4, h5, h6 { font-family: ‘Open Sans’, sans-serif; font-weight: bold; line-height: 1.25; margin: 0 0 10px; } h1, h2 { font-size: 30px; } h3 { font-size: 24px; } h4 { font-size: 20px; } h5 { font-size: 18px; } h6 { font-size: 16px; } /*****************************************

as the word limit is 300 min so i put some of the code here.

Please reply soon If you know how to put images inside my post on homepage too


#2

your website is not opening please show screen shot than expert can solve your problems


#3

@hacktolearn21 Please be more specific so we can solve your problem.


#4

Hi @hacktolearn21 (Ankit), Welcome to Blogger help forum. So happy to have you here my friend. You can post your Template code if you can. :slight_smile:

@Tariq_aziz and @AmmarAli Here is the screen shot of his home page, he wants to add the featured images of his posts along with the Post titles on the home page.

He wants the Post thumbnails to be displayed on Home page as well. He asked me about this but since I am new to CSS so I could not provide him much help with this so he was invited by me to post his queries here.

~ Rohan Chaubey.


#5

I TOLD HIM TO SHOW SCREEN BECAUSE EXPORT CAN EASILY SOLVE HIS PROBLEM HAHAHAHHAHA SO don’t mind I am just helping with my own way


#6

Lol… What is Export? Be more specific.


#7

i am at office so by mistake in hurry i wrote it is expert :stuck_out_tongue:


#8

Thanks Rohan bro For adding my sannpshot here as i am unable to add web address here or may be now I I can add web address.

No currently I am unable to add new address as I am new here. Still Thanks


#9

It is always my pleasure to help people like you. And you might be able to drop links once you unlock the trust levels.

~ Rohan.


#10

@hacktolearn21 Come on facebook /asyourig add me So i Can tell You


#11

The purpose of having discussion on the forum is you will be able to share your knowledge and expertise with everyone. It would be appreciated if you can help him out here itself.

Thanks,
Rohan.


#12

Insert These Code Below

  <div class=‘post hentry’>

CODE

 <b:if cond=‘data:post.firstImageUrl’>
      <a expr:content=‘data:post.firstImageUrl’/>
    </b:if>
   
    <b:if cond=‘data:blog.pageType != &quot;item&quot;’>
    <b:if cond=‘data:blog.pageType != &quot;static_page&quot;’>
    <b:if cond=‘data:post.thumbnailUrl’>
        <a expr:href=‘data:post.url’><div class=‘img-thumbnail’><script type=‘text/javascript’>
        document.write(bp_thumbnail_resize(&quot;<data:post.thumbnailUrl/>&quot;,&#39;<data:post.title/>&#39;));
        </script></div>
        </a>
    <b:else/>
        <b:if cond=‘data:post.firstImageUrl’>
        <a expr:href=‘data:post.url’><div class=‘img-thumbnail’><img expr:alt=‘data:post.title’ expr:src=‘data:post.firstImageUrl’ expr:title=‘data:post.title’/></div>
        </a>
    <b:else/>
        <a expr:href=‘data:post.url’><div class=‘img-thumbnail’><img expr:alt=‘data:post.title’ expr:title=‘data:post.title’/></div>
        </a>
    </b:if>
    </b:if>
    </b:if>
    </b:if>

After That USe CSS to Resize

.img-thumbnail, .img-thumbnail img {width:120px;height:90px;}

Dont Forget to make It Responsive