adjust featured image in post header in pictorico

  • Unknown's avatar
    teriandtesfa · Member ·

    I am having difficulty adjusting the sizing of my featured image when it’s displayed as a header in my posts. Are there any CSS solutions? Thank you!

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

  • Unknown's avatar
    designsimply · Member ·

    It depends a little bit on exactly how you’re trying to adjust the featured image.

    Featured images are hard coded at a set size. You can adjust their size using CSS, but anything you do with CSS to stretch the image will make the quality degrade.

    I could help you look at a specific example if you can provide a link. However, I checked http://whateverisee.com/ and I see it is using the Nishita theme and not the Pictorico theme, so you may have decided to change themes instead of working with Pictorico featured images.

  • Unknown's avatar
    teriandtesfa · Member ·

    Thanks for your response. The blog I am referring to is iamphotoproject.com. I’m still working on the site so it’s not accessible to the public, but I assume you can access it. Let me know if you have any problems accessing it.

    What I’d like to do is reposition some of the images. For example, the header on this page automatically zooms in and focuses on the subjects nose, when I’d prefer to move the image so the focus are on his eyes: http://iamphotoproject.com/2014/06/15/jayson-p-oakland-ca/

    The header on this page is a good example of how it worked out for my by chance and how I’d like it to look: http://iamphotoproject.com/2014/06/25/jr-v-oakland/

    Thanks so much for your help

  • Unknown's avatar
    designsimply · Member ·

    What I’d like to do is reposition some of the images. For example, the header on this page automatically zooms in and focuses on the subjects nose, when I’d prefer to move the image so the focus are on his eyes: http://iamphotoproject.com/2014/06/15/jayson-p-oakland-ca/

    There are a couple different factors at play here. Let me try to explain them. One thing to note up front is that CSS is limited to using the information and images set by the theme’s underlying PHP code. Here at WordPress.com, you can use CSS to change the look of things the theme gives you, but you cannot use CSS to change dynamic content such as how featured images are cropped by a theme. To make a change to the underlying code like that, you would need to switch to a WordPress.org setup.

    Now, let’s talk about Pictorico on WordPress.com. The featured images in Pictorico are cropped from the center. There is not a way for you to change this in WordPress.com. Here is an example of the cropped image used in the post you mentioned:
    http://iamphotoproject.files.wordpress.com/2014/06/img_6071-edit.jpg?w=1500&h=525&crop=1

    However, what you can do is use CSS to manually override the featured image one post at a time and then move the staring point for how the image is displayed in the header.

    First though, you should have an understanding of how the header image is setup and how it will look different at different browser widths. The Pictorico theme uses a CSS property called “background-size” to display already center-cropped featured images on posts like http://iamphotoproject.com/2014/06/15/jayson-p-oakland-ca/

    This example page explains illustrates how it works:
    http://whereswalden.com/files/mozilla/background-size/page-cover.html

    It’s important to know about “background-size: cover” works so you understand how the image shifts at different browser widths.

    Now, there is also a property called “background-position” which determines the horizontal and vertical offsets for a background image set using CSS. If you combined some CSS to manually override the featured image and then adjusted the background positioning for the image, I think you can get the effect you want on a per post basis.

    Here is an example you can try on the http://iamphotoproject.com/2014/06/15/jayson-p-oakland-ca/ post. When you test it, make sure to view the page at different browser widths and watch how it changes.

    .postid-32 .entry-header .entry-thumbnail {
	background-image: url(http://iamphotoproject.files.wordpress.com/2014/06/img_6071-edit.jpg?w=1500&h=525) !important;
	background-position: 50% 10%;
}

    Also, don’t forget that doing this overrides the featured image set on the post itself—but that one is still used for the front end. If you were to change out the featured image in the post it would affect the home page, but you would also need to adjust the url() value in the CSS to make it change on the individual post page too.

    It’s a little tricky! But hopefully I’ve explained it clearly. :)

  • Unknown's avatar
    designsimply · Member ·

    By the way, I can’t wait until you launch this! It looks extremely cool. :)

  • Unknown's avatar
    teriandtesfa · Member ·

    Thanks so much for your help! This did the trick.

    And thanks for the positive vibes on the blog. I’m hoping to launch it in about a month.

    One last question, is there any way to keep the header text on the bottom of the featured image (like in desktop view) when moving to tablet or smart phone view.

    Thanks again!

  • Unknown's avatar
    teriandtesfa · Member ·

    for clarification, it happens when I use this code:

    .has-thumbnail .entry-header, .entry-header .header-image {
    height: 300px;
    }

  • Unknown's avatar
    designsimply · Member ·

    One last question, is there any way to keep the header text on the bottom of the featured image (like in desktop view) when moving to tablet or smart phone view.

    I think that’s doable. Here is a copy of the rule from the theme that controls the placement of the title in the header on posts:

    @media screen and (max-width: 885px) {
	.has-thumbnail .entry-header .entry-title {
		position: relative;
	}
}

    To break it down, the “max-width: 885px” part means it only applies to browser widths equal to or smaller than 885px. The “position: relative” part means that the entry title show flow normally within the document.

    To change that, you should copy the example above and then change “relative” to “absolute” to match the way that same rule is setup for browser widths larger than 885px.

    Make sure to test it on several posts to make sure it looks good together with the other custom CSS modifications you’ve made.

  • The topic ‘adjust featured image in post header in pictorico’ is closed to new replies.