Change background image based on post tag

  • Resolved Jellico

    (@catsfoto1se)


    6 years, 1 month ago

    Hi all!

    I’m looking for help to create a snippet code (to be placed in functions.php) to load a background image based on tags in the post.

    For example, if a post has the tag “red001” it will load https://example.com/img/red001.jpg as a non-repetive “no scroll” background..

    This is one of my last issues that I need help with, my only other solution is to create one postpage template for each background, which would result in a lot (over 100) pages..

    • This topic was modified 6 years, 1 month ago by Jan Dembowski. Reason: Moved to Fixing WordPress, this is not an Developing with WordPress topic
Viewing 9 replies - 1 through 9 (of 9 total)
  • Joy

    (@joyously)

    6 years, 1 month ago

    You can add classes based on tags, but there are some added by default, although it might not be where you want it.
    WP adds quite a few classes using post_class(), and so the post itself will have a class like tag-red001 for a tag of red001. (this is the slug of the term)
    That means you can style that class and it will affect the post content.
    .tag-red001 {background-image: url(https://example.com/img/red001.jpg)}
    Trying to affect the entire page is more difficult since you can’t style a parent element with just CSS. You can do it in a script though. Or you can use PHP to put the tag class on the body element using a body_class filter.

    Thread Starter Jellico

    (@catsfoto1se)

    6 years, 1 month ago

    @joyously thx for the information.
    So you mean that if a post has a tag, WordPress automatic generate a css class for it?

    I was thinking more like this:

    <?php
// Add inline style to set body background via "myprefix_background_image" custom field
function myprefix_custom_field_background() {
	if ( $background = get_post_meta( get_the_ID(), 'myprefix_background_image', true ) ) { ?>
		<style type="text/css">
			body { background-image: url( "<?php echo esc_url( $background ); ?>" ); }
		</style>
	<?php }
add_action( 'wp_head', 'myprefix_custom_field_background' );

    This is not my code, and it apparently works on a custom field.

    Now, I’m a total newbie, so I don’t know how to rewrite this code so it reads the tags and selects the right background.

    Because if I’m right, the tags need to be loaded into an array and then somehow scanned for “red001, red002, blue001”, and when it finds one of them, it will set the $background to red001.jpg or blue045.jpg depending on the tag

    Joy

    (@joyously)

    6 years, 1 month ago

    Perhaps what you mean by tag is different from what I mean by tag.
    In WordPress jargon, the default post type is “post” and it has two default taxonomies: “category” and “tag”. So that is what I am referring to. By default, WordPress adds classes via the post_class() function that themes use on the HTML for a post, that represent the template and the taxonomies for that post. You can style those classes with background images and no extra PHP code is needed.

    Now that you explain, it sounds like you want to put the image name somewhere and spit out CSS dynamically. And usually a good way to do that is custom field. But custom fields are per post, not per taxonomy. You can make a taxonomy meta field or term meta field, though, but you have to look up which taxonomy and then which term (since there could be several terms for each taxonomy), and then get the meta for that.

    Since we are talking about images, the better way to go is to use the featured image of the post for the background image. WordPress does not dictate what the featured image is for, it just provides the functions to set and retrieve the image. The theme usually decides what to do with it. But again, that is per post, not taxonomy or term. There are plugins that help you choose images for each taxonomy, and probably help you do something with them (not sure, as I’ve not used those plugins).

    Thread Starter Jellico

    (@catsfoto1se)

    6 years, 1 month ago

    @joyously I might have explained my issue very poorly.

    I’m building a memorial site for pets, where visitors can upload a photo (that becomes the featured photo), write a eulogy, and choose a beautiful background photo, and then press submit.

    Now, when they are choosing the background, the system stores it like a tag for just that post, like red001.

    My problem now is that I need my “post template page” to show the correct background to each post, but since each post contains information about what background they need (in a tag), it shouldn’t be so hard (for someone that knows WordPress & php (not me)) to add the function that it loads the correct background image.

    Now, the reason I’ve chose to work with tag, is that I’m using elementor as a pagebulder, and it has the function to show different post-template pages depending on what tags the post has.

    But! To use this, I have to create a post-template page for each background, and that will result in a lot of pages.

    The code I mention previously, that should work with custom fields, didn’t work, maybe it was outdated, but I haven’t made so much with this “change background function” yet, so I’m totally open for using a custom field instead of my tag solution. However, I don’t know enough about WordPress and php, and it has taken me 4 weeks to get to just this none-working code, and that’s because my dyslexia isn’t playing well with reading guides.

    It seems like you know what you’re talking about, can you see anything faulty with that code?

    Joy

    (@joyously)

    6 years, 1 month ago

    The code is fine, although it doesn’t use a priority, so that defaults to 10 as everything else does and you don’t know if it comes out after the other CSS (to override) or before (where the theme CSS would override). Also, is the background image URL being stored as a complete URL? It needs to be, for that code to work.

    But you still refer to “tag” as if it’s the same as my “tag” which is a taxonomy. If your “tag” is a custom field, then your code should work. But if it’s something else, there is no relation with the custom field.

    Thread Starter Jellico

    (@catsfoto1se)

    6 years, 1 month ago

    @joyously I’m currently using the complete path in the custom field.

    But when I’m adding that code to my functions.php the WordPress crashes..

    “There has been a critical error on your website”

    And it’s this code I’m adding:

    <?php
// Add inline style to set body background via "myprefix_background_image" custom field
function myprefix_custom_field_background() {
	if ( $background = get_post_meta( get_the_ID(), 'usp-custom-background_image', true ) ) { ?>
		<style type="text/css">
			body { background-image: url( "<?php echo esc_url( $background ); ?>" ); }
		</style>
	<?php }
add_action( 'wp_head', 'myprefix_custom_field_background' );

    So something must be wrong with the code since it causes a fatal crash..

    .. do you mean I should use the !important code? Where?

    Joy

    (@joyously)

    6 years, 1 month ago

    I see now that I look closer that you are missing a closing brace.
    So the line
    <?php }
    should be

       <?php }
    }

    so that the function is closed correctly before the add_action call.

    Thread Starter Jellico

    (@catsfoto1se)

    6 years, 1 month ago

    @joyously yes, it didn’t crash, and when I added the !important it showed the post with the new customfield background.

    Thx a lot!
    .. Now I only need to fix so if the user selects red001 it will load https://example.com/img/red001.jpg

    body { background-image: url( https://example.com/img/"<?php echo esc_url( $background ); ?>".jpg ); }

    I wonder if this would work..

    Thread Starter Jellico

    (@catsfoto1se)

    6 years, 1 month ago

    Nope, it didn’t, but I finally solved it, maybe not the prettiest code, but it works:

    But I changed method from using the tag as I specified in the beginning and made it work with custom field instead..

    <?php
// Add inline style to set body background via "myprefix_background_image" custom field
function myprefix_custom_field_background() {

	if ( $background = get_post_meta( get_the_ID(), 'usp-custom-background_image', true ) ) { 
$backgroundpre = "https://example.com/img/";
$backgroundpost = ".gif";
$newbgurl = $backgroundpre . $background . $backgroundpost;
?>
		<style type="text/css">
			body { background-image: url( "<?php echo ($newbgurl); ?>")!important; }
		</style>
	<?php }
}
add_action( 'wp_head', 'myprefix_custom_field_background' );
    • This reply was modified 6 years, 1 month ago by Jellico.
Viewing 9 replies - 1 through 9 (of 9 total)

The topic ‘Change background image based on post tag’ is closed to new replies.