[kapostolou]

Hey Juan,

I’d like to add an image at the top of my pages just like they are added at the top of a blog post. In other words, it dynamically chooses the right image size and automatically resizes it based on whether it’s being viewed on a desktop or mobile.

I tried adding an image using “add media” or even putting in straight html with the <img> tag, but the images keep getting cut off to the right.

How do I do it like you have it setup to work for blogposts?

Thanks!
Kosta

[Juanfra Aldasoro]

Hi Kosta,

Thanks for writing.

The setup for the blog posts is basically using the featured image. Maybe a solution for what you need is taking the code from the blog post template (single.php) and replicate that in the page template (page.php)

That way it’ll be using the same code and it’ll probably work the same way.

Best,
Juan.

[kapostolou]

Ok…I’ll look at that.

So there is no way of doing it for specific pages? I want to be able to do it on some pages and not on others, so if I change the template, it would go across all pages, no? Or I suppose if there is no “featured image” then it just would be smart enough to not display one, right?

[Juanfra Aldasoro]

Hi Kosta,

The only way to do that for specific pages is to add the image from the content editor in the backend. You’re right, if you edit the template it would go across all pages. Yes, if there’s no featured image it won’t show anything.

Best,
Juan.

[kapostolou]

Makes sense…

Ok, I added this code to the page.php but it’s not resizing.

if ( has_post_thumbnail() )
<figure class=”featured-image”>
<?php nice_image( array( ‘width’ => 730, ‘height’ => 340, ‘class’ => ‘wp-post-image’ ) ); ?>
</figure>
}

Any ideas?

[Juanfra Aldasoro]

Hi Kosta,

Maybe because the CSS for the class .featured-image is only applied to the pages that have .single as body class. Did you check that out?

Best,
Juan.

[kapostolou]

Good thinking! I added this to my custom css:

.page .featured-image img, .post .featured-image img {
max-width: 620px;
margin: 0;
padding: 0;
display: block;
}

and it seemed to work. Does that look right to you? I can usually hack my way around css, but this one was getting deep for me 🙂

[Juanfra Aldasoro]

Hi Kosta,

Excellent 🙂

Yes, that seems to be right. Remember always to add your custom css in the custom.css file so you can apply future updates without losing your changes.

Best,
Juan.

[kapostolou]

Of course. Is there any difference if i put them in custom.css or if i use the little box inside Nice Themes->Theme Options->Design & Styles->Custom CSS?

I’ve made a few customizations to the theme also and documented them in a separate file so i’m ready for updates when they come.

Once i’m done, i’ll email you all my suggestions as they are all pretty simple to implement and “general” enough that I could see others would want them also.

As always, your support is awesome! Thanks for your help!.

[Juanfra Aldasoro]

Hi Kosta,

Thanks for your kind words!

Actually, it’s almost the same to have the custom css in the file or the option. Some people prefer to have it in one or the other, that’s why we give the option.

Have a nice day,
Juan.