javascript file not working with image upload

[danielholanda]

Hello,

I've just began with processwire. I've managed to link all the connections I needed to do with <?php echo $config->urls->templates?>. Ok, everything seems to work from my original html/css. But! I have a javascript file which loads random pictures from an array and after it selects it from the given url. This is the javascript code:

$(window).load(function() {
   var randomImages = ['img1','img2','img3'];
   var rndNum = Math.floor(Math.random() * randomImages.length);
   var url = 'url(_img/bg_array/' + randomImages[rndNum] + '.jpg)'

   $('#home').css({
       'background': url + 'no-repeat center center fixed', 
       '-webkit-background-size': 'cover',
       '-moz-background-size': 'cover',
       '-o-background-size': 'cover',
       'background-size': 'cover'
   });
});

I also uploaded the file it if you want to work with it directly. Its quite useful this code.

In my html/css it works perfectly, also tried with MAMP PRO and it works fine. Once I apply all my work into processwire every background image is loaded except the #home. Therefore my javascript file onload.js is not performing ok with processwire. Do I need to add something??? please help.

Thx

Dani

onload.js.zip

[Martijn Geerts]

have no answer to your question, but why you don't just write the url in an inline-style ?

[danielholanda]

What do you mean with an inline-style??

[Martijn Geerts]

echo "<div id='home' style='background: url($image->url});' title='what ever' />";

[danielholanda]

I need javascript to make the image by random everytime somebody loads in the web. I also need the code of the background to cover and resize once the window is done bigger or smaller. Woudl that work for me? I think what you say works if you have only one image to apply. Am I correct?

$image->url} is used to connect woth processwire?

[Martijn Geerts]

$image = $page->images->getRandom();

echo $image->url

----------------------------------------------------

<style>

#home {

-webkit-background-size: cover;

-moz-background-size: cover;

-o-background-size: cover;

background-size: cover

}

</style>

[danielholanda]

OK, I'm not so sure of how to apply this to my html, should it be like this? I'm a beginner

INSTEAD OF THIS:
<div id="home" class="item">

SHOULD BE LIKE THIS?:
<?php  echo $image = $page->images->getRandom(); "<div id='home' style='background: url($image->url});' title='what ever' />" ?> 

THE STYLE WILL BE APPLIED VIA CSS:

#home {

 -webkit-background-size: cover;
 -moz-background-size: cover;
-o-background-size: cover;
background-size: cover
}

<a name="home"></a>
<div class="content" id="content_home">
<nav id="nav_home">
<ul>
<li><a href="#home" class="panel">HOME</a></li>
<li><a href="#about_me" class="panel">ABOUT ME</a></li>
<li><a href="#booking" class="panel">BOOKING</a></li>
<li><a href="#photo_video" class="panel">PHOTO\VIDEO</a></li>
<li><a href="#music" class="panel">MUSIC</a></li>
<li><a href="#contact" class="panel">CONTACT</a></li>
</ul>
</nav>
<div id="home_intro">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a orci aliquet ipsum luctus suscipit vel vel odio. Nullam molestie porttitor elit, nec ullamcorper ante cursus non.</p>
<a href="">Read more >></a>
<a href=""><img src="" alt="" /></a>
</div> 
<div id="news">
<a href="">NEWS</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div> 
<aside id="social_home">
<a href=""><img src="<?php echo $config->urls->templates?>_img/social_butt/twitter.jpg" alt="" /></a><a href="" class="right"><img src="<?php echo $config->urls->templates?>_img/social_butt/facebook.jpg" alt="" /></a><a href="" class="right"><img src="<?php echo $config->urls->templates?>_img/social_butt/email.jpg" alt="" /></a>
</aside>
<address>
<p><a href="">Buro</a></p>
<p><a href="">Dani</a></p>
</address>    

</div>
</div>

[Martijn Geerts]

The random image example is in the basic install, from there you can figure it out I think.

[danielholanda]

Hello, I've really tried to understand it but I'm still a beginner... It seems very easy what you want me to do but its not working. I have already created a field of image in the field called random_images. Here I have 3 images which I would like them to randomize. You want me to apply the background+random with the code that is in the default template of processwire and after apply the cover via CSS. What am I doing wrong?

This is the exact code I was trying by observing head.inc from the original template:

<?php 

if(count($random_images->images)) {
$image = $random_images->images->getRandom();
echo "style='background: url({$image->url});'";
}
?>

This is my last code I tried:

<div id="home" class="item" <?php 

if(count($random_images->images)) {
$image = $random_images->images->getRandom();
echo "style='background: url({$image->url});'";
}
?>>
<a name="home"></a>
<div class="content" id="content_home">


<nav id="nav_home">
<ul>
<li><a href="#home" class="panel">HOME</a></li>
<li><a href="#about_me" class="panel">ABOUT ME</a></li>
<li><a href="#booking" class="panel">BOOKING</a></li>
<li><a href="#photo_video" class="panel">PHOTO\VIDEO</a></li>
<li><a href="#music" class="panel">MUSIC</a></li>
<li><a href="#contact" class="panel">CONTACT</a></li>
</ul>
</nav>
<div id="home_intro">
<p><?php echo $page->introduction_text; ?></p>
<a href="#about_me">Read more >></a>
</div> 
<div id="news">
<a href="">NEWS</a>
<p><?php echo $page->news_text; ?></p>
</div> 
<aside id="social_home">
<a href=""><img src="<?php echo $config->urls->templates?>_img/social_butt/twitter.jpg" alt="" /></a><a href="" class="right"><img src="<?php echo $config->urls->templates?>_img/social_butt/facebook.jpg" alt="" /></a><a href="" class="right"><img src="<?php echo $config->urls->templates?>_img/social_butt/email.jpg" alt="" /></a>
</aside>
<address>
<p><a href="">Buro</a></p>
<p><a href="">Dani</a></p>
</address>    

</div>
</div>

[ryan]

I'm not sure I understand that last bit of code: $random_images->images->getRandom() ? I guess it's that first variable $random_images that I'm not sure I understand what it is or where it came from. But if I understand the parts before correctly, then it seems like this is what you want:

$image = $page->images->getRandom(); 
if($image) {
 echo "<div id='home' style='background: url($image->url}); width: {$image->width}px; height: {$image->height}px;'></div>";
}

[danielholanda]

Thanks for the clarification. With this info I can follow on. random_images was the field name I had placed. My file works but this is another way which it also works. Quite interesting this processwire...

Ryan, I'm a beginner in all fields so I have one question. What kind of language is all what you have written in this code? i understand this is how processwire works but... is it php, javascript... I dont know how to call this. How can you get more documentation of this language?! This way I can get a bit better.

[diogo]

is it php, javascript... I dont know how to call this

You can call it object oriented PHP If you really want to know how it works have a look at this http://www.killerphp...t-oriented-php/, the special thing about ProcessWire, is the clever way how Ryan wrote it, inspired by the simplicity and power of jQuery. That's why you can do great things as $page->images->getRandom(); or {$image->height}

How can you get more documentation of this language?!

You can get it here http://processwire.com/api/

I would suggest that you do like I did. Print it, and read everything while having a coffee or a beer, looking at the see

[Martijn Geerts]

Can imagine that it's looks like a soup. Take a view evenings, and learn some basic PHP I recommend. After that spend some nights on the variable pages. Ryan has done a great job describing the variables. Give your self some time, don't want to much at once. You'll learn step by step.

Now Soma, ryan, apeisa and all the other module writers are learning me OOP due to the fact that they comment their scripts most of the time very well. So i recommend when you start writing scripts, comment all what you're writing, what a variable is, what it does or just what you don't understand.