skriv ut »

Webdesignskolan Bildgalleri skapar automatisk miniatyrer av alla bilder och länkar miniatyren till originalbilden. Du kan skapa flera bildgallerier, ladda upp bilder, ändra bildstorlek, radera bilder, namnändra bilder genom att logga in till administrationen direkt i webbläsaren. Bildgalleriet fungerar med alla bilder i formaten JPEG, GIF och PNG. Du behöver inga kunskaper i PHP för att använda bildgalleriet men din webbserver måste ha PHP 4.3.0 eller senare version samt GD library 2.0 eller senare - läs mer om förutsättningarna nedan »

Klicka här » eller på någon av bilderna nedan för att se exemplen!

Funktioner i bildgalleriet

Här är en översikt över funktionerna i Webdesignskolan Bildgalleri:

• Administration direkt i webbläsaren
  Logga in och administrera dina bildgallerier direkt i webbläsaren. Du kan skapa bildgallerier, ladda upp bilder, storleksändra bilder, radera bilder och ändra alla inställningar för dina bildgallerier utan att använda andra programvaror.
• Ladda upp bilder, ändra bildstorlek
  Du kan använda den inbyggda funktionen för att ladda upp bilder eller göra detta via FTP. Du kan minska bildernas storlek, radera bilder och ändra bildnamn.
• CSS-mallar för olika layout
  Webdesignskolan Bildgalleri är förinstallerat med ett antal CSS-mallar och du kan ladda upp dina egna mallar och redigera mallarna direkt i webbläsaren.
• Storlek på miniatyrerna
  Du kan ange olika storlek på miniatyrerna i dina olika bildgallerier. Om du byter storlek så kan du radera och generera nya miniatyrer direkt i webbläsaren.
• Visa bildinformation
  Bildinformation som kan visas är filnamn, bildstorlek och filstorlek. Du kan välja vilken information du vill visa eller dölja i inställningarna för bildgalleriet.
• Visa bild i nytt fönster eller i samma fönster
  Bilderna visas i ett nytt webbläsarfönster där storleken är anpassad till bildens storlek. Om bilden är större än bildskärmens upplösning så visas bläddringslisterna i webbläsaren. Du kan välja att istället visa bilderna i samma webbläsarfönster.
• Vattenstämpel för att skydda bilden
  Watermark i form av en egen text där du kan välja egna TrueType-fonter eller i form av egna bilder. Det här är ett bra sätt att ange var bilderna kommer ifrån eller att skydda bilderna. Vattenstämpeln genereras direkt online och bilden kan alltså inte sparas utan vattenstämpeln. Du kan ange placering av vattenstämpeln och välja färg, teckensnitt och storlek i inställningarna för vattenstämpeln.
• Sortera bilderna efter namn eller datum
  Sortering av bilderna kan anges i inställningarna för bildgalleriet. Dessutom kan användaren själv bestämma sorteringsordning med knappen "sortering".
• Visa miniatyrerna sidvis eller alla på samma sida
  Du kan välja att visa alla miniatyrerna direkt eller med sidvis bläddring. Dessutom kan du visa stora miniatyer i valfri storlek och antal per sida.
• Välj vilka menyer som ska visas
  Du kan visa eller dölja visningsmenyn, rubriken, bildinformationen, sidnavigeringen mm för att få en "renare" layout på bildgalleriet.
• Loggfiler
  Loggfiler sparar informationen om händelser som tex: uppladdning av bilder och CSS-filer, namnändring av bilder och bildgallerier, storleksändring av bilder mm. Du kan välja loggfil direkt i webbläsaren och kontrollera datum och tidpunkt när en åtgärd utförts.

Förutsättningar för att använda Webdesignskolan Bildgalleri

För att du ska kunna använda bildgalleriet måste din webbserver ha PHP 4.3.0 eller senare version. Vill du använda vattenstämpel i form av text eller bild måste du dessutom ha GD library 2.0 eller senare version. OBS! Om du använder stora bildfiler krävs mer minne och den övre minnesgränsen är:

