Creating your custom theme - Coppermine Photo Gallery - Documentatie & Handleiding

# Coppermine Photo Gallery v1.5.4: Documentatie en Handleiding

# Ontwerpen van een eigen thema

## Hernoem eerst uw thema

Om een nieuw thema te ontwerpen, is de beste oplossing om een bestaand te kopiëren en te gebruiken als template (=sjabloon) voor uw nieuw thema. Maak hiervoor een kopie van de ganse themamap die u wilt gebruiken als basis en geef deze map ook meteen de naam van uw nieuw thema. Editeer dan de "template.html", "style.css" en "theme.php" bestanden en vervang alle verwijzingen van "themes/oude_thema_map" met "themes/nieuwe_thema_map" om ervoor te zorgen dat de linken naar de juiste plaats wijzen.
Vermijd het gebruik van spaties en speciale karakters in uw nieuwe themanaam - gebruik alleen alfanumerieke tekens en de underscore (_).

Houd ook altijd in gedachte dat ondanks het bestand in de map "themes/uw_thema_dir" zit, het gecodeerd moet worden alsof het in de hoofdmap van de Coppermine installatie zou zitten. Bij voorbeeld, om een afbeelding te tonen, moet u `<img src="themes/thema_map/images/image.gif" alt=""/>` gebruiken en niet alleen `<img src="images/image.gif" alt=""/>.` Het zelfde principe geldt voor het "theme.php" bestand.

- Maak een kopie
  Blader door de lokale kopie van coppermine galerij op uw client, navigeer naar de themamap (`uw_coppermine_map/themes/`), klik rechts op de mapnaam die het thema bevat dat u als basis wilt gebruiken en (in dit voorbeeld, willen we het curve thema gebruiken, dus gebruiken we `uw_coppermine_map/themes/curve/`), selecteer "kopiëren" uit het contextmenu. Plak het daarna in de themamap (genoemd "Kopie van Curvethema" of gelijkaardig).
- Hernoem de folder
  Klik rechts op de nieuw aangemaakte map (`uw_coppermine_map/themes/kopie van curve/`) en selecteer " naam wijzigen" uit het contextmenu. Kies een unieke themanaam - in dit voorbeeld, gebruiken we "mijn_thema" (dat wordt dan de map met de naam `uw_coppermine_map/themes/mijn_thema/`).
  Denk eraan dat we het thema later uploaden naar uw webserver - gebruik dus zeker de juiste vorm: in Windows-gestuurde clients, maakt het hoofdlettergebruik niets uit, er is dus geen verschil tussen "`mijn_thema`" en "`Mijn_thema`". De meeste webservers worden echter met Linux gestuurd, waar het hoofdlettergebruik wel verschil uitmaakt (daar is wel een verschil tussen "`mijn_thema`" en "`Mijn_thema`"). Om op veilig te spelen is het aan te raden om altijd kleine letters te gebruiken.
- Editeer de bestanden om de themanaam weer te geven
  Gebruik een platteteksteditor (in dit voorbeeld, gebruiken we notepad.exe), open `uw_coppermine_map/themes/mijn_thema/template.html`. Zoek "`themes/curve`" en vervang het met "`themes/mijn_thema`" (kan verschillende keren in het bestand voorkomen, let er dus op dat u op alle plaatsen de benaming "`themes/curve`" vervangt door "`themes/mijn_thema`"). Save uw wijzigingen. Doe dan hetzelfde voor de bestanden `theme.php` en `style.css`.

Het is sterk aan te bevelen om uw aangepast thema een eigen naam te geven, zelfs als u slechts kleine veranderingen wilt aanbrengen in een standaardthema van Coppermine. De reden is heel eenvoudig: als u later een upgrade uitvoert, zult u niet in de problemen komen (bv. per ongeluk uw aangepast thema opnieuw overschrijven met een standaard thema uit de upgrade).

## Tipps & tricks

Als u niet zeker bent hoe te beginnen met het creëren van uw eigen thema, kunt u ook een kijkje nemen in de downloadsectie van de Coppermine homepage: daar zijn verschillende door gebruikers ontworpen thema's beschikbaar voor download, ze kunnen ook vooraf bekeken worden op de coppermine demo pagina.

