2014: Can I show an entire, uncropped full-width featured image in a page?

  • Unknown's avatar
    johaninsideoutwp · Member ·

    Good morning, I love these forums, and I’ve built many blogs with searches on his forum as my education. Thanks for everything, guys.

    The site i need help with is enjoyjenkintown.wordpress.com, on the “Map” page.

    I’m trying to create a single page with a large image (a map of my town), in Twenty Fourteen, and would like to have the image span the entire width of the page to be as big as possible.

    Is there any CSS customization to either –

    a) show an entire featured image using the Full Width Page Template, instead of having the image cropped? Right now I have the map set as the featured image with no content in the post. The width is fantastic but of course it crops the image top and bottom.

    Or, b) a way to increase the margins for just one page, to increase the size of an image that is in the body of the post to be the max width of the page?

    Ultimately I would love to explore image mapping and have clickable links on each of the locations on the map, if that helps with what approach to take.

    Thanks so much in advance.

    Johan.

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

  • Unknown's avatar
    designsimply · Member ·

    The site i need help with is enjoyjenkintown.wordpress.com, on the “Map” page.

    https://enjoyjenkintown.wordpress.com/map/

    Ultimately I would love to explore image mapping and have clickable links on each of the locations on the map, if that helps with what approach to take.

    In this case, you’ll probably want to add the image as content in a post instead of a featured image.

    Or, b) a way to increase the margins for just one page, to increase the size of an image that is in the body of the post to be the max width of the page?

    First, you can target a specific page by using body classes. Each page on WordPress.com has a unique body class. In the case of your Map page, the unique class is “page-id-93” and so you can target your CSS to just that page by putting “.page-id-93” in front of your CSS selectors.

    Then, you can use the web inspector in your browser (I like Firefox’s web inspector) to figure out how the width of the inner content container is being adjusted and see what CSS selectors can be used to override them.

    I made a screencast showing how to find the selectors and test them in your browser using built-in browser tools:

    https://cloudup.com/cwVscwHP2sd (4m29s)

    Here is the resulting CSS rule from the screencast:

    .page-id-93 .site-content .entry-content,
.page-id-93 .site-content .entry-header{
  max-width: none;
}
  • Unknown's avatar
    johaninsideoutwp · Member ·

    Wow designsimply – this is fantastic, thank you so much for taking the time to put this screencast together! The code works great as well – after inserting the image into the body of the post, I did have to change the CSS class for the image (in the HTML of the post), from

    <img class="aligncenter wp-image-94 size-full">

    to

    <img class="attachment-twentyfourteen-full-width wp-post-image">

    … to have the image meet the maximum margins, and everything works perfectly.

    I really appreciate the education as well as the code. Can’t thank you enough!! You’re the best!!

  • Unknown's avatar
    designsimply · Member ·

    Cheers, and thanks for the follow-up note!

    Aside: oh yes, I should have thought to tell you that adjusting the Media Width value in the Appearance > Customize > CSS panel will make a full width image expand to the right width, but if you’re only going to do it for the one page like this, then your solution to get rid of the “size-full” class from the image itself also works just as well.

  • The topic ‘2014: Can I show an entire, uncropped full-width featured image in a page?’ is closed to new replies.