Question

I’m developing a wordpress theme locally and I’m trying to set a base URL for all my images / JS in my wordpress theme. I’ve tried the standard <base href="http://localhost:8888/wp-content/themes/my-theme/" /> which does work for my JS and image file (which aren’t in the CSS) but it makes my menu links not work.

I’ve also tried <?php bloginfo('template_directory');?> which will make the link to my logo image work, but all my images included in my js don’t. I’ve got a supsersized slideshow running as the background image.

Obviously I can use absolute file paths – http://localhost:8888/wp-content/themes/my-theme/images/slides/image1.jpg – but I’m certain there must be another way that will work.

The js for my slideshow images is as follows

jQuery(function($){

            $.supersized({

                //Functionality
                slideshow               :   1,      //Slideshow on/off
                autoplay                :   1,      //Slideshow starts playing automatically
                start_slide             :   1,      //Start slide
                slide_interval          :   10000,  //Length between transitions
                transition              :   1,      //0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
                transition_speed        :   500,    //Speed of transition
                new_window              :   1,      //Image links open in new window/tab
                pause_hover             :   0,      //Pause slideshow on hover
                keyboard_nav            :   1,      //Keyboard navigation on/off
                performance             :   1,      //0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit)

                //Size & Position
                min_width               :   0,      //Min width allowed (in pixels)
                min_height              :   0,      //Min height allowed (in pixels)
                vertical_center         :   1,      //Vertically center background
                horizontal_center       :   1,      //Horizontally center background
                fit_portrait            :   1,      //Portrait images will not exceed browser height
                fit_landscape           :   0,      //Landscape images will not exceed browser width

                //Components
                navigation              :   1,      //Slideshow controls on/off
                thumbnail_navigation    :   1,      //Thumbnail navigation
                slide_counter           :   1,      //Display slide numbers
                slide_captions          :   1,      //Slide caption (Pull from "title" in slides array)
                slides                  :   [           // Slideshow Images
                                                    {image : 'http://localhost:8888/wp-content/themes/my-theme/images/slides/image1.jpg'},
                                                    {image : 'http://localhost:8888/wp-content/themes/my-theme/images/slides/image2.jpg'}
                                            ]

            }); 
        });

Any advice would be greatly appreciated.

Thanks

* UPDATED *

Ok, thanks to Pekka, I’ve got halfway there..

The code in my header.php file now reads

<script type="text/javascript">
template_directory = "<?php echo bloginfo('template_directory');?>";
</script>
<script type="text/javascript" src="<?php echo bloginfo('template_directory');?>/js/main-site.js"></script>

and in my main-site.js file I’ve got

{image : 'template_directory' + '/images/slides/image1.jpg'}

but it just won’t display the background images. I’ve tried with/without the trailing slash – assuming the syntax is incorrect?

Any advice? 🙂

UPDATED – AGAIN *

Noticed the ” around template_directory.Now the images are showing BUT the links in my menu aren’t working anymore :S

Answer 1

My favourite method of populating paths into JavaScript is to set it in the HTML page’s head like so:

<!-- Do this in the head, before you include any other Javascript -->
<script type="text/javascript">
  template_directory = "<?php echo bloginfo('template_directory');?>";
</script>

and then using the template_directory variable in your JavaScript code.

That way, you can still have static JavaScript resources, and you don’t need to mess with PHP inside them.