Support » Theme: Hueman » Featured Image In Single Post Only Partially Working

  • I’ve researched and found some threads on implementing featured images in single page in stand post mode and attempted to make use of the information I found and only had limited success.

    Here is what I did:
    *( edits made to a copy of single.php in child theme, not parent)

    In the single.php I edited to add this:

    <?php $format = get_post_format(); if ( false === $format ) $format = array( ‘standard’, ‘video’ );
    if ( $format == array( ‘standard’, ‘video’ ) ) {
    ?> <!– add_theme_support( ‘post-formats’, array( ‘aside’, ‘gallery’, ‘link’ ) ) –!>
    <div class=”post-format”>
    <div class=”image-container”>
    <?php if ( has_post_thumbnail() ) {
    the_post_thumbnail(‘thumb-large’);
    $caption = get_post(get_post_thumbnail_id())->post_excerpt;
    if ( isset($caption) && $caption ) echo ‘<div class=”image-caption”>’.$caption.'</div>’;
    } ?>
    </div>
    </div>
    <?php } else get_template_part(‘inc/post-formats’); ?>

    AND I had to add this in CSS to get the image to be in the content area, otherwise it was displaying separately above outside the content box.

    /* expand post image to edges */
    /* reset outer container */
    .single-post article {
    position: static !important;
    }
    /* reposition image relative to article container */
    .single-post .wp-post-image {
    position: absolute;
    left: 0;
    top: 60px;
    }
    /* push post content down below image */
    .single-post .post-title {
    margin-top: 60%;
    }

    While it did end up showing the featured image in the single standard post, there are a few issues. It does not separate the image from the text properly and the image actually sits semi transparently over some of the articles text AND also it messes up some of the images in the secondary sidebars, the images are the articles features images that are displayed in the side bar using one of the widgets,

    This work is being done on a non live site (ie. only available through IP so unless it’s really necessary to see it live I prefer to just attach a screen shot.

    Note in the image how the post title and some of the text is covered up by the featured image and then note the secondary (right) sidebar images each are cut in about 60%.

    And it looks like the css code with the 60px is causing the images to be cut but if I reduce the 60% then the featured image in the center content starts to move upward and start to exit the container.

    /* reposition image relative to article container */
    .single-post .wp-post-image {
    position: absolute;
    left: 0;
    top: 60px;
    }

    Timely help would be really appreciated, thanks in advance.

    • This topic was modified 4 years, 7 months ago by skygazer.
    • This topic was modified 4 years, 7 months ago by skygazer.
    • This topic was modified 4 years, 7 months ago by skygazer.
    • This topic was modified 4 years, 7 months ago by skygazer.
Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter skygazer

    (@skygazer)

    UPDATE:

    I’ve tried some other combos and this is where I am now:

    <!– START mod to show the feature image on posts. –!>
    <?php $format = get_post_format(); if ( false === $format ) $format = array( ‘standard’, ‘video’ );
    if ( $format == array( ‘standard’, ‘video’ ) ) {
    ?> <!– add_theme_support( ‘post-formats’, array( ‘aside’, ‘gallery’, ‘link’ ) ) –!>
    <div class=”post-format”>
    <div class=”image-container”>
    <?php if ( has_post_thumbnail() ) {
    the_post_thumbnail(‘thumb-large’);
    $caption = get_post(get_post_thumbnail_id())->post_excerpt;
    if ( isset($caption) && $caption ) echo ‘<div class=”image-caption”>’.$caption.'</div>’;
    } ?>
    </div>
    </div>
    <?php } else get_template_part(‘parts/post-formats’); ?>

    <!– END mod for featured image –!>

    and CSS:

    /* reposition image relative to article container */
    .page .page-image {
    position: absolute;
    left: 0;
    top: 60px;
    width: 100%;
    }
    /* push post content down below image */
    .page .entry{
    margin-top: 50%;
    }

    Note how the featured image sits outside of the content area with the above codes and the content and sidebars have been pushed down. How do I get the featured image to sit nicely just above the article title?

    Can someone please assist with fixing this…thanks

    Thread Starter skygazer

    (@skygazer)

    No one?

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Featured Image In Single Post Only Partially Working’ is closed to new replies.