Question 14477 in Wordpress Question posted in
The official Wordpress documentation can be found here.

WordPress – Set a Drop Down For Featured Image To Change Background Position Depending on Page

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!

Tags:

2

Answers


  1. 0

    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.

    UPDATE. If you’re using ACF

    • Ignore steps 1 and 2 above. Go to Custom Fields in admin. Add a new field group, setting it to display on posts/pages etc as you need.

    • Make it a select, with the options you want (center, center-top, etc.) and set its name to "photo-style". Edit one of your posts and select the right photo styling from the new dropdown.

    • Steps 3 and 4 are the same as above. Add the new function then style with css. If you check dev tools you’ll see that body now has the class you selected from your drop-down list on it. You could then do something like:

      body.center-top .wp-featured-image {
      object-fit:top;
      }

      body.center .wp-featured-image {
      object-fit:center;
      }

    Login or Signup to reply.
  2. 0

    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]);
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search