Como mostrar uma imagem diferente no Header

• Tweet
• Sharebar

• Tweet

Este tutorial é um tutorial de PHP, como tal é suportado por todos os sites cujo alojamento suporte PHP.
Neste tutorial vou dar duas opções mas recomendo seriamente que puxes asas á imaginação e aproveites ao máximo.

O primeiro passo é editares o ficheiro header.php do teu blog
Procuras a zona do cabeçalho e lá dentro vais escrever o código PHP que te vai buscar as imagens:

<?php
$numero=rand(1, 3);
if($numero=1){ ?>
<div id=”header” style=”background:transparent url(images/header1.png) no-repeat top left;”>
<?php }
elseif($numero=2){ ?>
<div id=”header” style=”background:transparent url(images/header2.png) no-repeat top left;”>
<?php }
elseif($numero=3){ ?>
<div id=”header” style=”background:transparent url(images/header3.png) no-repeat top left;”>
<?php } ?>

O que este código faz é gerir um número ao calhas com a função rand() do php, baseando-se no número irá mostrar uma imagem.

Mas vamos tornar as coisas mais interessantes, vamos criar o tutorial de forma a que mostre uma imagem de acordo com a altura do dia.
Os passos são os mesmos apenas com algumas alterações no código:

<?php
$numero=date(H);
if($numero>=9 && $numero<12){ ?>
<div id=”header” style=”background:transparent url(images/manha.png) no-repeat top left;”>
<?php }
elseif($numero>=12 && $numero<20) { ?>
<div id=”header” style=”background:transparent url(images/tarde.png) no-repeat top left;”>
<?php }
elseif($numero>=20 && $numero<9) { ?<
<div id=”header” style=”background:transparent url(images/noite.png) no-repeat top left;”>
<?php } ?>

Este código uso a função date() para determinar a hora e mostrar uma imagem entre as 9h e as 12h, outra a partir das 12h até as 20h, a partir das 20h até as 9h outra imagem. Desta forma o teu cabeçalho pode adaptar-se á altura do dia. Podes inclusive adicionar mais imagens para o amanhecer, entardecer, etc… ou mesmo usar este código para carregares CSS para adaptar o layout do teu site á altura do dia.

este tutorial foi adaptado do artigo How to display a random header image

5 Comments + Add Comment

• 
  João Silas 18 de Dezembro de 2008 às 0:31

  Excelente post, mais um para guardar

  Responder
• 
  André Medeiros 18 de Dezembro de 2008 às 12:42

  Excelente artigo. No entanto, há uma pequena falha no primeiro snippet de código. Se o correres, vais ver que ele vai mostrar sempre o primeiro header. Isto porque estás a atribuir o valor à variável dentro do IF, não a compará-lo, e isso devolve sempre TRUE, pelo que há de ser sempre o primeiro

  if($numero==1){
  elseif($numero==2){
  elseif($numero==3){

  Responder
• 
  SC 18 de Dezembro de 2008 às 16:30

  Por coincidência apliquei um código igualzinho a esse do random num site que acabei de disponibilizar em wordpress.

  Já uso num outro site um código parecido, para variar os anuncios que mostro (dica do custódio)

  Responder
• 
  André Medeiros 18 de Dezembro de 2008 às 17:54

  Também, no 2º excerto de código, nunca o $numero será >= 20 E < 9

  Responder
• 
  Elias_REC 18 de Dezembro de 2008 às 22:15

  Oi,

  Parece que o codigo que inclui antes para simplificar o exemplo que tu colocaste foi removido devido, provavelmente, ao uso de . Mesmo assim, devias simplificar esse primeiro exemplo usando arrays. Torna o codigo mais simples de ler e de alterar.

  $header_bg = array(‘images/header1.png’,'images/header2.png’,'images/header3.png’);

  Depois usando apenas um div no final, adicionas o seguinte $header_bg[rand(0,count($header_list)-1)] dentro do url(). Dessa forma so’ e’ preciso mudar os elementos $header_bg.

  Como foi dito antes o codigo da hora nao precisa do ultimo elseif. Mas para melhor ainda, podias criar uma variavel antes do primeiro if, atribuindo-lhe o valor de ‘noite.png’. Nos if()elseif() alteras apenas o valor da variavel para ‘manha.png’ e ‘tarde.png’. Como no anterior exemplo, usas um unico div para colocar o valor da imagem.

  Ref: http://www.php.net/manual/pt_BR/language.types.array.php

  (se poderes apaga o outro comentario)

  Responder