php – Using Featured Image as Hero Background in Word Press
I have the Author Cats theme in Word Press (kimcoxauthor.com). I had hoped they would add this feature for the book pages in a future update since I bought a lifetime license for all updates but it’s been a few years and the last time I asked they said they didn’t intend to do that and I should hire a developer if I wanted to change it. Since I can’t afford that and have some coding experience, I have been trying to figure out how to fix it myself. I appreciate any help you can give me. Here’s the problem:
In the hero section of my home page, it has the option to use a background image, then there is a book cover and a description beside it. On the blog post page, which I don’t use, the hero section lets you use the featured image as the background but doesn’t have a book cover image on top of it (sample post page: https://kimcoxauthor.com/sample-3/). On the book page, it only allows you to use a background color which will be the same on all your book pages (book page: https://kimcoxauthor.com/books/all-this-time/). Note not all book covers look good on the same color. I want my book page hero sections to allow me to use the featured image as the background image.
What have I tried so far? I mixed the codes for book page and some of post page together and it worked. It pulled the featured image, had a book cover, and had a description. The only problem is the book cover was off – too close to the top on my laptop and even worse on mobile view. I changed and added css (margin and padding in numerous places) to try to fix it to no avail. No matter what I did or changed, the cover stayed in the same spot. I was able to fix it well- enough for my laptop view by adding more description to the hero section, but the mobile version was still messed up, showing only about half of the book cover. I ended up changing it back to the background color. This is the php code to get the featured image as used in the post page:
// featured image
if (has_post_thumbnail()) {
$full_featimg = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full');
$featimg = $full_featimg[0];
} else {
$get_default_featimg = get_field('default_featured_image','option');
$get_featimg_size="full"; // (thumbnail, medium, large, full or custom size)
$featimg_array = wp_get_attachment_image_src($get_default_featimg, $get_featimg_size);
$featimg = $featimg_array[0];
}
‘);”>
Leave an answer