Image size

kzdigital · Member · Jul 19, 2016 at 10:39 am
Copy link

Add topic to favorites
Hi, I have a problem with big image on my home page. It won’t fully show. Is there a reason for it? I cannot find any size guidance?

Please help!

https://garethbensongolf.wordpress.com

Also how do I remove grayish filter from the image?

The blog I need help with is: (visible only to logged in users)
siobhyb · Member · Jul 19, 2016 at 11:44 am
Copy link
Hi there,

Hi, I have a problem with big image on my home page. It won’t fully show. Is there a reason for it? I cannot find any size guidance?

Your theme is designed to adapt based on the size of the screen it’s being viewed on, which means that header/featured images will be cropped to fit smaller devices.

Images that are decorative or abstract will therefore work best as header/featured images. It’s not recommended to use images that can’t handle any kind of cropping.

That said, you could increase the height of the image with some custom CSS.

If you’re not familiar with CSS, it’s a coding language that’s used across the web to change the appearance of websites. Here at WordPress.com, it’s possible to add custom CSS to override certain design elements of themes.

To increase the height of the main image, add the following to the CSS panel of the Customizer:
```
@media screen and (min-width: 1230px) {
.hero.with-featured-image, body[class*="front-page"] .hero {
    padding: 250px 0;
}
}
```
Please note: The above will only increase the height of the image on devices that are 1230px in width or higher. You can increase/decrease the value of 250px to increase/decrease the height.

Have an experiment and let me know how you get on.

Also how do I remove grayish filter from the image?

The filter can be removed with some extra CSS:
```
body:not(.no-image-filter) .hero.with-featured-image:before {
    background: inherit;
}
```
Hope that’s helpful! Let me know if extra questions come up.
expresshomefundinglatino · Member · Jul 20, 2016 at 10:23 pm
Copy link
I tried using that code and pasted it

page>edit> pasted code

the image is resized but now the code is displayed on the main page. I didn’t paste it into the customizer because I haven’t purchased access to it yet. The code works, I just don’t want it to be visible on my site. :)

Please help

http://www.accesototalsite.wordpress.com
siobhyb · Member · Jul 21, 2016 at 11:06 am
Copy link
Hi there,

CSS won’t work when added directly to pages, it only works when added to the CSS panel of your site’s Customizer.

The reason your image has been resized is that more content has been added to the page (it could have been any content) and it’s taking up more space.

If you don’t wish to upgrade to WordPress.com Premium or Business then an alternative to CSS is to simply add more content to that page so that your image takes up more room.

You could also add some new line breaks to achieve the same effect, without actual content, following the steps here:

https://en.support.wordpress.com/advanced-html/#extra-line-breaks

Let me know if that’s clear or if any of the above needs clarification.

Thanks!
kzdigital · Member · Jul 25, 2016 at 3:21 pm
Copy link
Thank you for your help! I also struggle with feature images on pages.
I upload image lets sat About Me on home page and then on page itself it’s very stretched and it’s not showing full image. How do I rescale it and resize it so it looks professional on the page?

This is an example I am talking about: https://garethbensongolf.wordpress.com/about/about-me/

Thank you in advance for your help!
kzdigital · Member · Jul 25, 2016 at 3:54 pm
Copy link
Also can I use different image for the banner on the page than the featured image?
kathrynwp · Staff · Jul 25, 2016 at 5:54 pm
Copy link
I upload image lets sat About Me on home page and then on page itself it’s very stretched and it’s not showing full image. How do I rescale it and resize it so it looks professional on the page?

I would suggest you use a different featured image for this page. Edin recommends featured images that are 1230px wide by at most 1230px high. They will be cropped in different ways depending on the viewer’s screen size, so I suggest an image that is landscape orientation (unlike your current one, which is portrait) that can withstand cropping, such as an abstract, patterned, or other flexible image.
kathrynwp · Staff · Jul 25, 2016 at 5:55 pm
Copy link
Also can I use different image for the banner on the page than the featured image?

You may be able to override a page’s featured image by using custom CSS, but I’m not sure why that would be necessary. Could you explain more what you had in mind here?
kzdigital · Member · Jul 26, 2016 at 10:32 am
Copy link
Hi Kathryn,
I would like to keep portrait size images as the featured images but I would like to change banners on pages to ‘landscape size’ how do I do it?
kathrynwp · Staff · Jul 26, 2016 at 1:23 pm
Copy link
There is only one area for featured images in Edin and it is a horizontal strip across the top of the page. For that reason it’s best geared to landscape-oriented images. You can modify your featured images in a graphics program before uploading them on your site so they work better with Edin, or you could choose another theme that uses portrait-oriented featured images, like Bushwick, for example.

No items found.