Minnesgränsen 16M räcker till för bilder 1600x1200 pixlar men om du har större bilder som tex 3000x2000 så krävs minst 32M minnesgräns. Kolla med ditt webbhotell eller administratör om du har tillgång till rätt version av PHP och GD library. Du kan använda guiden Installera GD library i PHP » för att se hur kontrollerar vilken version av PHP och GD library du har med PHP-info. Där kan du även se vilken övre minnegräns (memory_limit) din webbserver har.

De är inget krav men underlättar om du har tillgång till ett FTP-program » för att överföra bilderna till bildgalleriet. Du kan använda den inbyggda funktionen för att ladda upp bilder eller göra detta via FTP. Om du använder funktionen "Ladda upp bilder" så väljer du en bild i taget och kan skicka upp 5 bilder samtidigt. Anledningen till att formuläret inte hanterar fler bilder är att PHP har begränsningar i storlek på filer som skicka via formulär till webbservern. Den maximala filstorleken för bilderna varierar beroende på din PHP-installation men brukar ofta vara 2MB. Vill du ladda upp större bilder måste du använda FTP eller be ditt webbhotell höja gränsen för "upload_max_filesize". Om du laddar upp bilderna via FTP finns egentligen inga begränsningar för bildernas storlek. Dagens digitalkameror kan hantera så många pixlar att bilderna egentligen är för stora och blir långsamma att visa i webbläsaren. Du kan minska bildernas storlek med knappen och funktionen "Ändra bildstorlek" som visas under varje miniatyrbild. En begränsning här är att PHP-installationen begränsar hur stora bilder som kan hanteras. Minnesgränsen 16M räcker till för bilder 1600x1200 pixlar men bilder i storleken tex 3000x2000x300dpi kräver minst 32M. En bättre metod är att ändra bildernas storlek innan du laddar upp dem via funktionen "Ladda upp bilder" eller FTP. Se till att bilderna har den storlek du vill använda som tex bredden 800px, 1200px eller 1600px och ladda sedan upp dem till Webdesignskolan Bildgalleri.

Villkor för användning av programmet

Vi har valt att göra kod och funktioner tydliga och lätta att överblicka för att du ska kunna ändra och lägga till egna funktioner. Du som är webbutvecklare kan alltså anpassa koden för ditt eget eller dina kunders behov men får inte distribuera eller sälja programkoden vidare. Programmet får INTE säljas eller erbjudas vidare till egna kunder och besökare.

Copyrightinformationen nedan får inte raderas från filerna:

Installation av bildgalleriet

Hämta ZIP-filen med bildgalleriet (längst ned i denna guide) och packa upp filerna:

OBS! Ändra inte namnen eller ordningen på mappar och filnamn!

Publicera filerna till din webbserver. Använd ett FTP-program » eller liknande funktion i din webbeditor eller hos ditt webhotell. I vårt exempel har vi lagt filerna i rotmappen.

Registrera en ny administratör genom att köra filen:
wds_bildgalleri/install/admin_register.php

Radera installationsmappen direkt så att inga obehöriga kan använda filen:

Du kan ändra användarnamn och lösenord under menyn "inställningar" när du är inloggad.
OBS! Lösenordet är krypterat och kan inte återges! Om du glömmer bort lösenordet så måste du publicera mappen "install" och köra filen "wds_bildgalleri/install/admin_register.php" på nytt.

Logga in och börja använda Webdesignskolan Bildgalleri:

Skapa ditt första bildgalleri:

...och ladda upp några bilder:

Om inte miniatyrerna genereras direkt kan du uppdatera webbläsaren med F5:

...så skapas miniatyrerna automatiskt i mappen "miniatyrer":

Svårare än så är det inte att använda Webdesignskolan Bildgalleri!

Övriga funktioner och inställningar beskrivs på respektive sida i administrationen. Använd menyn "Hjälp" om du behöver mer information.

