Header image size in iTheme2

  • terriermk · Member ·

    The current featured image size on posts displays at approx. ratio of 1000 x 420 but this feeds another site that is 800 x 550 (narrower but deeper). One can set the featured image as 800 x 550 but it only displays in the 1000 x 420 ratio. So I need to change the display of the featured image size to 800 x 550. (Hope I make sense.)
    I am not techy or versed in CSS but have been told that the experts can give me the code to do it. Hello experts. Can you help me.

    The blog I need help with is: (visible only to logged in users)

  • thesacredpath · Member ·

    Hi there, can’t you create two different images, one for the site you reference and another for the site with the narrower and taller image?

    We can certainly add a header via CSS to news.kwvr.co.uk, that is 800 x 550, but since the theme content area itself is 978px wide, the image will end up narrower than the overall content width.

    There is CSS we can use to make that 800px image expand to fill that 978px widht (with a resultant increase in height over the 550), without it changing the size of the underlying image, but when we do that the image is going to lose quality and sharpness since the browser will be enlarging the image and they aren’t too good at that.

    Let me know your thoughts on the above and we can work from there.

  • terriermk · Member ·

    Good evening, thanks for responding.

    As a bit of background, I created my blog to convey news about happenings on our Railway for enthusiasts. A new website was developed professionally using WP and pulls posts and their featured images from my blog with specific categories onto the main website, which is general public orientated to display on the main website. So it is not possible to have 2 images.

    I currently use featured images 800 x 550 on my blog so that they display correctly on the main website. However whilst the image is displayed OK width-wise, the height is truncated, not necessarily in an appropriate place. The quality is acceptable, I would just like it to display in full

    If you can help this poor amateur, with little experience, I will be most grateful.

    Thanks and best wishes
    Philip

  • thesacredpath · Member ·

    Philip, do you have the 800 x 550px image uploaded to your Media Library here? I took a look and didn’t see it. If you can go to Media > Add New and upload it, I can see what I can do for you.

  • terriermk · Member ·

    Hi, there
    Thanks for getting in touch
    Yes, there are quite a few.
    The latest is 7507834092-1503011-mf.jpg which is the featured image in the post Short Video of 2015 Winter Steam Gala
    Philip

  • thesacredpath · Member ·

    Philip, give the following a try. I’ve taken that image and made it stretch to the full width of the header area and then the height has grown as required (from 550 to about 650) to keep the image from distorting. The third rule below 

    #masthead {
    background: url("https://worthnews.files.wordpress.com/2015/04/7507834092-1503011-mf.jpg") no-repeat scroll center top / 100% auto transparent;
    margin-top: 32px;
    position: relative;
}
#custom-header-image {
    height: 620px;
    padding-bottom: 20px;
    visibility: hidden;
}

    If you go with the above, any future header image changes will have to be done through the CSS rather than the normal header uploader. Also with the above, the header image loses its link to the home page.

  • terriermk · Member ·

    Wow! That looks impressive to this amateur. Very tied up with domestics and hence delayed response. I will try and do something with this in the next few days.
    One thing worries me. You say “Header Image size”. I think I may have wondered off “terminology”. Whilst my query says header image, in my text I say featured image of posts and this is what I am referring to. Have I screwed up?
    Philip

  • thesacredpath · Member ·

    Well, looking back at things, I am the confused one. :)

    On Short Video of 2015… are you talking about the top image in the content area?

    WordPress creates this cropped image on the fly
    https://worthnews.files.wordpress.com/2015/04/7507834092-1503011-mf.jpg?w=593&h=261&crop=1
    which is the one that is used for the featured image on that post. If you pull this post for inclusion in your other website, then that smaller image is the one that would be served. There isn’t a way to serve the un-cropped image with the post, and trying to enlarge that cropped image would result in image quality a loss of quality and also distortion if we changed the proportions.

    To be able to change the proportions of that image would require changes to the theme php script files, and we cannot do that at WordPress.com.

  • terriermk · Member ·

    OK, I understand. I think this is where this enquiry comes to the end of the road.

    This Post on my blog (the featured image is 800×550 which crops to fit)
    http://news.kwvr.co.uk/2015/04/10/20154-haworth-shed-visits/

    translates into this on the KWVR official website
    http://kwvr.co.uk/kwvr-news-items/2015-haworth-locomotive-works-tours-schedule/

    If I understand you correctly, you cannot amend the featured image size at the head of a Post.

    Philip

  • thesacredpath · Member ·

    Yes, that is correct. We cannot change the featured image proportions with CSS. It would require editing of the base theme files, and we cannot do that.

    The only way to have that control would be to self-host your own WordPress installation on a different hosting service. Here are some examples. In that case, you could edit the theme php script files and change the featured image proportions.

  • terriermk · Member ·

    Thanks for all your help. Sorry if I’ve wasted you time – the price you pay for having to try and sort out amateurs like me.

    Good Luck

    Philip

  • thesacredpath · Member ·

    Philip, no problems, and certainly not a waste of time. We are all beginners on things at one time or another, and I bet there are things that you know that I don’t. :)

  • The topic ‘Header image size in iTheme2’ is closed to new replies.