Reference image field in css? - Meta Box

This topic has 1 reply, 2 voices, and was last updated 6 years, 1 month ago by Anh Tran.

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

Author

Posts
November 13, 2018 at 5:39 AM #11924
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.

Add New Note to this Reply
November 13, 2018 at 9:52 PM #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;
```
Add New Note to this Reply
Author

Posts

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

You must be logged in to reply to this topic.