Wordpress - Set a Drop Down For Featured Image To Change Background Position Depending on Page-CodePudding

Right now my featured image for a page template is pulled from the standard Featured Image option on the right side of the new page.

I have my CSS in my stylesheet that says object-fit: cover since it's an absolute image instead of a background image

Each image is positioned a little differently and what i'd like to do is make it so that i can set a specific object-position: x x for each image.

So, for one image, if it's cutting off someones head, i could change it to object-position: center bottom; for example or vice versa.

Does anyone know the best way of doing this ? Any way for some plugin that would allow me to dictate lets say 3 options based off a drop down from the backend of WP like:

Background: Option 1: center top Option 2: center Option 3: center bottom

And then in the CSS i could set a class that would correspond to those? This way each featured image doesn't need to be one way.

Thanks!

CodePudding user response：

Rather than adding another plugin (though Pods or ACF would be the easiest route), you could do this relatively simply by leveraging WP built-in features.

1. First enable custom fields in your post edit screen Hit the three dots in the top-right; then go to Preferences, then enable Custom fields.

2. Add a custom field at the bottom of the post edit screen. Give your custom field a name (say, "photo-style") and then its value is a single class name that you can switch out depending on needs, e.g. "photo-center", "photo-top", etc.

3. In Admin -> Tools -> Theme File Editor add the following to your Theme Functions file

add_filter( 'body_class', function( $classes ) {
            $my_post = get_the_ID();
            $new_class = get_post_meta($my_post, 'photo-style', true);
            if($new_class !== "false") {
                return array_merge( $classes, array( $new_class ) );
            }
            return $classes;
        } );

4. Now, when you load your post, you can open page inspector and see the page body has your new class name ("photo-center, etc.") added. Then you can make whatever CSS changes you need to in customizer and you're set.

The only drag is that you'll need to remember to add the custom field every time. Maybe not a major issue if it's a site you'll be managing yourself, but were it for a customer I'd think about a more easy-to-manage solution.

CodePudding user response：

You should implement a custom meta field (a plugin like ACF or CMB2 is the easiest solution) and then use its value on the frontend.

<?php

if (has_post_thumbnail()) {
    $post_id = get_the_ID();
    $custom_class = get_post_meta($post_id, 'my_custom_image_class', true);
    // ACF example
    // $custom_class = get_field('my_custom_image_class', $post_id);
    
    the_post_thumbnail('post-thumbnail', ['class' => $custom_class]);
}