Forum Support

Shape 5
March 28, 2024, 03:09:04 AM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News: Shape 5 Forum
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: Apply parallax effect to bg images not part of Vertex  (Read 1005 times)
smuir
Jr. Member
**
Offline Offline

Posts: 117



« on: January 31, 2015, 01:31:02 AM »

Hi guys

Simple question that you've probably been asked before (but I couldn't find it when searching the forum)....

Say I add a background image to #s5_header_area1.  Can I copy and paste a bit of code somewhere so that the parallax effect (as configured within Vertex) is applied to that image?  #s5_header_area1 is not included within Vertex for possible parallax areas.  Just want to be able to use that awesome effect, even if a bit of manual code is require to get it working.

Thanks again.   Wink
Logged
mikenicoll
Global Moderator
*****
Offline Offline

Posts: 20162



WWW
« Reply #1 on: January 31, 2015, 07:15:21 PM »

Hello,

That would require custom programming which we do not support via the forums. If you view in the Vertex > Parallax_Backgrounds.PHP you will see all the areas we have added to the back end of Vertex. Note that you would also have to edit the XML file to add another back end field that you can modify. You can also try manually setting the background to fixed for a similar effect.
Logged

Mike Nicoll
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
smuir
Jr. Member
**
Offline Offline

Posts: 117



« Reply #2 on: January 31, 2015, 09:33:46 PM »

Thanks Mike, appreciate the tips.  I gave it a go, and the good news is that it didn't mess anything up!  The bad news is that it didn't add the background to the template.  It appeared in Vertex successfully as another background option and changes were saved successfully with Vertex, but no image appeared on the front end.

I added this in parallax_backgrounds.php:

