Diogo Besson :: tecnologia

Background Rotativo em PHP

Background Rotativo em PHP

Background Rotativo em PHP te mostra como gerar dinamicamente o fundo (background) da sua página, do seu website. Muito interessante pra quem não quer usar javascript pra esse fim.

A Pesquisa

Procurei sobre o que se falava de background rotativo no google muito mais pela questão do CSS do que pela atualização técnica e vi que tem gente querendo complicar uma coisa que nasceu simples.

Gente de Deus (!!!)

Pra se fazer um bg rotativo em PHP alguns passos devem ser seguidos:

  1. Coloque as imagens do BG em uma pasta – aqui nós vamos usar a pasta “imagensBG/“, mas você pode usar o que quiser na sua casa;
  2. No arquivo PHP, crie um array com os caminhos dessas imagens;
  3. Randomize esse array e pegue o valor;
  4. Coloque este valor no CSS.

Não é fácil?

Então, vamos lá

se o seu arquivo php necessitar compatibilidade com o php4, você deve semear um randomizador.

use esse código aqui:

[sourcecode language=”php”]
srand((float) microtime() * 10000000); //semeia uma aleatoriedade – compativel com PHP 4
[/sourcecode]

agora crie a lista de imagens no array ( PASSO 2 – ver lá em cima =) ):

[sourcecode language=”php”]
//define a lista de imagens
$fileList[] = 'imagensBG/imagem1.jpg';
$fileList[] = 'imagensBG/imagem2.jpg';
$fileList[] = 'imagensBG/imagem3.jpg';
$fileList[] = 'imagensBG/imagem4.jpg';
[/sourcecode]

pra não ficar MUITO zuado, crie uma verificação simples

[sourcecode language=”php”]
// verifica se a lista é maior que zero
if (count($fileList) > 0) {
$img = $fileList[array_rand($fileList)];
} else {
exit("Ocorreu um erro na geração do background");
}
[/sourcecode]

Nesse ponto você já tem o caminho do seu background em uma variável chamada $img, certo?

Agora crie o CSS

[sourcecode language=”css”]
<style type="text/css">
<!–
body {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-weight: lighter;
color: #FFFFFF;
text-decoration: none;
background-color: #000000;
background-attachment: fixed;
background-image: url(<?php echo $img ; ?>);
background-repeat: no-repeat;
background-position: 50% 50%;
}
–>
</style>
[/sourcecode]

Repare que no código acima você está chamando a variável que contém o caminho da imagem randomizada. Fácil, não?!

Já acabou.
Esperava mais???

Pois é. Tem gente que sopra muita areia onde nem praia existe.

Agora, se você quiser um negócio mais elaborado, etc e tal, eu sugiro o tutorial do Dan Benjamin sobre a randomização no PHP. Lá tem um arquivinho bacana que me deu umas coisas a pensar.

Sobre uso de GD, inclusive, que é muito mais classudo.

 

O código pra vocês testarem uma versão final do randomizador de background simples está aí abaixo:

[sourcecode language=”php”]
<?php

srand((float) microtime() * 10000000); //semeia uma aleatoriedade – compativel com PHP 4

//define a lista de imagens
$fileList[] = 'imagensBG/imagem1.jpg';
$fileList[] = 'imagensBG/imagem2.jpg';
$fileList[] = 'imagensBG/imagem3.jpg';
$fileList[] = 'imagensBG/imagem4.jpg';

// verifica se a lista é maior que zero
if (count($fileList) > 0) {
$img = $fileList[array_rand($fileList)];
} else {
exit("Ocorreu um erro na geração do background");
}

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="keywords" content="fundo rotativo, php" />
<meta name="author" content="Diogo Besson – diogobfernandes[at]gmail[dot]com" />

<title>Teste de Fundo Rotativo</title>
<style type="text/css">
<!–
<?php
// CRIA O BACKGROUND. OOOOOOH!!!!
?>
body {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-weight: lighter;
color: #FFFFFF;
text-decoration: none;
background-color: #000000;
background-attachment: fixed;
background-image: url(<?php echo $img ; ?>);
background-repeat: no-repeat;
background-position: 50% 50%;
}
#content {
height: 400px;
width: 200px;
border: 1px dotted #CCFFCC;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-weight: bolder;
color: #FFFFFF;
text-decoration: none;
background-color: #000000;
margin-left: auto;
margin-right: auto;
margin-top: 120px;
}
–>
</style>
</head>

<body>
<div id="content">
<p>
Aqui vai o conte&uacute;do do site em uma tripinha bem bacana.</p>
<p>&nbsp; </p>
<p>Aqui vai o conte&uacute;do do site em uma tripinha bem bacana.</p>
<p></p>
<p>Aqui vai o conte&uacute;do do site em uma tripinha bem bacana.</p>
<p>&nbsp;</p>
<p>Aqui vai o conte&uacute;do do site em uma tripinha bem bacana.</p>
<p></p>
</div>
</body>
</html>
[/sourcecode]

Outra coisa:

Essa lógica pode ser usada pra criar banner randômico também se você não tiver a fim de ter um servidor openX rodando na sua máquina. As possibilidades podem crescer dependendo da sua imaginação e necessidade.

Vamos ressucitar esse blog, né pessoal?
=)

abraço!

imagensBG/

5 Comments

  1. Danilo Iannone

    Lógica simples e funcional, porém não funciona se o arquivo estiver sendo chamado pelo

    Talvez seria melhor usar um jQuery e alterar com o .css() no

  2. diogobesson

    Salve Danilo!
    Seu comentário chegou picotado. Manda de novo pra gente poder compartilhar tuas idéias.
    Valeu!!!

  3. Danilo Iannone

    Eita, estranho, vou tentar novamente:

    Lógica simples e funcional, porém não funciona se o arquivo estiver sendo chamado pelo link rel do html, que por sua vez, é melhor para as normas W3C

    Talvez seria melhor usar um jQuery e alterar com o .css() no proprio body da página, e ainda poderia fazer uma brincadeira, colocar um contador e ir alterando de tempos em tempos

  4. diogobesson

    Com certeza.
    falar de cliente rico é adicionar poder, certo?
    com jquery a coisa anda. pena que sou péssimo em javascript.
    se você tiver disponibilidade, contrói um exemplo no teu blog pra gente por um link aqui. vai ser bem instrutivo (pra mim!) hehehe
    valeu Danilo!
    abraço!
    ps: tu fez falta lá no php conference, hem.

  5. Danilo Iannone

    Boa idéia! Assim que sobrar um tempo, vou fazer isso ai 🙂

    ps: tava falando disso com o Felipe, queria mto ter ido, mas não deu, no próximo estarei lá

Leave a Comment

O seu endereço de e-mail não será publicado.