Setting Featured Image focus area on Mobile

  • vagabonn

    (@vagabonn)


    7 years, 3 months ago

    Hi There,

    I’m creating a new website:
    http://www.bonnieduffley.com

    When I scale my site from Desktop to Mobile, my cover image (set as a “Featured Image” in WordPress) scales to the center – thereby cutting off my body as my image’s focal point is on the right.

    • Is there any way to set the scaling to “right” instead of “center”?
    • My previous theme had that as an option built in, but my new theme doesn’t.
    • Is there a plugin that can help?
    • I’ve seen some focal point editors for regular blog post images, but those don’t seem to work for featured images, which is what I’m looking for

    Thanks!

Viewing 5 replies - 1 through 5 (of 5 total)
  • luckychingi

    (@luckychingi)

    7 years, 3 months ago

    add this custom css
    .swiper-slide{
    background-position: right;
    }

    • This reply was modified 7 years, 3 months ago by luckychingi. Reason: missed the period before the element classname
    Thread Starter vagabonn

    (@vagabonn)

    7 years, 3 months ago

    Thanks for the help! I thought of using CSS also, but I won’t always want to scale to the right. Some Featured Images will need to scale to the center, left, etc.

    slackerman

    (@slackerman)

    7 years, 3 months ago

    Add this CSS through the WordPress admin panel Appearance > Customize > Additional CSS or the Custom CSS portion of your theme if applicable.

    .swiper-wrapper .swiper-slide{
background-position: right !important;
}

    Let me know if that works for you!

    slackerman

    (@slackerman)

    7 years, 3 months ago

    Just saw the messages above, in that case, use:

    .home .swiper-wrapper .swiper-slide{
background-position: right !important;
}
    • This reply was modified 7 years, 3 months ago by slackerman.
    luckychingi

    (@luckychingi)

    7 years, 3 months ago

    since all the featured images have the same classes, you can use Jquery position images based on the src tag. This might be a tedious task if you keep changing the images frequently.

    If you can set unique ID , class or data element to each featured image then it would be lot easier

    • This reply was modified 7 years, 3 months ago by luckychingi.
    • This reply was modified 7 years, 3 months ago by luckychingi. Reason: typo
Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Setting Featured Image focus area on Mobile’ is closed to new replies.