Skip to main content

Forums

This topic contains 2 replies, has 3 voices, and was last updated by  jmartigar 3 months, 1 week ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #249608

    techmichelle
    Participant

    Sharing as I encountered some fun putting these items together

    Lines in WordPress page file to pull featured image url and size.
    Asks if post (Page) has thumbnail and if so gets information.
    $feat_image[0] = URL
    $feat_image[1] = width
    $feat_image[2] = height
    The formula is used to set the ratio then use the ration with vw (viewwidth) to set the min-height needed for image to be 100% wide and keep aspect ratio.

    <?php if ( has_post_thumbnail() ) {$feat_image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), “full”, true );}?>

    <

    div>

    <

    div>);min-height:<?php echo (($feat_image[2]/$feat_image[1])*96) ?>vw” >

    You can use CSS to style
    #content.backimage {background-color:black;}
    #content.backimage #main-content {background-repeat:no-repeat;background-size:contain;}

    #249615

    Atelierbram
    Participant

    Thanks for sharing. To have background effects like opacity or css-filters like blur() etc., the element with the background-image has to be absolute positioned, to prevent child elements inheriting this opacity or blur(), which will make text unreadable.

    <article class="article article-has-backgroundThumb article-<?php the_ID(); ?>">
    
    <?php if(has_post_thumbnail()) {
     $feat_image = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), "full", true);
    } ?>
    <div class="backgroundThumb" style="background-image:url(<?php echo (($feat_image[0]))?>);" data-width="<?php echo (($feat_image[1]))?>" date-height="<?php echo (($feat_image[2]))?>"></div> 
    

    On the parent element in CSS:

    .article-has-backgroundThumb {
      z-index: 0;
      position: relative;
    }
    

    Absolute positioning on the background-image div is crucial:

    .backgroundThumb {
      background-position:center;
      background-repeat:no-repeat;
      background-size:cover;
      position:absolute;
      top:0;right:0;bottom:0;left:0;
      filter:blur(42px);
      opacity:.75;
      z-index:-1;
    }
    
    #286030

    jmartigar
    Participant

    Thank you! This helped me!

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

icon-link icon-logo-star icon-search icon-star