Code:
<?php if ($s5_header_area1_background_parallax == "yes" && $s5_header_area1_background_image != "") { ?>
s5_check_parallax_scroll("s5_header_area1",<?php if (strrpos($s5_header_area1_background_image_position,"center") > 0) { ?>"50% "<?php } else { ?>"0px "<?php ?>);
<?php ?>

And I added this in Vertex.xml (I noticed that the xml_s5_backgrounds_notice tags were in ascending numerical order, and there were 22, so I just labelled the one I added as 23) :

Code:
<field name="xml_s5_backgrounds_notice23" type="spacer:vertex-plain-spacer" label="TPL_FIELD_BACKGROUNDS_NOTICE23" />
<field name="xml_s5_header_area1_background" type="select:list" default="no" label="TPL_FIELD_BACKGROUND_LABEL" description="TPL_FIELD_BACKGROUND_DESC">
<option value="yes">TPL_FIELD_BACKGROUND_01</option>
<option value="no">TPL_FIELD_BACKGROUND_02</option>
</field>
<field name="xml_s5_header_area1_background_color" type="text:6:6" default="FFFFFF" size="6" label="TPL_FIELD_BACKGROUND_COLOR_LABEL" description="TPL_FIELD_BACKGROUND_COLOR_DESC" />
<field name="xml_s5_header_area1_background_image" type="text" default="" label="TPL_FIELD_BACKGROUND_IMAGE_LABEL" description="TPL_FIELD_BACKGROUND_IMAGE_DESC" />
<field name="xml_s5_header_area1_background_image_repeat" type="select:list" default="no-repeat" label="TPL_FIELD_BACKGROUND_IMAGE_REPEAT_LABEL">
   <option value="repeat">TPL_FIELD_IMAGE_REPEAT_01</option>
                   <option value="no-repeat">TPL_FIELD_IMAGE_REPEAT_02</option>
                   <option value="repeat-x">TPL_FIELD_IMAGE_REPEAT_03</option>
   <option value="repeat-y">TPL_FIELD_IMAGE_REPEAT_04</option>
            </field>
<field name="xml_s5_header_area1_background_image_position" type="select:list" default="top center" label="TPL_FIELD_BACKGROUND_IMAGE_POSITION_LABEL">
   <option value="top left">TPL_FIELD_IMAGE_POSITION_01</option>
                   <option value="center left">TPL_FIELD_IMAGE_POSITION_02</option>
                   <option value="bottom left">TPL_FIELD_IMAGE_POSITION_03</option>
   <option value="bottom center">TPL_FIELD_IMAGE_POSITION_04</option>
   <option value="center center">TPL_FIELD_IMAGE_POSITION_05</option>
   <option value="top center">TPL_FIELD_IMAGE_POSITION_06</option>
   <option value="top right">TPL_FIELD_IMAGE_POSITION_07</option>
   <option value="center right">TPL_FIELD_IMAGE_POSITION_08</option>
   <option value="bottom right">TPL_FIELD_IMAGE_POSITION_09</option>
            </field>
<field name="xml_s5_header_area1_background_image_size" type="select:list" default="100% auto" label="TPL_FIELD_BACKGROUND_IMAGE_SIZE_LABEL">
   <option value="none">TPL_FIELD_IMAGE_SIZE_01</option>
                   <option value="100% auto">TPL_FIELD_IMAGE_SIZE_02</option>
                   <option value="auto 100%">TPL_FIELD_IMAGE_SIZE_03</option>
   <option value="100% 100%">TPL_FIELD_IMAGE_SIZE_04</option>
   <option value="auto auto">TPL_FIELD_IMAGE_SIZE_05</option>
   <option value="contain">TPL_FIELD_IMAGE_SIZE_06</option>
   <option value="cover">TPL_FIELD_IMAGE_SIZE_07</option>
   <option value="custom">TPL_FIELD_IMAGE_SIZE_08</option>
            </field>
<field name="xml_s5_header_area1_background_image_size_custom" type="text" default="" label="TPL_FIELD_BACKGROUND_IMAGE_SIZE_CUSTOM_LABEL" description="TPL_FIELD_BACKGROUND_IMAGE_SIZE_CUSTOM_DESC" />
<field name="xml_s5_header_area1_background_image_attachment" type="select:list" default="scroll" label="TPL_FIELD_BACKGROUND_IMAGE_ATTACHMENT_LABEL">
   <option value="scroll">TPL_FIELD_IMAGE_ATTACHMENT_01</option>
                   <option value="fixed">TPL_FIELD_IMAGE_ATTACHMENT_02</option>
                   <option value="local">TPL_FIELD_IMAGE_ATTACHMENT_03</option>
            </field>
<field name="xml_s5_header_area1_background_parallax" type="select:list" default="no" label="TPL_FIELD_BACKGROUND_PARALLAX_LABEL" description="TPL_FIELD_BACKGROUND_PARALLAX_DESC">
<option value="yes">TPL_FIELD_PARALLAX_01</option>
<option value="no">TPL_FIELD_PARALLAX_02</option>
</field>

Just wondering what I am missing?  There seems to be a reference that is missing from this equation to make it all work.  I've replicated the code in the two files you mentioned, but are you able to identify something else that needs to change?

I understand that this borders on custom changes but anything that just involves copying a block of text and changing the div ID name is something easy enough for me to have a go at!  Plus it opens up a world of possibility with your template.

If you can point out what I'm missing, that would be appreciated.  If you can't because it's too complex, I understand and thank you anyway.  See what you can do.

Thanks again.
Logged
mikenicoll
Global Moderator
*****
Offline Offline

Posts: 20162



WWW
« Reply #3 on: February 02, 2015, 06:00:50 PM »

Hello,

Let me double check with our Vertex programmer to see if this is possible without too much complexity for this additional position on the Template. Certain areas may require additional steps.
Logged

Mike Nicoll
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
smuir
Jr. Member
**
Offline Offline

Posts: 117



« Reply #4 on: February 02, 2015, 08:41:33 PM »

Thanks Mike.  Much appreciated.
Logged
mikenicoll
Global Moderator
*****
Offline Offline

Posts: 20162



WWW
« Reply #5 on: February 04, 2015, 02:08:36 PM »

Hello,

Our developer got back to me and told me the steps I suggested should be all that is needed. You should also check the source of his page to make sure the entire s5_check_parallax_scroll("s5_header_area1"), is outputting correctly as you might be missing a variable and the call isn?t complete or something along those lines.

Unfortunately beyond this we can't provide additional support as that would involve custom programming changes.

Logged

Mike Nicoll
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
smuir
Jr. Member
**
Offline Offline

Posts: 117



« Reply #6 on: February 09, 2015, 02:06:36 AM »

Thanks Mike for your efforts.  The code I have is exactly as I pasted it into the code section of my reply to you previously, so if there are no errors visible there then there are no errors in the code.

I think it may have something to do with the fact that I had to invent the tag xml_s5_backgrounds_notice23.  23 didn't exist - I just invented it as it followed on sequentially from 22 (1-22 exist).  This is also probably why when this background option/section is viewed in Vertex, it is different to the others because it is not named correctly.  Please see attached screen shot.  This screen shot shows what the changes you recommended looks like in Vertex.  Perhaps there is one forgotten little step or change somewhere?  If you see the attachment and know why it appears that way and what can be done to properly label it or link it correctly like the other background options, please let me know.  If you can't, that OK, I appreciate your efforts anyway.  Just sending it through in case it sheds some light on the issue.  I feel it is soooo close to working!  Thanks again.
Logged
mikenicoll
Global Moderator
*****
Offline Offline

Posts: 20162



WWW
« Reply #7 on: February 09, 2015, 10:01:49 PM »

Hmm,

I am not quite sure which is why I consulted with the Vertex programmer. The TPL value just needs to have a language value added in the XML file so it doesn't appear that way. Since you got it in the Template Manager you just need to check the php file to make sure the values are echoed from the Template Manager and input into the source of the Template as the other positions are done.

You haven't posted a URL so I can't see your page source.
Logged

Mike Nicoll
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
smuir
Jr. Member
**
Offline Offline

Posts: 117



« Reply #8 on: February 09, 2015, 10:38:28 PM »

Thanks Mike.  It's on my localhost so I don't have a URL.  But I'll check the code again very carefully and if it works, it works.  If not, I appreciate all your help anyway.  Thanks.
Logged
mikenicoll
Global Moderator
*****
Offline Offline

Posts: 20162



WWW
« Reply #9 on: February 09, 2015, 10:41:58 PM »

Alright NP
Logged

Mike Nicoll
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF | SMF © 2013, Simple Machines
Joomla Bridge by JoomlaHacks.com
Valid XHTML 1.0! Valid CSS!
Looking for the largest variety in template designs? Look no more. Never buy 1 theme again. Signups start at just $89 for access to all of our themes.
Send Us An Email
Please send us your questions and we will email you back as soon as we can. Product support questions should be posted in our support forums under the Help menu. Our staff will assist you from there.