Jeg har laget et php-basert fotoalbum for nettsider. Det er veldig enkelt, med ett stort bilde øverst, og de andre bilder i miniatyr under. Det er ingen neste/forrige-navigasjon, bare navigasjon via minatyrbildene. Til gjengjeld er det automatisk bruk av tittel på bildene og ingen avansert scripting.
Du trenger Adobe Bridge, kunne redigere en php-fil, ha et nettsted som bruker php og fast mappestruktur, og kunne laste opp bildene på nett med ftp. Dessuten: Bildene må være jpg og ikke png!
Albumet består av to sider:
- En hovedside hvor du f.eks. forteller om bildene du har tatt, hvor og når du tok dem osv. Under listes miniatyrer av bildene. Klikker man på et av bildene kommer man til selve albumsiden.
- En albumside der bildet man akkurat klikket på er stort øverst og de andre bildene ligger som miniatyrer under.
Forberedelse i Bridge
Samle alle bildene du vil bruke i en egen mappe. Gi alle bildene navn/tittel og beskrivelse, f.eks. i Bridge. Ønsker du å benytte andre av bildets metadata (eks. navn på fotograf) må du fylle inn disse under IPTC core. IPTC står for International Press Telecommunications Council og IPTC-metadata brukes av fotografer og pressebyråer i hele verden.
Et bildets metadata kan automatisk hentes ut på en nettside slik vi lager nå og i programmer som Adobe InDesign. Dessuten bruker tjenester som Flickr metadataene og dataene kan også gjøre det lettere for deg å søke gjennom egne bilder. Jeg anbefaler deg derfor å fylle ut alle felter som er relevante for deg når du overfører, sorterer og behandler bildene dine!
Lag små versjoner av bildene slik at alle bildene har samme høyde:
- Marker alle bildene i mappa.
- Gå til menyen Verktøy > Photoshop > Bildeprosessor
- Fyll inn skjemaet slik at bildene lagres i en egen mappe under mappen du jobber med. Bridge kaller automatisk denne mappen for JPEG. Forminsk evt. kvaliteten om du ønsker det.
Til slutt laster du opp begge mappene til ditt nettsted, både de store og små bildene.
Sett inn PHP-koden på din fotoside
På siden der du forteller om bildene du har tatt legger du inn følgende kode. Husk også å fylle inn de to første variablene:
[code language=»php» highlight=»3,4″]
<?php
//DEFINER VARIABLENE
$toppmappe = »; //fyll inn ../ for hver mappe i stien til denne fila, eks. fila har adressen http://norge.no/hobby/fotografering/index.php, da fyller du inn ../../
$mappe = »; //fyll inn stien til mappen der de små bildene ligger, eks. hobby/fotografering/bilder/JPEG/
$globmappe = $toppmappe . $mappe; //den relative stien til mappa du jobber i
$fotoalbum = "liste.php?bilde=";
$url = $globmappe . $fotoalbum;
$mappelengde = strlen($globmappe);
//HENT FRAM BILDENE FRA MAPPA
$images = glob($globmappe."*.jpg"); //finner alle jpg-bilder i mappa
foreach($images as $image){ //bruker foreach loop
$image2 = substr($image, $mappelengde); //fjern mappeadressen slik at vi får navnet på fila
//LEGG BILDENE UT PÅ NETTSIDEN MED LENKE TIL FOTOALBUM MED STOR VERSJON
echo ‘<figure><a href=" ‘.$url . $image2.’" ><img src="’.$image.’" height="60"></a>’; // endre evt 60 til et høyere tall hvis du vil ha større minatyrbilder
// HENT INFORMASJON OM BILDET
$size = getimagesize($image, $info);
// LES IPTC-INFORMASJONEN
$iptc = iptcparse($info[‘APP13’]);
if (is_array($iptc)) {
$data[‘headline’] = $iptc["2#105"][0]; // Tittel 1, før beskrivelse
$data[‘caption’] = $iptc["2#120"][0]; // Beskrivelse
$data[‘obj_name’] = $iptc["2#005"][0]; // Tittel 2, etter ISO-land, i Bridge
}
// LEGG NAVN PÅ BILDET SOM BILDETEKST
echo ‘<figcaption>’ . $data[‘headline’] . ‘</figcaption></figure>’;
} ?>
[/code]
Hvis du oppdaterer nettsiden nå vil du se alle bildene listet opp med navnet under. Bruk så CSS for å formatere det pent, f.eks.:
[code language=»css»]
figure {
font-size: small;
display: table;
float:right;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 5px;
margin-left: 15px;
border-top-width: thin;
border-right-width: thin;
border-left-width: thin;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: none;
border-left-style: solid;
border-top-color: #ccc;
border-right-color: #ccc;
border-left-color: #ccc;
figcaption {
padding: 5px;
display: table-caption;
caption-side: bottom;
margin: 0px;
font-style: italic;
font-size: x-small;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
border-top-style: none;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-right-color: #ccc;
border-bottom-color: #ccc;
border-left-color: #ccc;
}
[/code]
Fotoalbumet: liste.php
Opprett en php-fil i samme mappe som de små bildene (Bridge kaller mappa automatisk JPEG). Lagre den som liste.php
Legg alt du trenger for hodet, toppen, menyen, bunn o.l. som i resten av nettsidene dine først. Deretter legger du følgende kode i innholdsdelen:
[code language=»php»]
<?php
//STORT BILDE
$bilde = $_GET["bilde"]; //henter navnet på bildefila som ligger variablen fra url’en, dvs etter bilde?
$bilde2 = "../" . $bilde; //henter den relative adressen til det store bildet, som ligger i én mappe opp
echo "<img src=\"$bilde2\" alt=\"$bilde\" class=\"galleri\">"; //viser det store bildet på nettsiden
// HENT INFORMASJON OM BILDET
$size = getimagesize($bilde, $info);
// LES IPTC-INFORMASJONEN
$iptc = iptcparse($info[‘APP13’]);
if (is_array($iptc)) {
$data[‘headline’] = $iptc["2#105"][0]; // Tittel 1, før beskrivelse
$data[‘caption’] = $iptc["2#120"][0]; // Beskrivelse
$data[‘obj_name’] = $iptc["2#005"][0]; // Tittel 2, etter ISO-land, i Bridge
echo ‘<p class="figurtekst">’ . $data[‘headline’] . ‘: ‘ . $data[‘caption’] . ‘</p>’; //legger til bildetekst
}
//SMÅ BILDER
$url = "liste.php?bilde=";
$dirname = "small/";
$images = glob("*.jpg"); //finn alle jpg-filer i nåværende mappe
foreach($images as $image){
echo ‘<figure><a href=" ‘.$url . $image.’" ><img src="’.$image.’" height="60"></a>’; //vis bildene på nettsiden
// hent ifromasjon om bildet hvis du ønsker bildetekst
$size = getimagesize($path, $info);
$iptc = iptcparse($info[‘APP13’]);
if (is_array($iptc)) {
$data[‘headline’] = $iptc["2#105"][0]; // Tittel 1, før beskrivelse
$data[‘caption’] = $iptc["2#120"][0]; // Beskrivelse
$data[‘obj_name’] = $iptc["2#005"][0]; // Tittel 2, etter ISO-land, i Bridge
}
echo ‘</figure>’; //inkluder evt bildeteksten her om du ønsker det
}
?>
[/code]
Nå er albumet ditt ferdig.
Håper du har glede og nytte av koden jeg har vist deg her! Hvis du vil hente ut mer informasjon om bildet ditt, sjekk disse lenkene: