- This topic has 26 replies, 2 voices, and was last updated 3 years, 5 months ago by David.
-
AuthorPosts
-
October 15, 2020 at 1:46 am #1489867Kyle
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
October 15, 2020 at 2:53 am #1489966DavidStaffCustomer SupportHi 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.
October 15, 2020 at 3:11 am #1489981KyleThanks 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?
October 15, 2020 at 3:36 am #1490012DavidStaffCustomer SupportIn 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 FieldOctober 15, 2020 at 3:43 am #1490024KyleThanks 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/October 15, 2020 at 3:52 am #1490040DavidStaffCustomer SupportCan you link me to a screen shot of your Hook Element ?
October 15, 2020 at 3:56 am #1490045KyleOctober 15, 2020 at 4:14 am #1490063DavidStaffCustomer SupportThats not the same code i provided here:
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.October 15, 2020 at 4:23 am #1490076KylePut 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’);
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’);
background-size: cover;
}
}
</style>’;
}
?>
wp-admin/post.php?post=14766 this is my post ID for the site.Sorry for so many questions.
October 15, 2020 at 5:20 am #1490160DavidStaffCustomer SupportHmmm… did it show any error?
October 15, 2020 at 5:30 am #1490180KyleSorry 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
October 15, 2020 at 6:08 am #1490231DavidStaffCustomer SupportWell 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.October 15, 2020 at 6:18 am #1490238KyleWell 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/October 15, 2020 at 7:26 am #1490344DavidStaffCustomer SupportSo the article background?
If so change
body {
for.separate-containers .inside-article {
in the CSSOctober 15, 2020 at 7:30 am #1490353KyleWhile 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.
-
AuthorPosts
- You must be logged in to reply to this topic.