WordPress.org

Ready to get started?Download WordPress

Forums

Superhero
[resolved] Center photo in post (9 posts)

  1. Frank
    Member
    Posted 10 months ago #

    I am testing using theme Superhero on my website.

    When the featured photo is in portrait orientation the photo is displayed on the left side of the page and a blank margin displays on the right side.

    Is there any possible tweak to center the photo and at least divide the blank space between the left and right parts of the page?

    Any help to resolve this issue greatly appreciated.

  2. Kathryn
    Automattic Happiness Engineer
    Posted 10 months ago #

    Hi there, would it be possible to provide a link to your site so I can take a look directly?

    If the site is not publicly available, could you take a screenshot to help in troubleshooting?

    Here's a guide on how to make a screenshot, if you're not sure: http://en.support.wordpress.com/make-a-screenshot/

    You can upload the screenshot - in a graphic format like JPG, PNG, or PDF - in your Media Library, and provide a link so I can see it, or upload it with a service like Droplr or Imgur.

  3. Frank
    Member
    Posted 10 months ago #

    Hi Kathryn, the link to the screen capture is http://www.frankpsaila.com/?attachment_id=7613.
    This template is not yet online because of this small inconvenience.

    This is a partial picture but the defect is clearly visible. The picture is oriented to one side of the page with a wide margin to the right. I tried several tweaks to center it but all were futile.

    Since it is in portrait orientation I would like to center it. Any ideas where i need to change will be greatly appreciated. My posts are mainly photos so this feature is a recurring thing in my posts.

    Frank

  4. Kathryn
    Automattic Happiness Engineer
    Posted 10 months ago #

    Hi Frank, thanks a lot for the screenshot. I'm trying to replicate the issue but so far I haven't been able to get the featured post to display as it does in your screenshot. I've added a portrait-oriented featured image to a post, but it's not displaying on the blog page as it is for you:

    https://cloudup.com/cOA4sgaxTQo

    Did you have to do anything special for the featured post to show up there?

    Have you modified the theme files at all?

    Are you sure this is a featured post, and not just a post inserted into the main editor window?

    Thanks for clarifying these things.

  5. Frank
    Member
    Posted 10 months ago #

    Sorry for the misunderstanding.

    I originally had the same problem and found out that it originates from the restriction of the pixel size.

    So to display the image i modified content.php to make the size greater than 399 not as it was originally (645 pixels) (:

    if ( $image[1] >= 399 ) :
    the_post_thumbnail( 'feat-img' );
    endif;

    The same changes I applied them to content-page.php and content-single.php. With this modification portrait pictures are displayed as well, now my new problem was how to center the image. And this is what i'm trying to resolve now.

    Hope the issue is clearer now.

    Thanks.

  6. Kathryn
    Automattic Happiness Engineer
    Posted 10 months ago #

    Thanks for the clarification. Without being able to see your site directly, it's pretty tricky to troubleshoot and provide specific code that I know will work on your site.

    Adding this to the class or ID that's being applied to your featured image container may help:

    margin: 0 auto;

    I'd be glad to have a peek at your site once it's up on a publicly accessible test/development server.

  7. Kathryn
    Automattic Happiness Engineer
    Posted 10 months ago #

  8. Frank
    Member
    Posted 10 months ago #

    Thanks Kathryn for your insight. I finally managed to figure it out and the display is exactly what i wanted.

    The original container in "style.css" was this:
    .attachment-feat-img {
    margin: 0;
    padding: 0;
    max-width: 100%;
    height: auto;
    }

    and I modified it to this:

    .attachment-feat-img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
    max-width: 100%;
    height: auto;
    }

    Now it works perfect. A portrait image is centered across the template not displayed on the left side of the page.

    Thanks for the help.

  9. Kathryn
    Automattic Happiness Engineer
    Posted 10 months ago #

    Wonderful - glad you figured it out. Thanks for sharing your solution in case it helps others in the future!

Reply

You must log in to post.

About this Theme

About this Topic

Tags