Changing featured image size on specific pages

  • Hi,

    I’ve successfully used the CSS Stylesheet Editor (through Jetpack) to edit the height that the featured image appears on pages on my site, using:

    .page .hero.with-featured-image {
    padding: 90px 0;
    }

    Now I’d like to change the dimensions of the featured image at the top of the page for just one specific set of pages. For this set of pages (Biogs, all child pages of my About page), I’d like to set the featured image to appear central, in portrait dimensions (If poss 2:3). I thought of perhaps doing this by adding a command that only targets a specific page template and making all of Biogs pages with this template, but have been struggling to achieve this.

    Alternatively, I’ve been trying just to reduce the size of the featured image header for these specific pages only with things along the lines of:

    .page-templates-full-width-page .hero.with-featured-image {
    padding: 5px 0;
    }

    As the relevant page template in the php is “page-templates/full-width-page.php”

    Any advice on where I’m going wrong? If its going to be complicated to set the featured images on these specific pages to appear portrait, can anyone help me just disable them for this group of pages. (I can’t just remove the images because they appear in the Grid Format on the parent About page.)

    Hope this all makes sense, I’m a relative newbie.

    Thanks,
    Alex

Viewing 2 replies - 1 through 2 (of 2 total)
  • sacredpath

    (@sacredpath)

    Automattic Happiness Engineer

    Alex, for specific pages and page types, there will be some CSS body classes that you can use to target specific pages or page types. If you look at the opening body selector in the HTML of a single post page, you will see that one of the classes is “single” so you can use that to target all single post pages. “archive” can be used to target all category, tag and archive page types. For individual pages, you can use the page id body class as in this example which you can use as a guide. I’ve used 600px and 900px, a 3:2 ratio. You can play with the numbers as you see fit.

    .page-id-148 .hero-wrapper {
    width: 600px;
}
.page-id-148 .hero.with-featured-image {
    width: 600px;
    height: 900px;
    margin-left: auto;
    margin-right: auto;
}

    Alternatively, I’ve been trying just to reduce the size of the featured image header for these specific pages only with things along the lines of

    in your selector, you have “templates” (plural) and it should be singular (template). When I make that change, it works.

    For selectors for specific pages or page types, it is best to look in the opening body selectors in the HTML where there are a number of CSS class selectors. That is where I discovered the plural/singular issue.

    Thread Starter Alfie_Hall

    (@alfie_hall)

    Hi sacredpath,

    Thanks so much for both of your options. I’ve gone with the page-id code, and it works a treat.

    One quick follow up – if I am doing this for several pages do I have to copy and paste the above code and amend the page ID, or can I list several page IDs to apply commands to? Had a quick play along the lines of:

    .page-id-80 .page-id-57 .hero-wrapper {
    width: 300px;
    }

    .page-id-80 .page-id-57 .hero.with-featured-image {
    width: 300px;
    height: 450px;
    margin-left: auto;
    margin-right: auto;
    }

    But it doesn’t seem to work. Happy to repeat the code for each page ID for now, but as the website grows this could become cumbersome.

    Thanks again, getting much more confident editing CSS now!
    Alex

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Changing featured image size on specific pages’ is closed to new replies.