featured image sizing issues
-
I’m having trouble getting my featured image to show properly sized when I upload it. It shows really zoomed in so I assumed that my image was too small. Ive went from 150×150 all the way to 1800 x 1196. What is the correct size I should be using for this theme?
-
Hello,
Can you please give the link to your site so that i can help you rehgarding that.
Thank you.
Sure it’s http://www.consciousblackparent.com
Hello,
I have gone through your site and get into the conclusion that you can upload an image of 800x379px for better result or you can upload image of same ratio and of larger dimension like the above.
Thank you.
@chaenahollist since Ignite is responsive, the actual dimensions of the featured image will depend on the screen used to view your site. However, the images do have a consistent ratio of 2.1:1. Any images with that width:height ratio will not be cropped.
For the actual size, images 800px – 1600px wide will show crisply on the majority screens.
@sam thanks for the help!
Hi Ben,
Love the theme, thanks for creating it!
I need some help with the featured image, can you help?
My website is: http://www.homecooknyc.com
I’d like to make the featured image smaller (on the homepage), so it shows the whole photo and doesn’t stretch the whole width of the post.
An example of a post that has the featured image too too large is here (look on the homepage): http://www.homecooknyc.com/dinner/spicy-bbq-pork-chops/
An example of how I’d like it to look is here (look on the homepage): http://www.homecooknyc.com/appetizers/prosciutto-fig-canapes/
I’ve been struggling with this for a few hours now, can you (or anyone) please help?
Thanks,
Elyse@bensibley : I forgot to add, I am using Ignite Plus. Thanks!
Elyse,
Thanks for upgrading! This can be done with the following CSS:
.main .featured-image { background-size: contain; background-repeat: no-repeat; }You can copy and paste that code into the “Custom CSS” section in the Customizer (Appearance > Customize). Once added there, it should take affect right away.
Hi Ben! Thank you! I just added the code; however it put the title of the post below the image?? Can you check it out for me?
Thank you again!!!
Elyse
@bensibley if you look on the homepage at this post: http://www.homecooknyc.com/appetizers/prosciutto-fig-canapes/
The title and timestamp is still above the image; however, when I put the above code in the custom css it brings the headline and stamp below the image?
Thanks,
ElyseElyse,
The code above only affects the sizing of the “Featured Images”. In this post, if you add that image as a featured image, it will appear above the title on the blog and on the post page. Currently, since it is added into the post content, it is showing below the title on the blog (screenshot) and the post page (screenshot).
Hi Ben,
Ok. So, I just tried removing the featured image on the first post (Spicy BBQ Pork Chops) and the title comes up first like you said, but there is no image on the HP. (Only once you click into the post, do you see the image.)
Is there any way possible to keep the image as featured (and in the post) but have the title come before the image (on the homepage)?
Thanks,
ElyseElyse,
Yes, this can be done with the following CSS:
.entry .featured-image { display: none; }In order for this to work, you will need to add the image as a featured image and at the beginning of the post just like you have done here: http://homecooknyc.com/dinner/spicy-bbq-pork-chops/
Then, the image will show above the title on the blog, and below it on the post.
The topic ‘featured image sizing issues’ is closed to new replies.
