Change height featured image – Edin Theme

oldstylemusic · Member · Oct 6, 2014 at 8:07 pm
Copy link

Add topic to favorites
Hi everybody,

My blog is http://oldstylemusicnights.com/ and I’m on the Edin theme. I would like to know if there is a way to change the height of the featured images on my pages? I already figured out how to do this on my front page, since the featured image takes the size of the amount of text you enter, but it doesn’t work this way for the other page templates.

Thanks!
Inny

The blog I need help with is: (visible only to logged in users)
hallluke · Member · Oct 6, 2014 at 8:21 pm
Copy link
Hi Inny,

The featured images on the single post and archive pages are limited in width by the content area, currently 540px, and the height is relative to the original aspect ratio of the image. Can you provide a little more detail about how you would like it to look?
oldstylemusic · Member · Oct 6, 2014 at 8:38 pm
Copy link
Hi Halluke,

Right now my image on for example the ‘art’ page (http://oldstylemusicnights.com/art/) is 540×360 in a 3×2 ratio. If I could get it to for example 540X270 (2X1), I would already be a very happy camper :-)
hallluke · Member · Oct 6, 2014 at 8:56 pm
Copy link
The images on the art page you linked to are showing as 330px square at normal resolution and 240px square at tablet sizes (although the source image is much larger) so I’m confused as to where you are seeing them as 540 by 360px.
oldstylemusic · Member · Oct 6, 2014 at 9:04 pm
Copy link
Now I’m getting confused too, sorry. I was talking about the featured image on that page (the guy with the hat). When I look it up in my media library, it says that it’s 540×360.
hallluke · Member · Oct 6, 2014 at 9:46 pm
Copy link
Try the code below and change the 150 value to expand or shrink the image area.
```
.page .hero.with-featured-image {
  padding:150px 0;
}
```
You’re right that it was uploaded at a smaller size, you should definitely think about uploading a larger version if you can, as stretching it like this makes the image quality much poorer.
oldstylemusic · Member · Oct 7, 2014 at 11:49 am
Copy link
Thank you very much! This works like a charm for my ‘art’ and ‘about us’ pages. I changed the size of my pic too, and it indeed looks much better.
maisonblom · Member · Oct 8, 2014 at 11:02 am
Copy link
hello,

i’ve come across your conversation and am struggling with the same issue for the text frames on my website maisonblom.com. The frame on the fort page of ‘Voormalige Pastorie Vogezen nu te huur’ is too big (and same issue on next pages) and i’ve tried the following code but it doesn’t work…!

/*

.page .hero without-featured-image” {

padding:30px 0;

}

*/

can you please help?

Thanks!
Julia
hallluke · Member · Oct 8, 2014 at 11:10 am
Copy link
Hi Julia,

It looks like you were so close! There should be a period right after where it says hero in your code and you will need to remove the quote mark and comments, like this:
```
.page .hero.without-featured-image {
  padding:30px 0;
}
```
maisonblom · Member · Oct 8, 2014 at 12:43 pm
Copy link
Hi Halluke,

Thanks so much for your quick reply! Unfortunately it still doesn’t work… :-( I am pasting this in the Customising Edin in the CSS section and after it’s saved the changes and says the design has been published nothing changes. Should I add padding-top and padding-botom..?

Cheers,
Julia
hallluke · Member · Oct 8, 2014 at 12:50 pm
Copy link
You still need to remove the /* */ bits in your CSS – these turn everything between them into a comment – which stops it from working.
maisonblom · Member · Oct 8, 2014 at 1:21 pm
Copy link
Amazing it worked thank you!!! I thought it was vital to have the */ bits in…! :-)
hallluke · Member · Oct 8, 2014 at 2:21 pm
Copy link
Those bits are best used to leave notes to yourself so that when you next come back to check your custom CSS you can remember what each rule or group of rules is for. So for example you might use:
```
/* make page titles shorter */
.page .hero.without-featured-image {
  padding:30px 0;
}
```
and the commented section is ignored but you’ll know exactly what the CSS does when you next decide to make amendments.

No items found.