Sökväg och länk till dina bildgallerier

Sökväg till bildgalleriet

Sökvägen till ditt bildgalleri är:
bildgalleri.php?galleri=namn_pa_ditt_bildgalleri

Hela adressen till bildgalleriet i vårt exempel är då:
http://dromvavaren.se/bildgalleri.php?galleri=sommaren_2010

Sökväg till administrationen

Sökvägen till administration av ditt bildgalleri är:
wds_bildgalleri/admin/login.php

Hela adressen till bildgalleriet i vårt exempel är då:
http://dromvavaren.se/wds_bildgalleri/admin/login.php

Du kan också använda länken admin » som visas i ditt bildgalleri (längst ned på sidan).

Ladda upp bilderna via FTP

Varje bildgalleri skapas i mappen "album" och exemplet nedan visar filer och mappar i FTP-programmet CuteFTP:

I vårt exempel ska bilderna publiceras till mappen:
wds_bildgalleri/album/sommaren_2010

Inställningsfilerna för varje bildgalleri:
config_bildgalleri_settings.php
config_watertext_settings.php
finns i samma mapp och får inte raderas!

Om du raderar bilderna i administrationen för Webdesignskolan Bildgalleri så raderas även minatyrbilden men om du raderar bilden via FTP så bör du även radera miniatyrbilden i mappen "miniatyrer". Om miniatyrbilden finns kvar finns en risk att den visas om en ny bild med samma namn som en tidigare bild laddas upp. OBS! Om du får problem med visningen av miniatyrerna kan du radera hela mappen "miniatyrer" och låta bildgalleriet generera nya miniatyrer.

Minska bildernas storlek innan du laddar upp dem

Du kan använda den inbyggda funktionen för att ladda upp bilder eller göra detta via FTP. Om du använder funktionen "Ladda upp bilder" så väljer du en bild i taget och kan skicka upp 5 bilder samtidigt. Anledningen till att formuläret inte hanterar fler bilder är att PHP har begränsningar i storlek på filer som skicka via formulär till webbservern. Den maximala filstorleken för bilderna varierar beroende på din PHP-installation men brukar ofta vara 2MB. Vill du ladda upp större bilder måste du använda FTP eller be ditt webbhotell höja gränsen för "upload_max_filesize". Om du laddar upp bilderna via FTP finns egentligen inga begränsningar för bildernas storlek. Dagens digitalkameror kan hantera så många pixlar att bilderna egentligen är för stora och blir långsamma att visa i webbläsaren. Du kan minska bildernas storlek med knappen och funktionen "Ändra bildstorlek" som visas under varje miniatyrbild. En begränsning här är att PHP-installationen begränsar hur stora bilder som kan hanteras. Minnesgränsen 16M räcker till för bilder 1600x1200 pixlar men bilder i storleken tex 3000x2000x300dpi kräver minst 32M. En bättre metod är att ändra bildernas storlek innan du laddar upp dem via funktionen "Ladda upp bilder" eller FTP. Se till att bilderna har den storlek du vill använda som tex bredden 800px, 1200px eller 1600px och ladda sedan upp dem till Webdesignskolan Bildgalleri.

Du kan minska bildernas storlek i bildredigeringsprogram som tex Photoshop. Det finns även program som har som huvudfunktion att minska bildstorleken på ett stort antal bilder automatiskt. Googla efter sökbegrepp som tex "batch image resize" eller "image resizer" för att hitta programmen.

TIPS! Vi har testat och använt programmet Visualizer Photo Resize som förminskar hela mappar med bilder till JPEG i valfri kvalitet och storlek.

OBS! Om du klickar på länkar till "Home", "Contact Us" eller "License" så leder länken till ett "kapat" domännamn som var en länkportal till diverse erotiska sidor när vi kollade senast. Klicka inte på länkarna till upphovsmännens tidigare domännamn om du vill undvika detta...

Googla "Visualizer Photo Resize" eller hämta programmet här »

CSS-mallarna till layouten

