Fotoalbum laget med php

Et enkelt fotoalbum på en nettside.
Et enkelt fotoalbum på en nettside.

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

bridge
NB! Bridge på norsk er litt forvirrende, for det er to felt som kalles «Tittel», bruk den øverste for navnet på bildet ditt (engelsk Headline).

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!

Fyll inn som på bildet, evt. med større høyde. Pass på å fylle inn betraktelig større bredde enn høyde.
Fyll inn som på bildet, evt. med større høyde. Pass på å fylle inn betraktelig større bredde enn høyde.

Lag små versjoner av bildene slik at alle bildene har samme høyde:

  1. Marker alle bildene i mappa.
  2. Gå til menyen Verktøy > Photoshop > Bildeprosessor
  3. 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:

<?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>';
    }  ?>

Hvis du oppdaterer nettsiden nå vil du se alle bildene listet opp med navnet under. Bruk så CSS for å formatere det pent, f.eks.:

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;
}

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:

<?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
    }
?>

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:

  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  

Leave a Reply

Be the First to Comment!

Notify of
avatar
wpDiscuz