[Support request] Want to add different background photos for mobile and desktop posts

Home Forums Support [Support request] Want to add different background photos for mobile and desktop posts

Home Forums Support Want to add different background photos for mobile and desktop posts

Viewing 15 posts - 1 through 15 (of 27 total)
  • Author
    Posts
  • #1489867
    Kyle

    Hey I am trying to put background photos in my posts but know nothing about coding. I want to put different code in for different pages but also want specific pictures for both mobile and desktop. I am using the premium setup and have added simple CSS as well as elements but stated above I have no idea where to begin with code. My site is https://www.whereiskylemiller.com/

    I would like to add one of my pictures to be fixed behind the post but not on the header.
    for example I would like to add a landscape photo behind the post on this page.
    https://www.whereiskylemiller.com/ski-touring-in-mount-rainier/

    Thanks and sorry for being new to code

    #1489966
    David
    Staff
    Customer Support

    Hi there,

    you could try this.

    1. Create a new Hook element
    https://docs.generatepress.com/article/hooks-element-overview/

    Add this code to the hook content:

    <?php
    $desktopBackground  = get_post_meta( get_the_ID(), 'desktop_background', true );
    $mobileBackground  = get_post_meta( get_the_ID(), 'mobile_background', true );
    
    if ( $desktopBackground ) {
      echo '<style> 
    	body {
    	background-image: url(' . $desktopBackground . ');
    	background-size: cover;
    	}
    	</style>';
    }
    if ( $mobileBackground ) {
      echo '<style> 
    	@media(max-width: 768px) {
    	body {
    	background-image: url(' . $mobileBackground . ');
    	background-size: cover;
    	}
    	}
    	</style>';
    }
    ?>

    Select the WP_head hook
    Check Execute PHP
    Set Display Rules to Entire Site.

    2. Edit your Post and create 2 x Custom Fields:

    https://wordpress.org/support/article/custom-fields/

    You may need to enable them in the Post editor by clicking the 3 dot menu > Options > Advanced panels.

    Your 2 fields should be named:

    desktop_background
    mobile_background

    For each of the fields values you will need to add the full URL to the image you want to add.

    If this works, then you can simply select those fields in each post ( you don’t need to add new – they will be in the list ) and update the URLs.

    #1489981
    Kyle

    Thanks for the quick reply. I put the code but heading to my custom fields I don’t have the option for desktop_background and mobile_background. How do I add them?

    #1490012
    David
    Staff
    Customer Support

    In the Custom Fields panel you will see a link labelled Enter New this will clear the field above it where you add your field name. Once the field name is entered, click Add Custom Field

    #1490024
    Kyle

    Thanks again. I added the code to the hook as well as put in the custom fields.
    At this moment it just has some text at the top of the page.
    https://www.whereiskylemiller.com/ski-touring-in-mount-rainier/

    #1490040
    David
    Staff
    Customer Support

    Can you link me to a screen shot of your Hook Element ?

    #1490045
    Kyle

    Code Error

    #1490063
    David
    Staff
    Customer Support

    Thats not the same code i provided here:

    https://generatepress.com/forums/topic/want-to-add-different-background-photos-for-mobile-and-desktop-posts/#post-1489966

    Make sure it is that exact code, the wp_head hook is selected and the Execute PHP is enabled. Then the custom fields will work.

    #1490076
    Kyle

    Put in this code and it crashed the site.
    <?php
    $desktopBackground = get_post_meta( get_the_ID(), ‘desktop_background’, true );
    $mobileBackground = get_post_meta( get_the_ID(), ‘mobile_background’, true );

    if ( $desktopBackground ) {
    echo ‘<style>
    body {
    background-image: url(‘https://www.whereiskylemiller.com/wp-content/uploads/2020/10/IMG_0072_kyle-at-top-of-skin-track_4x5.jpg&#8217;);
    background-size: cover;
    }
    </style>’;
    }
    if ( $mobileBackground ) {
    echo ‘<style>
    @media(max-width: 768px) {
    body {
    background-image: url(‘https://www.whereiskylemiller.com/wp-content/uploads/2020/10/Gallery-for-Mount-Rainier-snowboarding-in-the-backcountry-10.jpg&#8217;);
    background-size: cover;
    }
    }
    </style>’;
    }
    ?>
    wp-admin/post.php?post=14766 this is my post ID for the site.

    Sorry for so many questions.

    #1490160
    David
    Staff
    Customer Support

    Hmmm… did it show any error?

    #1490180
    Kyle

    Sorry that I am asking so many questions.
    I posted the file above as seen into the hook
    then added this to my Page custom fields

    then when I went to see the page online I received this error

    #1490231
    David
    Staff
    Customer Support

    Well thats weird.
    Maybe another function is interfering. Lets try a different approach.
    Delete the Hook Element and remove the custom fields ( by disabling them in the 3 dot > options )

    The add this to the Simple CSS meta box in the post editor:

    body {
        background-image: url(your_destkop_image_url);
        background-size: cover;
    }
    
    @media(max-width: 768px) {
        body {
            background-image: url(your_mobile_image_url);
        }
    }

    Add the two URLs.
    You will need to copy and paste and update the urls for each post.

    #1490238
    Kyle

    Well it seemed to work in the far background but I’m looking to put it in the post and have it fixed. I’m hoping to have it between the photo and the text. I originally tired to do it with Generate blocks but the photo never showed up. I think that is an issue with AMP.
    This is what it looks like right now and would like the far background to still be black. Once again I really appreciate your support.
    https://www.whereiskylemiller.com/ski-touring-in-mount-rainier/

    #1490344
    David
    Staff
    Customer Support

    So the article background?

    If so change body { for .separate-containers .inside-article { in the CSS

    #1490353
    Kyle

    While it worked I think now it is a blown out photo filling the whole post. I’d like the photo to be fixed within the page and stay still while scrolling down.

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