- This topic has 5 replies, 2 voices, and was last updated 7 years, 6 months ago by Mahesh.
-
AuthorPosts
-
March 20, 2017 at 7:10 am #112400DjordjeParticipant
Hi CT team,
Nice theme, using Rock Star Pro for a while. I have a few questions for you.
Is it somehow possible to have a different header image on every page? Let’s take a demo website as an example – for instance, I would like to have one image on About page and the other one on Gallery page. It would make my website more dynamic.
Also, I was wondering why those parallax frontpage images (pedals and instruments) are not behaving the same on different devices. If I turn on responsive mode in browser I get that parallax scrolling effect but on few Android phones this section is completely static. Tried with different Android phones and couple of different browsers. Windows Lumia phone has parallax effect, though.
And what are your recommendations on optimization, besides reducing image size, so this theme could be as fast as possible?
Thanks
March 20, 2017 at 11:42 pm #112449MaheshParticipant@djordjea: Go to Dashboard=> Appearance=> Customize=> Header Image and select Entire Site, Page/Post Featured Image in Enable Featured Header Image on option. This will put featured image on their specific single page. Make sure you put featured image in the pages and posts. If no featured image is present, default header image will be used.
Parallax scrolling effect is working fine on Android phones.
The things that impact the theme the most is the image sizes (please use recommended sizes) and YouTube videos if you are using one. Apart these, all are good.
Le me know if any problem.Regards,
MaheshMarch 22, 2017 at 6:16 am #112568DjordjeParticipantThanks for the header image advice, that did the trick!
As for the parallax image, sadly no, here is a screenshot of what I’m talking about:
Tried with Chrome and Opera browsers on Androids 4.x and 6.x. Image is static, no signs of that effect. And it’s also kind of cropped in the middle, it’s not that there’s that “responsive scaling” where image looks the same as on bigger screens. You can clearly see on screenshot that it shows only Boss pedal and not the other ones.
Regarding optimization – I did everything from caching, minifying and reducing image size, but there’s a render blocking Javascript that’s causing delays. It’s also present in demo page: http://i.imgur.com/NYqJNN1.png
So, if you have any tip on how to move that JS a little bit to the end of the body in order to achieve faster loading times, it would be great.March 24, 2017 at 5:25 am #112774MaheshParticipant@djordjea: Sorry for the late reply.
The issue with the parallax image in mobile devices, the themes these days recommends that not to use this in Mobile devices, and the mobile doesn’t support background-attachment property. This is a CSS property.
Parallax effect can be put on the theme using JavaScript but will impact on the performance and optimization. A theme must be more optimized, fast and reliable more on mobile devices as limited resources and bandwidth to load the theme as fast as possible. So using JavaScript for the feature will just put some more load to the site.Hope you understand.
For JS on footer, please use desired plugin from https://wordpress.org/plugins
Regards,
MaheshMarch 24, 2017 at 11:15 am #112806DjordjeParticipantYes, sure, it’s not worth having a laggy website on smartphones because of some eye-candy features. That effect on Windows Lumia actually isn’t smooth as it should be.
I installed some plugin for moving JS to the bottom, website seems a bit faster… or it’s just a placebo 🙂
Thanks Mahesh!
March 26, 2017 at 2:03 am #112887 -
AuthorPosts
- The topic ‘Header/parallax images, optimization etc.’ is closed to new replies.