This fully responsive solution enables you to display your featured image before the content on single posts & pages and float your entry title over the image so its centered and displays perfectly on any screen size like this:
The code also enables you to add a fallback featured image which is displayed when no image is added manually to any single post or page.
The fallback image can be added to your child themes images folder as long as its named toi.jpg.
You can then change the fallback image via the customizer so there’s no need to edit any code:
Demo Video
Code Installation Instructions
After you login & download the files:
Step 1 : Upload the single.php file to your child themes root directory.
Step 2 : Add the background image named toi.jpg to your child themes images folder.
Step 3 : Upload the 2 .js files from the js folder into your child themes js folder. Create a js folder if your child themes doesn’t already include one.
Step 4 : Copy the PHP code from the customize.php file in the lib folder and add it to your customize.php file in your child themes lib folder.
Step 5 : Copy the CSS from the style.css file and paste it before the start of the CSS for Media Queries in your child themes style.css file. You can also integrate the CSS for Media Queries into your existing themes CSS for Media Queries.
You can download the files below: