Meta Box

Reference image field in css?

Support › General › Reference image field in css?Resolved

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • November 13, 2018 at 5:39 AM #11924
    MichaelMichael
    Participant

    Hi,

    I have some fields set up on pages that include an image for mobile. The standard page displays a featured image in the hero and I want to change it out by css so a different image displays on mobile.

    On a page by page basis this is obviously relatively simple with code like;

    
@media (max-width: 767px) {
    .page-hero .product-page-hero {
    background-image:url(/image-name.jpg);
    }
}

    Is there a way I can reference the metabox page image field in css so I can use a template rather than have to write separate media queries for every page?

    i.e. my metabox field is 'mobile_image', I want to use that instead of the url in css.

    November 13, 2018 at 9:52 PM #11932
    Anh TranAnh Tran
    Keymaster

    To get the image URL, you have to use PHP. So in this case, it's impossible to put the image URL directly in CSS file. However, you can use PHP to output CSS. Here is a sample code:

    $image = rwmb_meta( 'mobile_image' );
if ( $image ) :
    echo '
    @media (max-width: 767px) {
        .page-hero .product-page-hero {
            background-image:url(' . $image['url'] . ');
        }
    }';
endif;
  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.