Setting background image settings for a specific page

Storm WordPressAdvancedSetting background image settings for a specific page

If you wish to have different background image settings than those set on Background → Images in the theme options panel, you will need to set up a filter hook PHP function that will modify them when a specific page is loaded. To do this you will need the unique post / page ID. To find your post / page ID, edit the post in WordPress and look in the address bar. Amongst other things it will have a section that looks like post=702, this number is the post ID. See the table below for available options and the examples below the table for how to use them.

KeyDefaultDescription
speed2000Speed of the transition between background images in milliseconds
transition‘fade’The transition animation. ‘none’, ‘fade’, ‘fadeOutFadeIn’, ‘slideDown’, ‘slideRight’, ‘slideUp’, ‘slideLeft’, ‘carouselRight’, ‘carouselLeft’
position‘fixed’Whether the background is positioned absolute or fixed
fitLandscapefalsePrevent landscape images from being cropped by locking them at 100% width
fitPortraittruePrevent portrait images from being cropped by locking them at 100% height
fitAlwaysfalsePrevent images from ever being cropped
positionX‘center’Where to position the image on the X axis. ‘left’, ‘center’, ‘right’
positionY‘center’Where to position the image on the Y axis. ‘top’, ‘center’, ‘bottom’
easing‘swing’The easing function to use when transitioning
controlsSelector‘#fs-controls’The jQuery selector of the element to append the controls to
hideSpeed1000Speed that the website is hidden at, when activating full screen mode, in milliseconds
showSpeed1000Speed that the website is shown at, when closing full screen mode, in milliseconds
controlSpeed500Speed that the controls fade in at, in full screen mode.
fadeIEfalseFade the website when the full screen button is clicked in IE 7,8
savetrueSave the current background image across pages in a cookie
slideshowtrueEnable the slideshow functionality (play/pause button)
slideshowAutotrueStart the slideshow automatically
slideshowSpeed5000The time that each background image is displayed in the slideshow
randomfalseDisplay the background images in random order each time, forces “save: false”
keyboardtrueUse the keyboard to control the background images. Left arrow = prev, right arrow = next, esc = close full screen mode
captionPosition‘center bottom’The default caption position
captionSpeed600The speed of the caption fade animation
bulletstrueTurns on bullet navigation
lowQualityfalseTurns on lower quality but higher performance transitions
sliderfalsejQuery selector of the slider container
breakerfalseDisplay breaker image
breakerOnMaxfalseDisplay breaker image in maximize mode
errorBackground(empty string)The path of the image to display if there is an error loading one of the images

Examples

This code should be entered into the wp-content/themes/storm/functions.php file.

Change the options for a single post

Replace POSTID on line 1 of the code below with your post ID.

12
3
4
5
6
7
8
9
10
11

add_filter('tcr_singular-post-POSTID_background_options', 'storm_set_background_options');            
function storm_set_background_options($options)
{
    $options['speed'] = 4000;
    $options['slideshow'] = false;
    $options['random'] = true;
    $options['lowQuality'] = true;
    
    return $options;
}
add_filter('tcr_singular-post-POSTID_background_options', 'storm_set_background_options');
            
function storm_set_background_options($options)
{
    $options['speed'] = 4000;
    $options['slideshow'] = false;
    $options['random'] = true;
    $options['lowQuality'] = true;
    
    return $options;
}

Change the options for a single page

Replace POSTID on line 1 of the code below with your page ID.

12
3
4
5
6
7
8
9
10
11

add_filter('tcr_singular-page-POSTID_background_options', 'storm_set_background_options');            
function storm_set_background_options($options)
{
    $options['speed'] = 4000;
    $options['slideshow'] = false;
    $options['random'] = true;
    $options['lowQuality'] = true;
    
    return $options;
}
add_filter('tcr_singular-page-POSTID_background_options', 'storm_set_background_options');
            
function storm_set_background_options($options)
{
    $options['speed'] = 4000;
    $options['slideshow'] = false;
    $options['random'] = true;
    $options['lowQuality'] = true;
    
    return $options;
}

Change some options for all pages

This filter will only affect viewing single pages, any other page on your site such as single posts or archives will maintain your settings from the theme options panel.

1
2
3
4
5
6
7
8
9
10
11

add_filter('tcr_singular-page_background_options', 'storm_set_background_options');
            
function storm_set_background_options($options)
{
    $options['speed'] = 8000;
    $options['slideshow'] = false;
    $options['bullets'] = false;
    $options['position'] = 'absolute';
    
    return $options;
}
add_filter('tcr_singular-page_background_options', 'storm_set_background_options');
            
function storm_set_background_options($options)
{
    $options['speed'] = 8000;
    $options['slideshow'] = false;
    $options['bullets'] = false;
    $options['position'] = 'absolute';
    
    return $options;
}

Using multiple functions

PHP cannot have more than one function with the same name, if you try to use the same code to modify the settings for more than one page you will get a Fatal error. To avoid this you should change second parameter to add_filter and the function name so that they are the same, but different to any existing function, for example:

12
34
5
6
7
8
9
10
11
12
1314
1516
17
18
19
20
21
22
23

add_filter('tcr_singular-page_background_options', 'storm_set_background_options_page');    
function storm_set_background_options_page($options){
    $options['speed'] = 8000;
    $options['slideshow'] = false;
    $options['bullets'] = false;
    $options['position'] = 'absolute';
    
    return $options;
}
 
add_filter('tcr_singular-page-702_background_options', 'storm_set_background_options_702');            
function storm_set_background_options_702($options){
    $options['speed'] = 4000;
    $options['slideshow'] = false;
    $options['random'] = true;
    $options['lowQuality'] = true;
    
    return $options;
}
add_filter('tcr_singular-page_background_options', 'storm_set_background_options_page');
    
function storm_set_background_options_page($options)
{
    $options['speed'] = 8000;
    $options['slideshow'] = false;
    $options['bullets'] = false;
    $options['position'] = 'absolute';
    
    return $options;
}

add_filter('tcr_singular-page-702_background_options', 'storm_set_background_options_702');
            
function storm_set_background_options_702($options)
{
    $options['speed'] = 4000;
    $options['slideshow'] = false;
    $options['random'] = true;
    $options['lowQuality'] = true;
    
    return $options;
}
Be inspired. © 2024 ThemeCatcher Ltd. 20-22 Wenlock Road, London, England, N1 7GU | Company No. 08120384 | Built with React | Privacy Policy