Featured Image as Section Background?

tiriinx
13 Posts
tiriinx posted this 23 July 2016

I'm interested in having the top section of my page be the featured image I pick from Wordpress, with a parallax effect.

Is there a way to set it like that? Or can I know how to control where the wordpress featured image will show up?

Example:

http://themes.themegoods2.com/proxima/about-me/

I'm interested in having the top section of my page be the featured image I pick from Wordpress, with a parallax effect. Is there a way to set it like that? Or can I know how to control where the wordpress featured image will show up? Example: http://themes.themegoods2.com/proxima/about-me/
Vote to pay developers attention to this features or issue.
9 Comments
Order By: Standard | Newest
Support Team
Support Team posted this 24 July 2016

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

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
Stagger Lee
1820 Posts
Stagger Lee posted this 24 July 2016

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

I might have a snippet for it. Give me some time.
tiriinx
13 Posts
tiriinx posted this 24 July 2016

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.

> 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.
Stagger Lee
1820 Posts
Stagger Lee posted this 25 July 2016

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.

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.

Last edited 25 July 2016 by Stagger Lee

Support Team
Support Team posted this 25 July 2016

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

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
Stagger Lee
1820 Posts
Stagger Lee posted this 25 July 2016

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); */

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][1] [1]: 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); */
tiriinx
13 Posts
tiriinx posted this 25 July 2016

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...

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...
Stagger Lee
1820 Posts
Stagger Lee posted this 26 July 2016

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.

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.
Stagger Lee
1820 Posts
Stagger Lee posted this 26 July 2016

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.

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.
You must log in or register to leave comments