featured image dimensions twenty eleven

  • Unknown's avatar

    Hi,
    Is there a way to change the dimensions (the height) of a featured image in the twenty eleven theme, using css?
    With custom header it is possible to use an image larger than the recommended proportions of 1000 x 288. But with the featured image option this is a problem.
    Can anyone help me with this?
    Thanks!
    Freija

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

  • Unknown's avatar

    I’m not seeing any “featured images on your site. Can you point me to a location for those?

    It is possible in most themes, to change the height/width of featured images with CSS, but the image size is set in the theme PHP script files, which means if we use CSS to change the size of the image, they will lose quality since the browser will be resizing that smaller image and they are not equipped to do that very well. There is no way to change just the one dimension of a featured image.

    Once I get to take a look, I may have some suggestions.

  • Unknown's avatar

    Thanks for replying!
    The blog I actually need help with is http://rotsfilmwerk.wordpress.com/
    but it’s set to private so I’m not sure you can view that. Anyhow, I had the same problem with samueldirk.com, in the end I accepted the height cannot be over 288 (for this one I didn’t purchase premium, like I did now for http://rotsfilmwerk.wordpress.com/ ).
    I’m afraid I don’t understand why you don’t see any featured images on the site, in twenty eleven theme featured image sort of equals a header, so the different headers for each tab are uploaded as featured image.

    Maybe I can counteract the way the browser resizes the image by uploading a stretched image?

    Thanks again for your help.

  • With custom header it is possible to use an image larger than the recommended proportions of 1000 x 288. But with the featured image option this is a problem.

    You’re right, this isn’t possible in Twenty Eleven, since the theme crops all featured images to 288px high when displayed in the header.

    You can try overriding this with CSS on pages where you want the header to be taller. For example:

    .page-id-XXX #branding .attachment-post-thumbnail {
    	height: 400px;
    }

    You can get a page ID (replace XXX) from the URL of a page while you’re editing it in the dashboard. This should also work for posts, like this:

    .postid-XXX #branding .attachment-post-thumbnail {
    	height: 400px;
    }

    Of course you’ll also need to adjust the height to fit your images.

    Let me know how it goes.

  • Unknown's avatar

    Hello!
    I didn’t have a chance to try your solution right away but have tried it now and it did not work.
    When I pasted it in css, these parts remained grey (non-active):

    .postid-XXX
    .attachment-post-thumbnail

    I’m an absolute beginner with css/code, have you got any other ideas maybe or do you know what went wrong?
    Thanks a lot for helping me.

  • Unknown's avatar

    (Oh, I did replace XXX with the URL (permalink), and that was recognized.)

  • It’s the page or post ID number that needs to go in the XXX spot, not the URL. Sorry that wasn’t clear!

    Instead of this:

    .page-id-http://rotsfilmwerk.wordpress.com/films/can-go-through-skin/ #branding .attachment-post-thumbnail {
    	height: 351px;
    }

    Try this:

    .page-id-1 #branding .attachment-post-thumbnail {
    	height: 351px;
    }

    You’ll find the page ID number when looking at the page’s source code in your browser:

    <body class="home page <strong>page-id-1</strong> page-template page-template-sidebar-page-php logged-in admin-bar no-customize-support custom-background mp6 typekit-enabled single-author two-column right-sidebar theme-menu-maximized highlander-enabled highlander-light custom-colors">

    Let me know how that goes.

  • The topic ‘featured image dimensions twenty eleven’ is closed to new replies.