Featured Image as Section Background?

Hi,

Themler outputs the Post Featured Image using Post Image control. This control can be added inside the Posts control only. If you want to output this image somewhere on the template outside the Posts control you can add CMS Code control with the following code:

<?php echo the_post_thumbnail(); ?>

But Themler Parallax effect cannot be applied to this image because this is not control background.

Thank you,
Olivia

I might have a snippet for it. Give me some time.

I might have a snippet for it. Give me some time.

I'd love to see it.

Another issue I found is when trying to use the post featured image, it takes the smaller thumbnail file, instead of the actual featured image image size.

Tried many things, it is not so easy. TH native Parallax cannot be used as it is dependent on numbers in class names.
I achieved some simple parallax with CSS only, but not to 100%. Problem is some CSS code has to be connected to anything bellow image, and as soon you do it it ruins template in Themler.

Would you be satisfied with few new JS scripts caaled on pages ? Only proper way seems as extern parallax scripts.

Hello Tomzey,

Another issue I found is when trying to use the post featured image,
it takes the smaller thumbnail file, instead of the actual featured
image image size.

Well, in fact it's not the issue, we'd recommend that you just set large thumbnail size under Appearance >> Theme Options

regards,
Aileen

You are lucky, I managed it and cannot be more simple. Just small JS snippet inside.
Make your own custom image size, "full" is very bad practice, can slow down your site a lot.
I know you are experienced, will just explain more detailed for other Users.

All code is inside Pastebin: http://pastebin.com/7YPY2tTx
Code formatting on this forum is shit, useless.

• Add snippet to your functions.php, or Themler Home tab - Settings - Additional CMS Code:
• Insert one new CMS Control where you want your thumbnail to be dsiplayed.

Insert PHP and CSS code. Maybe better to use own CSS file as Themler doesnt allow to save MS property "filter" in CMS CSS code.

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ccffffff,endColorstr=#ccffffff); /* Math.floor(0.8 * 255).toString(16); */

Appreciate your work, Stagger!

Works pretty good, except for a few issues:

~Can I set the image to be cover size, and increase min height? Changing css doesn't seem to help.

~Title doesn't appear anywhere on the banner...

Title is disabled, uncomment title code line in functions.php.

Believe image is cover size already, it takes "full" size now and show it all. I tried to set min-height but it ruins JS code. Maybe best is to set new custom image size and not use "full", and experiment with changing this size tills is OK. Set crop option too.

This code is not for cover images, nor for free running images, unless you adapt them in Photoshop what is stupid to do. Make new custom image size with "Custom image sizes" plugin and set option crop too. Any height you set there javascript will hide one third.

Imagine situation where your "full", or any other wrong set, image size is portrait with 1600 px height. Yes javascript will hide one third, but on monitors with smaller heights you will never have chance to see much of the image. You scroll a bit and it is gone, content comes. If you have picture of persons standing you probably have chance to see only their foreheads and rest is gone and comes TH content.

What you have in mind is probably Parallax with fullscreen images, here is it different.