Alla layouter i Webdesignskolan Bildgalleri kontrolleras av CSS-mallar och det finns som ett antal färdiga mallar att välja emellan. CSS-mallarna är logiskt uppbyggda för att du enkelt ska kunna skapa dina egna layouter, med eller utan bilder.

CSS-mallarna finns i mappen "css":

De CSS-mallar som använder bilder hämtar dem i undermapparna till "bilder":

TIPS! De bilder som utgör knapparna i visningsmenyn finns i mappen "bilder". Om du vill byta ut bilderna till dina egna så kan du använda samma filnamn som ovan.

Du måste då även ändra bildstorleken i filen "config.php" och ange storleken på dina egna bilder:

Ändra justeringen av bildgalleriet

Bildgalleriet är centrerat horisontellt och du kan ändra detta genom att välja menyn "CSS och layout" och leta efter CSS-mallens avsnitt:
.tabell_A

Här används automatisk höger- och vänstermarginal för att centrera bildgalleriet:

Här är positioneringen ändrad och bildgalleriet visas nu 100 pixlar från sidans vänstra kant:

Spara ändringarna i CSS-mallen och visa bilderna. Uppdatera webbläsaren med F5 vid behov.

CSS-mallarnas struktur

Webdesignskolan Bildgalleri använder tabeller och tabellceller för att positionera miniatyrerna och alla CSS-mallar kontrollerar förekomster av <table> och <td> i PHP-koden. Exempel 1 nedan visar hur minatyrerna är placerade i 4 st nästlade tabeller. Alla tabeller och tabellceller har tilldelats olika identifikation i PHP-koden som tex <table class="tabell_A"> och <td class="tabell_B_cell"> och alla element kan då formateras av CSS-mallen.

Exempel 1:

Exempel 2 är i grunden samma som ovan men nu är bakgrundsfärgen ersatt med kantlinjer. Här kan du tydligt se tabellcellerna runt miniatyren (i tabell_D) som kan användas till 8 st bilder som tillsammans blir en ram (se ramen i nästa avsnitt nedan).

Exempel 2:

CSS-mallarna innehåller ett antal class-namn som är kopplade till de olika element som skapas av "bildgalleri.php". Flera av class-namnen är oformaterade och används inte i alla layouter men de finns ändå där för att du själv ska ha större frihet att anpassa mallarna. Alla class-namnen anges i den ordning de förekommer i layouten och är dessutom kommenterade för att du enkelt ska kunna bygga CSS-mallen efter dina egna behov.

De flesta CSS-mallar kan användas till alla storlekar på miniatyer då ramen är uppdelad i 8 st bilder som är placerade i tabellceller runt miniatyrbilden. Hörnbilderna upprepas inte men bilden som ligger i cellen över, under, vänster och höger upprepas för att ge en sammanhängande bild som "stretchas ut" om miniatyrern är större än tex 100 pixlar. I exemplet nedan är bilderna placerade i en tabell (utan att bilderna upprepas) för att visa hur CSS-mallen använder bilderna:

Här är bilderna som används till guldramen ovan:

...och så här ser det ut när bilderna upprepas:

Vissa av mallarna passar bäst till den miniatyrstorleken 100px eller 150px eftersom bakgrundsbilden inte är uppdelad och då måste stämma med storleken på miniatyerna. CSS-mallar som använder fasta storlekar på miniatyerna är tex: "diabild", "filmremsa" och "tavelram".

Felsökning om det inte fungerar!

Om du får problem med användning av Webdesignskolan Bildgalleri som tex visning av sidor eller felmeddelanden kan du läsa mer i guiden Felsökning i PHP och MySQL »

ZIP-filen med filerna till programmet

Logga in genom att klicka på ikonen högst upp » i denna guide för att läsa hela guiden och hämta ZIP-filen.

... (guiden omfattar 20 sidor)

WDS medlem och WDS CD kan du beställa här »

Är du redan WDS kund? Klicka på ikonen högst upp för att läsa hela guiden!