Featured image sizes in Goran

takethecakemedia · Member · Jan 16, 2015 at 7:32 pm
Copy link

Add topic to favorites
Hello,

I have two questions, for which I can’t seem to find the answer in the forums. I’m a bit of a newbie, and I am working with the Goran theme.

1) How do I reduce the size of the featured images that appear at the top of the grid pages? (For example, the image at the top of this page: http://takethecakemedia.com/services/). Is there some useful CSS for this?

2) Is there a way to adjust how much the featured image gets amplified? On that same page, the featured image gets so blown up that the image quality suffers.

Thanks in advance!

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Jan 17, 2015 at 12:09 am
Copy link
1) How do I reduce the size of the featured images that appear at the top of the grid pages? (For example, the image at the top of this page: http://takethecakemedia.com/services/). Is there some useful CSS for this?

Give the following a try. The original top padding was 379px. This CSS targets static pages only. We can also get more specific if you wish and target individual pages.
```
body.page.hero-image .hero.with-featured-image {
    padding-top: 200px !important;
}
```
2) Is there a way to adjust how much the featured image gets amplified? On that same page, the featured image gets so blown up that the image quality suffers.

According to the Goran Theme Showcase page, “Featured Images for pages are 1230 wide by 1230 high”. Since your image is much narrower than that on the Services page, it is resized to fit the available space. If you use an image that is around 1230px wide, it will come out much sharper.
takethecakemedia · Member · Jan 17, 2015 at 12:24 am
Copy link
Thank you!
thesacredpath · Member · Jan 17, 2015 at 2:05 pm
Copy link
You are welcome.
mipolina1 · Member · Jan 23, 2015 at 8:21 am
Copy link
Hi all!
Actually, I’m struggling with the same problem. I saw the code which thesacredpath has kindly inserted but assume I’m doing something wrong.

I would like to change the size of the fetaured image of my main (static page) and the also do the same on every other page of my blog. Is that possible?

If yes could you please tell what and how I should do that (I’m a newbie). Thanks a lot in advance!
mipolina1 · Member · Jan 23, 2015 at 8:23 am
Copy link
Oh I’m sorry my blog is https://trial23456.wordpress.com/

And by “change the size” I mean i want to reduce the amount of the screen it occupies so one won’t have to scroll so much to see the actual text below
thesacredpath · Member · Jan 24, 2015 at 10:07 pm
Copy link
@mipolina1, I don’t see that you have the Custom Design upgrade, but you can try out the following custom CSS and then play with the top margin value. Go to Appearance > Customize, click on the Custom Design tab at top right, click the “Try” button and then click on the CSS tab after things reload. Delete all the informational text in that window and paste in the following.
```
body.hero-image .hero.with-featured-image {
    padding-bottom: 200px !important;
    padding-top: 200px !important;
}
```
If you wish to adjust the position of the image after the above change, edit the second 50% value in the following, which is the vertical position of the image.
```
.hero-image .hero {
    background-position: 50% 50%;
}
```
simonscowen · Member · Feb 5, 2015 at 11:59 pm
Copy link
@thesacredpath – All of your proposals work perfectly!
phelim2015 · Member · Feb 11, 2015 at 3:40 pm
Copy link
Hi, I’m always trying to achieve the same (reducing featured images in size), but ideally I’d like to vary the size by page. @thesacredpath – I think you mentioned in your first post that this is possible.

I assume I need to get the page id – does it matter that I can only see post ids when I hover over my pages? Or is the targeting done with page names? I’m really very new to CSS so I’m just trying anything.
```
body.page-id-729 .page.with-featured-image {
    padding-top: 46px !important;
}
```
Tried changing instance of page to post, no luck, tried substituting page name (slub) but not sure of the right way to do this. Any help very much appreciated.
designsimply · Member · Feb 20, 2015 at 3:35 pm
Copy link
I assume I need to get the page id – does it matter that I can only see post ids when I hover over my pages?

Yes, you have to match the name you use to the class name used by the page. The easiest way to find it is to use your browser’s built in web inspector and then look at the list of class names on the body tag.
http://en.support.wordpress.com/custom-design/how-to-find-your-themes-css/

No items found.