Forum

Thread tagged as: Question, Problem, Configuration

How can i place a perch tag to change the the background of my website?

//backstretch
$.backstretch([
    "img/wallpaper.jpg"
], {
    fade: 750,
    duration: 1000
});

The code above is responsible for the background of my website and is in a seperate js file.

Asad Masroor

Asad Masroor 0 points

  • 2 years ago

Asad, this is likely something youll need to do in attributes template for each page... but to fully understand what your trying to do can you give an example of your expected results??

Drew McLellan

Drew McLellan 2638 points
Perch Support

and is in a seperate js file

If the code needs to be in an external file, and not part of the page, you'll need to make that file manageable by Perch too.

You can read about using different file extensions here: https://docs.grabaperch.com/perch/getting-started/file-extensions/

https://www.jquery-backstretch.com/. This is the plugin I am using.

Drew McLellan said:

and is in a seperate js file

If the code needs to be in an external file, and not part of the page, you'll need to make that file manageable by Perch too.

You can read about using different file extensions here: https://docs.grabaperch.com/perch/getting-started/file-extensions/

I've started to implement this but I have a few questions 1) Will I need to include perch runtime at the top as I have on the other pages. 2) How should I put the perch tag in? Should it be within the quote marks so e.g.

//backstretch
$.backstretch([
"<?php perch_content('Wallpaper'); ?>"
], {
fade: 750,
duration: 1000
});

3) Will I have to make a new page on Perch(GUI) for this tag to show up?

Hopefully, these questions made sense.

Drew McLellan

Drew McLellan 2638 points
Perch Support

Will I need to include perch runtime at the top as I have on the other pages.

Yes, you will.

How should I put the perch tag in? Should it be within the quote marks so e.g.

Yes, that looks correct.

Will I have to make a new page on Perch(GUI) for this tag to show up?

It should turn up automatically when you request the JS file from the server.

Drew McLellan said:

Will I need to include perch runtime at the top as I have on the other pages.

Yes, you will.

How should I put the perch tag in? Should it be within the quote marks so e.g.

Yes, that looks correct.

Will I have to make a new page on Perch(GUI) for this tag to show up?

It should turn up automatically when you request the JS file from the server.

Is my htaccess file correct?

AddType application/x-httpd-php .php .htm .html .js
AddHandler php-script .html .js
Drew McLellan

Drew McLellan 2638 points
Perch Support

That's going to depend on your Apache configuration - is it working?

Drew McLellan said:

That's going to depend on your Apache configuration - is it working?

No it didn't work but then i copied and pasted the js code in a script tag on the index page and it works. However, when I upload an image through perch, it doesn't change on the website instead there's no wallpaper.

This is the js code

//backstretch
$.backstretch([
"<?php perch_content('Wallpaper'); ?>"
], {
fade: 750,
duration: 1000
});

and this is the template I am using

<img src="<perch:content type="image" id="image" label="Image">">

Asad Masroor said:

Drew McLellan said:

That's going to depend on your Apache configuration - is it working?

No it didn't work but then i copied and pasted the js code in a script tag on the index page and it works. However, when I upload an image through perch, it doesn't change on the website instead there's no wallpaper.

This is the js code

//backstretch
$.backstretch([
"<?php perch_content('Wallpaper'); ?>"
], {
fade: 750,
duration: 1000
});

and this is the template I am using

<img src="<perch:content type="image" id="image" label="Image">">

Figured it out, had to change the perch template to

<perch:content id="wallpaper" type="image" label="Logo">