Terwijl u bezig bent met de opmaak of het testen van uw nieuw thema, is het niet aangewezen dat uw bezoekers uw probeersels kunnen zien maar dat u (als de coppermine admin) wel kunt zien hoe het resultaat er zal uitzien. Dat kan door eenvoudigweg `theme=uw_thema_naam` toe te voegen aan de url in uw browser.

- `http://uw_site.tld/coppermine/index.php?theme=uw_thema_naam` toont de Coppermine indexpagina, gebruikmakend van uw thema
- `http://uw_site.tld/coppermine/thumbnails.php?album=1&theme=uw_thema_naam` zal de thumbnailpagina tonen van album 1, gebruikmakend van uw thema
- `http://uw_site.tld/coppermine/?theme=xxx` zal uw beeld terugzetten op het standaardthema in de coppermine configuratie

## Gebruik van WYSIWYG-editors

Het is ten zeerste aan te bevelen om geen gebruik te maken van een WYSIWYG-editor om Coppermine bestanden te editeren. Het coppermine dev team weet dat het gemakkelijker lijkt voor beginners om grafische editors te gebruiken. Deze programma's hebben echter veel nadelen:

- Sommige editors (vooral MS Frontpage) zijn bekend om de code te "verfraaien" op een manier die ingesloten PHP-code ongeldig maakt. Het gevolg daarvan is dat, als u met een WYSIWYG-editor bv. theme.php zou editeren, het bestand corrupt (= onbruikbaar) wordt
- Grafische editors hebben de neiging om af te raden of zelfs ongeldige HTML-code te produceren. U heeft meer controle over de code als u in plaats daarvan een plattetekst-editor gebruikt.
- U leert niets. Vroeg of laat wilt u iets doen waartoe uw WYSIWYG-editor niet in staat is. Wat nu? U heeft altijd het werk overgelaten aan de editor - u verstaat geen HTML-code. Wanneer u een plattetekst-editor gebruikt, kan de leercurve misschien wat trager zijn maar ze is veel effectiever en interessanter.

Als u niet zeker bent welke editor dan wel te gebruiken is, kijk dan eens in de lijst van editors op pagina gereedschappen aanbevolen door de ontwikkelaars.

## Het editeren van template.html

Het bestand template.html is het hoofdbestand van ieder thema: het kan alleen HTML/CSS/JavaScript code (geen PHP!) en enkele plaatshoudercodes bevatten die later vervangen worden met de gewenste inhoud als het thema geparset wordt (geparset = wanneer de HTML-code van een galerijpagina gegenereerd wordt uit een PHP-pagina). Template.html bepaalt de algemene layout van uw galerijpagina's. Gebruik het om het uitzicht van uw galerij aan te passen aan de rest van uw website.

### Favicon

Coppermine levert een favoriet icoon favicon.ico mee dat zich in de galerijhoofdmap bevindt. Er wordt naar verwezen in alle thema's die meegeleverd zijn met Coppermine. U mag gerust een eigen favoriet-icoon aanmaken voor uw eigen galerij en er naar verwijzen in uw aangepast thema. Om dit uit te voeren, editeer themes/uw_eigen_thema/template.html, zoek naar `<link rel="shortcut icon" href="favicon.ico" />` en vervang het door de naam van uw eigen icoon.

Als alternatief kunt u ook gewoon het originele favicon.ico vervangen door uw eigen ontwerp, dan moet u wel dezelfde naam "favicon.ico" blijven gebruiken.

## Kleuren aanpassen & ontwerp

Om de door het script gebruikte kleuren, fonts, fontafmetingen, enz... aan te passen, moet u de "style.css" stylesheet editeren. Bijvoorbeeld: als u de grootte van de lettertypes wilt vergroten of verkleinen, volstaat het om de lijn met: `table { font-size: 12px; }` aan te passen. De grootte van de meeste lettertypes die in het script gebruikt worden, worden als een percentage aangegeven van deze maat.

## Geavanceerde stappen

Er zijn enkele geavanceerde stappen die u zou moeten volgen - zij worden beschreven in de secties

- Ontwerp een Coppermine thema dat past bij de algemene layout van uw website
- Editeren van theme.php