Adding a header photo to portfolio pages

  • Unknown's avatar
    kvistlab · Member ·

    Is there any way to add header photos, like “featured images” on regular pages, but on my portfolio project pages?

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

  • Unknown's avatar
    thesacredpath · Member ·

    Hi there, on the portfolio project pages, such as “Media” there really isn’t a div for us to put the image in. There is a masthead div, but that has the site title/navigation in it. We might be able to put the image in the top of the content wrapper, but this may take a good bit of code since the spacing at the top above the title varies as the width narrows. If you have an image, can you post a link to it and we can give it a try?

  • Unknown's avatar
    thesacredpath · Member ·

    Also, are you wanting to have different images for each project page?

  • Unknown's avatar
    kvistlab · Member ·

    Hi sacredpath, thanks for responding.

    I am willing to give it a try. Here is the link to an example image.

    Image link

    Yes I was wanting to have different images for each project page if possible.

  • Unknown's avatar
    thesacredpath · Member ·

    Thanks for the link and the additional info. I worked this out on the Fieldwork V2 page and it actually worked out better than I expected. Add the following to your custom CSS. 

    .postid-674 #content-wrapper {
    background-image: url("https://kvistlab.files.wordpress.com/2016/07/2015-03-03_europeanmedicinalleech01.jpg?w=882&h=588");
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: auto 50%;
    padding-top: 70%;
}

    The first bit on the CSS selector (.postid-674) is the unique CSS class set in the opening body HTML tag on that particular page. If you look at the opening body tag with your web inspector, you will see something that starts like this.
    <body class="single single-jetpack-portfolio postid-674 single-format-standard...
    You can use the above CSS as a guide for additional pages and then just change the URL and perhaps tweak the top padding. As long as the images are all the same height to width proportions, and you keep the main focus of the image within the center horizontally and vertically, and about the same size, all should be good.

  • The topic ‘Adding a header photo to portfolio pages’ is closed to new replies.