WordPress.org

Forums

Pictorico
[resolved] [closed] Removing header photo on post pages only (20 posts)

  1. katiegera
    Member
    Posted 10 months ago #

    Love the theme! One question - how can I edit the CSS so that the header image doesn't show up on the individual posts pages (but does on the landing page)?

    http://statusquotable.com/

    It would also be helpful to know how the stretching /positioning of the thumbnails is done. I usually use featured images of varying size, but they end up not always taking up the full space of the thumbnail image (and leaving an awkward space). Is there a way to make sure the image always takes up 100% of the space available?

    Thanks!

  2. how can I edit the CSS so that the header image doesn't show up on the individual posts pages (but does on the landing page)?

    Since individual post pages all have the class single, you can globally target them by adding this custom CSS to your Jetpack CSS editor to remove the featured image:

    .single .entry-thumbnail {
       display: none;
    }

    The header will probably look too tall at this point, so you can reduce its height by also adding this:

    .single .entry-header {
      height: 110px;
    }
  3. Is there a way to make sure the image always takes up 100% of the space available?

    The problem with this method would be that images would become distorted - either stretched vertically if they were too short, or horizontally if they weren't wide enough.

    If you don't want your images cropped or stretched, and you'll be hiding the featured images on single posts, you could simply try making sure your images are square before uploading them.

  4. katiegera
    Member
    Posted 9 months ago #

    Thanks! I could also just choose images that are already the right dimensions though, or edit them ahead of time. How can I see the default dimensions of the thumbnail images?

  5. How can I see the default dimensions of the thumbnail images?

    It's defined at 295px square in the CSS:

    .home .site-content .hentry,
    .archive .site-content .hentry,
    .search .site-content .hentry {
      float: left;
      margin: 0;
      overflow: hidden;
      width: 295px;
      height: 295px;
    }
  6. katiegera
    Member
    Posted 9 months ago #

    Thanks!

    My header is still being stretched everywhere, even though I think it's the size it's supposed to be. My custom-header.php says the below. My image is exactly 1105 x 718, but still gets stretched and distorted. What can I do about that?

    [big code chunk removed, please use Pastebin next time -Kathryn]

  7. My image is exactly 1105 x 718, but still gets stretched and distorted.

    I'm not sure if you changed it since you posted this, but your current header image is actually 1200 x 538, as you see here:

    http://statusquotable.com/wp-content/uploads/2014/06/cropped-Picture111.png

    The theme calls for a custom header of 1200 x 525, as you can see in this part of the code:

    function pictorico_custom_header_setup() {
    	add_theme_support( 'custom-header', apply_filters( 'pictorico_custom_header_args', array(
    		'default-image'          => '',
    		'default-text-color'     => '07a1f2',
    		'width'                  => 1200,
    		'height'                 => 525,

    Can you try:

    1) Uploading a header at exactly 1200 x 525
    2) Regenerating thumbnails using a plugin like this one.

    Keep in mind that the way the theme is designed, the header will resize if you make the browser window bigger or smaller. I'm not sure if this is the "stretching" your're referring to.

    p.s. I'm removing the large block of unformatted code above, per forum etiquette. If you need to post large pieces of code, please use a Pastebin. Thanks!

  8. On second thought, you shouldn't need to do step 2 (regenerate plugins) since you're not changing the header size in the PHP.

  9. katiegera
    Member
    Posted 9 months ago #

    Hey Kathryn - can I just change the 1200 and the 525 in the custom_header.php to match my needs? Changing those dimensions didnt seem to change the look of my page, is there another place this should be edited?

  10. katiegera
    Member
    Posted 9 months ago #

    Also something else must not be working properly - when I go to themes > customize and upload a header image that is SMALLER than 1200x525, I still get asked to crop it pretty significantly

  11. Fenisa
    Member
    Posted 9 months ago #

    Hello everyone
    I do have the roughly the problems than Katiegera.
    My effort to change the size of the header (which is too big for our need) haven't succeed. I do have the impression the theme zoom in as it whishes in images... depending of navigators, some images are cropped, some are pixellized....

    the site is here http://ecologiecitoyenne.fr/

  12. mintymike
    Member
    Posted 9 months ago #

    Kathryn,

    dunno if I can ask in this same thread, but it's exactly about the same thing that katie had. I've followed your tip to remove the header from posts, but I can't seem to make the header size to 110px... I mean I've added your suggested line of code to the CSS (the "display: none" works, as there is no header image anymore, but "height: 110px" doesn't and the post does not get resized)... Have I missed anything?

    Mike

  13. Hey Kathryn - can I just change the 1200 and the 525 in the custom_header.php to match my needs? Changing those dimensions didnt seem to change the look of my page, is there another place this should be edited?

    While you can change it, you'll encounter two issues:

    1) Your changes will be overwritten the next time you update the theme. The way around this is to create a child theme, so your tweaks won't be overwritten when updating the theme. Here are some guides in case you haven't made one before:

    http://codex.wordpress.org/Child_Themes
    http://op111.net/53/
    http://vimeo.com/49770088

    If you need more help after that, let me know.

    2) When you change a size in a function like that, you'll need to regenerate the theme-specified image sizes using a plugin like Regenerate Thumbnails.

  14. Fenisa & mintymike - since this thread is already quite long and I'm focussing on helping katiegera here, would you each please start a new thread so it's easier to help you one-on-one with your issues? Please also include a link to your site so folks can have a look directly. Thanks.

  15. mintymike
    Member
    Posted 9 months ago #

    Well, I've actually managed to fix this by installing Custom CSS plugin and adding your line in there. I don't know why it didn't work when I tried adding it directly to site's CSS file, but it's gotta be one of those ghosts in the machine. I don't need to understand it as long as it's working.

  16. mintymike - glad you got it working. It's never recommended to make changes directly in the original theme's CSS file - because you'll lose all your tweaks the next time you update the theme - so installing a custom CSS plugin was actually the right thing to do! Glad you're all set.

  17. Alice Todd
    Member
    Posted 8 months ago #

    Hi Kathryn, I was wondering whether it was possible to edit the CSS so that the header image doesn't show up on the pages as well as the posts?
    I have used this code to manipulate the images on the post pages, and would like to do exactly the same to the pages if possible - but I'm not too sure how?

    .single .entry-thumbnail {
    display: cover;
    }

    .single .entry-header {
    height: 110px;
    position: centre;
    }

  18. Pages in WordPress have the class page so you could do this:

    .single .entry-thumbnail, .page .entry-thumbnail {
    display: cover;
    }
    
    .single .entry-header, .page .entry-header {
    height: 110px;
    position: centre;
    }

    Also just a heads-up that this line doesn't do anything:

    position: centre;

    CSS takes US spelling (i.e. center) but even then, the position property in CSS only takes these values:

    inherit | static | relative | absolute | sticky | fixed

    https://developer.mozilla.org/en-US/docs/Web/CSS/position

    If you need further help, feel free to start a new thread and provide a link to your site. Thanks!

  19. Alice Todd
    Member
    Posted 8 months ago #

    This has worked - thank you!

  20. Alice - great!

    If anyone has further questions about tweaking the custom header display in Pictorico, please start a new thread. Thanks!

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic

Tags

No tags yet.