[Support request] Changing off canvas menu background image to use featured image

Home Forums Support Changing off canvas menu background image to use featured image

  • This topic has 1 reply, 2 voices, and was last updated 11 months ago by David.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #1045711
    JBD

    Hi,
    Currently I use CSS to change the off canvas menu background image

    .main-navigation.slideout-navigation {
            height: 100vh;
        background: url('/wp-content/uploads/2019/10/menu-back-2.jpg') no-repeat bottom right;
        background-size: cover;
        background-repeat: no-repeat;
    }

    Is there a way to use each pages “featured image” as the background image?

    #1046064
    David
    Staff
    Customer Support

    Hi there,

    could give this a shot:

    1. Create a new Hook Element, select the WP_head hook.
    2. Add this content:

    <?php
    $page_id = get_queried_object_id();
    if ( has_post_thumbnail( $page_id ) ) :
        $image_array = wp_get_attachment_image_src( get_post_thumbnail_id( $page_id ), 'full' );
        $image = $image_array[0];
        echo '<style type="text/css">
        .main-navigation.slideout-navigation {
            background-image: url(' . $image . ');
            background-size: cover;
            background-repeat: no-repeat;
        }
        </style>';
    endif;
    ?>

    3. Check execute PHP and set your display rules.

Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.