Custom Fields
Re-Envisioned
Support General Reference image field in css?

  • Creator
    Topic
  • #11924
    Resolved Michael
    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.

Viewing 1 replies (of 1 total)
  • Author
    Replies
  • #11932
    Anh 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;
Viewing 1 replies (of 1 total)
  • You must be logged in to reply to this topic.