Content Management System TYPO3 -specielt tilpasset til Rotary DK Grundlæggende vejledning og opgavesamling til brug ved CICO INFO & WORKSHOP/Varde 14. jan. 2012
Backend visning Vi er nu inde i backend visning, som i sidevisning (Page view) består af 4 områder. 1. kaldes for moduler. Her findes alle de forskellige visningsmoduler, som vi kan arbejde med. Hvis du klikker på et andet modul, ændres visningen i sidetræet og detaljevisning. 2. kaldes for sidetræet og her afspejles din navigationsstruktur, men der findes også andre sider, som ikke er vist i navigationen. Det kan være skjulte sider, sider der indeholder data som f.eks. nyhedsbrevsmodtagere, systemfoldere etc. 3. er detaljevisning, hvor den enkelte sides struktur vises og her kan redigeres i de enkelte elementer 4. er en værktøjsbjælke med login oplysninger, logout, genvejsmenuer samt søgefunktion. Følgende moduler er synlige for redaktører (der findes andre moduler, som kun er for administratorer) Page Dette modul anvendes, når vi vil oprette nye sider i sidetræet og/eller oprette nyt sideindhold Elementer) eller editere i allerede oprettede sider/elementer. Liste News admin Filelist Task center Indstillinger Direct Mail Listemodulet viser en oversigt over alt, hvad der er tilknyttet en enkelt side eller mappe, hvadenten det er indhold, opsætning, type etc. I listevisningen har vi også klippebordet, som omtales senere. er et oversigtsmodul for alle nyhedselementer. Mer om det senere. Kan sammenlignes med Stifinder i Windows. Det er fra dette modul, vi kan up-loade, flytte, kopiere og slette filer (dokumenter, fotos, pdf-filer etc.) indeholder en række macroer, der kan lette hverdagen for mange redaktører. Her er genveje til at oprette og editere nyheder, projekter, arrangementer og blogindlæg. Her kan man ændre sine egne personlige indstillinger, password, sprog etc. anvendes til udsendelse af nyhedsbreve omtales i afsnittet om nyhedsbreve. Recipients list er til styring af nyhedsbrevsmodtagere. Statistics er til statistik over læste nyhedsbreve Hjælp De tre sidste moduler er hjælpe- og infomoduler Birte Linnebjerg Page 4
Værktøjsbjælken Redigeringsknapper Redigeringsknapperne altid placeret øverst i redigeringsvinduet. Her er en forklaring til hver enkelt knap. - Lukker det aktuelle redigeringsvindue uden at gemme. - Gemmer siden men forbliver i redigering. - Gemmer og viser siden i et nyt vindue, så du kan se resultatet. - Gemmer og lukker formularen. - Gemmer og lukker det aktuelle element og opretter et nyt af samme type. - Sletter det pågældende element og vender tilbage til oversigten. - Fortryder handlinger. - Opretter en genvej til siden/elementet, der så vil optræde i Genvejsmenuen i øverste højre hjørne. Hold musen over et ikon/knap for at få en beskrivelse af, hvad knappen udfører. Birte Linnebjerg Page 5
Klik principper I Typo3 er der forskel på, hvor man skal klikke for at udføre en bestemt opgave. I princippet er der to metoder. 1. Klik på ikonet ud for et element og der vises en kontekstmenu 2. Klik på selve titlen/teksten til Højre for ikonet og siden/elementet åbnes i detaljevisningsområdet Ved klik på ikonet åbnes kontekstmenuen vist her til højre. Her har man mulighed for at foretage en række forskellige ting. De mest brugte er: Vis, der åbner siden i en ny browser Ny giver mulighed for at oprette ny side Kopier laver en kopi af siden/elementet, som så kan indsættes et helt andet sted. Under flere valg findes Flyt siden, hvis man vil have den et andet sted hen Skjul skjuler siden Rediger sideegenskaber er nok den vigtigste. Det er her man kan vælge Type (standard, genvej, link til extern URL). Man kan skjule siden i menuen eller helt skjule siden. Her editeres også titlen (menuteksten). Man kan indsætte metadata, vise indholdet fra en helt anden side, man kan sætte en start og stop dato på og endelig kan man vælge en alternativ template. Hvis man klikker på ikonet i et element, vises ligeledes en kontekstmenu men med et lidt andet indhold. Prøv selv at gennemgå de forskellige menuer og se, hvad der dukker op. Birte Linnebjerg Page 6
Ved klik på titlen/teksten i sidetræet åbner siden med alle sine indholdselementer hvis der er flere. Hvis man vil redigere et enkelt element, er der tre måder at gøre det på fra denne side. I det hele taget har Typo3 rigtig mange måder at gøre den samme ting på. Her kan man klikke på elementets ikon i højre hjørne og ud fra kontekstmenuen vælge Rediger. Eller man kan klikke på blyanten. Eller man kan slet og ret klikke i selve brødteksten, hvoraf der vises lidt. Så alt efter smag og behag kan man finde sin helt egen metode. TIPS. Har man en lille skærm og ikke rigtig kan overskue hele detaljevisningen, kan sidetræet klappes sammen. Klik på den lill pil mellem sidetræet og detaljevisningen. Hjælp Overalt i Typo3 er der hjælp at hente. Hvis der er vist et? ved siden af eller over et ikon kan man klikke på det og få mere info om punktet. Hvis der tilligemed er en pil i højre nederste hjørne betyder det, at der findes yderligere forklaring. Klik blot på pilen. Hvis man kører musen ind over et ikon, vises der ofte en mouse-over tekst, som kort forklarer hvad ikonet bruges til. Og endelig er der manualerne i moduldelen. Samt flere tusind tutorials på nettet. Birte Linnebjerg Page 7
Filer og mapper Filer er fotos, grafik, tekst-dokumenter, pdf-filer, powerpoint præsentationer, excel-ark m.m. og disse filer skal være up-loadet til serveren, inden de kan bruges på forskellige sider eller linkes til. Til at håndtere filer anvender vi modulet Filliste. Når du klikker på Filliste, vil du i sidetræ-området se en listning af alle de mapper, du har adgang til. De kan være oprettet i flere niveauer med undermapper etc. Klikker du på en mappe, vil du få vist indholdet i detaljevisningsområdet. Faktisk minder Filliste utrolig meget om Stifinder, som vi kender den fra Windows. Hvis du skal uploade filer til serveren, vælger du først hvilken mappe du vil uploade til ved at klikke på ikonet på mappen og dernæst vælge Upload filer. Så får du en lille boks, hvor du klikker på Select files og derefter får du mulighed for at browse efter filerne på din egen computer. Hvis du vil oprette en ny mappe, klikker du først på ikonet for den overordnede mappe og vælger derefter Ny fra Kontekstmenuen og følger instrukserne. Med Filelist kan du kopiere filer, slette filer, flytte filer, omdøbe filer på samme måde, som du ville gøre det med Stifinder i Windows. Birte Linnebjerg Page 10
Opret ny side Vælg modulet Page (Side) I sidetræet klikkes på ikonet ud for den side, hvor man vil indsætte en ny side efter eller inden i. Her har jeg klikket på ikonet ud for Legetøj til Afrika og kontekstmenuen åbnes. Vælg Ny. I detaljevisningsområdet åbner nu en hjælpefunktion til at bestemme, hvor siden skal placeres. Topteksten siger allerede, at det er efter Legetøj til Afrika at siden skal indsættes, men jeg kan nu vælge om siden skal ind på niveauet efter (inden i) eller på samme niveau eller en tredje mulighed er, at udpege stedet, hvor siden skal indsættes. Klik på stedet hvor siden skal indsættes Bemærk?-tegnet herover og udnyt det. Et klik på pilen nederst i tekstboksen viser endnu mere tekst. Når man har valgt stedet, hvor siden skal indsættes, dukker en ny side op, hvor der skal indtastes yderligere oplysninger om siden så som titel, sidens type osv. Hvis man har valgt Page (select Position) skal man tage stilling til hvilken template, der skal anvendes. Ved Side (efter) og Side (inden i) arves automatisk den template, som siden i niveauet oven over har, men den kan naturligvis ændres i fanebladet Extended. Birte Linnebjerg Page 11
Templates Templates til brug på distrikts- og landsniveau Forside template Anvendes kun på landsplan Distrikt forside Anvendes på distriktsforsider Sektions-forside Anvendes på distriktssider med flere flexelementer Underside Anvendes til arkiv for Nyheder, Projekter etc. Underside skabelon med venstre kolonne 3-kolonners tempalte til brug på distriktsniveau Underside-distrikt 3-kolonners template med menu i venstre kolonne Underside uden højre kolonne med venstre menu 2-kolonners template med menu i venstre kolonne Underside uden højre kolonne 2-kolonners template uden menu Birte Linnebjerg Page 12
Templates til brug på klubniveau og til nyhedsbreve Hele bredde sideskabelon Klubbernes forside anvend ikke denne template Klub underside 3-kolonners tamplate med menu i venstre kolonne. Anvendes til klubbers undersider Klubside Må ikke anvendes indeholder automatik til at vise mødekalender etc. på klubforsider Klub underside uden højre kolonne 2-kolonners template med menu i venstre kolonne Nyhedsbrev 800px bredde Underside distrikt uden højre kolonne Er overflødig Nyhedsbrev Template til et 600 px bredt nyhedsbrev Når der er valgt template, skal der evt. indsættes flex-elementer for at style siden yderligere se afsnittet om Opbygning af siden Aktiviteter i distriktet. Birte Linnebjerg Page 13
Ret i eksisterende side Når man vil rette i en side er der to områder, der kan ændres. Det første område er ændringer i sidens egenskaber, dvs. ændre titel, vælge anden template, skjule siden, sætte startog stoptidspunkter, oprette genveje osv. Klik i sidetræet på ikonet for siden der skal ændres og vælg Rediger sideegenskaber. Herved åbnes den her viste side i detaljevisningsområdet. Klik igennem de forskellige faneblade for at se, hvad de indeholder. Det andet område for at ændre i en side er ændring af selve indholdet i siden. Klik i sidetræet på teksten ud for ikonet på den side, der skal rettes og nu åbner sidens indhold sig i detaljevisningsområdet. Klik på blyanten eller klik simpelthen på brødteksten og ret i indholdet. Birte Linnebjerg Page 14
Flyt, kopier, skjul, synliggør en side Man kan gøre rigtig mange ting med en side og stort set alt foregår fra kontekstmenuen. I sidetræet klikkes på ikonet ud for den side, man vil gøre et eller andet med. Vis, Rediger og Ny er tidligere gennemgået. Kopier opretter en kopi af siden og dernæst skal du navigere ned til den side, hvor du vil indsætte kopien. Klik på ikonet på den side, hvorefter kopien skal indsættes. Du får nu to yderligere menupunkter i kontekstmenuen. Indsæt i vil sige et niveau ned og Indsæt efter vil sige på samme niveau. Af andre muligheder i kontekstmenuen er Skjul, som blot skjuler siden totalt. Synlighedsvalg giver mulighed for at indtaste en start- og stopdato for visning af siden. Under punktet Flere valg findes Flyt siden og den kan være nyttig, hvis man synes at siden bør stå et andet sted i menustrukturen. Fungerer egentlig på samme måde som menupunktet Klip. Siden klippes væk og man navigerer til et nyt sted i sidetræet og sætter siden ind præcis som beskrevet herover vedr. kopering af en side. Rediger side egenskaber er omtalt under Opret ny side. De øvrige muligheder i kontekstmenuen er sjældent brugte funktioner. Birte Linnebjerg Page 15
Flex-elementer (indholdselementer) Til Rotarys CMS er der en lang række standardelementer, der kan sættes ind på siderne, men desuden har vi fået udviklet specielle flex elementer. De specielle elementer vises grafisk med forklarende tekst, når du skal vælge, hvilket element du vil indsætte. Flex-elementer er containere med tekst, billeder eller andet indhold. Når du indsætter elementer på siderne, kan du vælge mellem flere forskellige element-typer, du vil indsætte. Det kan både være tekst, tekst med billede, kun billeder, bullet lists, tabeller, formularer, plugins (vær lidt varsom med dem), og fleksible indholdselementer. Fælles for alle elementer er, at du arbejder i en formular, inddelt i faneblade. Du får vist præcist de felter og faneblade, der passer til den type af element du har valgt. Skifter du undervejs element-type, vil fanebladene også skifte. Herover har jeg valgt at indsætte et tekst-med-billede element og får derfor vist fanebladene, der passer til dette element. Udfyld de felter der er relevante og gem elementet. Fanebladet Generelt Type - her kan du skifte til en anden element-type. Skjul/Hide - sæt kryds, hvis du vil skjule elementet på siden. Overskrift - giv elementet en sigende overskrift. Align venstrestiller, midterstiller eller højrestiller overskriften. Overskrift-type - her kan du vælge hvilken typografi din overskrift skal have. Birte Linnebjerg Page 16
Dato - hvis sidens layout understøtter det, kan du angive en dato, der vises sammen oven over overskriften. To top indsætter en klikbar tekst Til toppen i bunden af flexelementet. Meget nyttig hvis man har mange flexelementer efter hinanden. Fanebladet text Det vigtigste værktøj i TYPO3 er editoren, hvor du arbejder det meste af tiden med at redigere dit indhold. Editoren vil ikke blive gennemgået her, idet den faktisk virker på samme måde som andre teksteditorer f.eks. Word. Bemærk ikonet til højre. Hvis du klikker på det, maksimeres editoren og du får bedre overblik over dit indhold. Fanebladet Media Fanebladet Media håndterer billeder i TYPO3. Når du indsætter et billedelement og udvælger de billeder der skal knyttes til elementet, kan du efterfølgende manipulere med billedets størrelse eller farver og rotation. TYPO3 tager altid en kopi af det originale billede og udfører de ændringer du vælger på kopien, som så bliver vist på hjemmesiden. Derfor kan du roligt eksperimentere. Birte Linnebjerg Page 17
Opgaver i Typo3 for workshop i 1450 Opgave 1: Log ind og skift password Skriv internetadresse: www.rotarynyt.dk/typo3 i din browsers adresselinie Indtast dit brugernavn og password og klik på Login. Du er nu helt automatisk inde i det område, hvor din klubs data findes. Allerførst vil vi ændre password til noget andet end standard, som er det samme som brugernavn. Klik på personlig opsætning. Herved fremkommer følgende skærmbillede udfyld felterne og Gem opsætning. 1
Klik også på de to andre faneblade for at se, hvad der gemmer sig der. Du kan til enhver tid gå ind og ændre på dine personlige opsætninger. 2
Opgave 2: Upload diverse filer Typo3 håndterer filer (dokumenter, billeder, grafikker etc.) nogenlunde på samme måde, som I kender det i File Manager i Windows. Klik på filliste og dernæst på + ud for jeres egen klub. Så ser I 4 standardmapper, som jeg har oprettet for jer. Vi vil nu up-loade nogle filer til de forskellige mapper, så der er noget at arbejde med i de kommende opgaver. Vi vil uploade nogle fotos i mappen Fotos. Venstreklik på selve ikonet ud for mappen Fotos og vælg Upload filer. En lille dialogboks åbner og du klikker på Select files File Manager åbnes og du navigerer hen til det sted, hvor du har fotos liggende (husk de skal være i 72 dpi). 3
Vælg de fotos du vil uploade og klik på Open Billederne er nu uploadet til serveren og vi kan bruge dem i vores website. Vil du se de uploadede fotos, så klik på teksten Fotos og sæt flueben i Vis miniaturer. På samme måde kan uploades dokumenter, pdf er etc. til de øvrige mapper. Vi slutter lige denne opgave af med at oprette en ekstra mappe. Venstreklik på ikonet på din top-mappe og vælg Ny i kontekstmenuen. 4
Du kan nu vælge antal nye mapper du vil oprette her 1. Indtast navnet på den nye mappe og klik på Opret mapper. Og så har du en ny mappe til grafik i det her tilfælde. Mapperne bliver altid sorteret i alfabetisk rækkefølge. 5
Opgave 3: Opret en ny side som denne her Opret en ny side Opret et tekstelement med foto til højre Opret et element kun med 6 fotos og en overskrift Opret 2 faktabokse Løsningen fremgår af de følgende sider. 6
Sider oprettes altid i Page-modulet (Side-modulet). Klik på Page venstreklik på ikonet ud for din top-side og vælg Ny i kontekstmenuen. Herved åbner en række valgmuligheder for placering af siden. Vi vælger Side inden i hvilket betyder, at siden bliver placeret et niveau under top-siden. I Detailvisning fremkommer nu en række valgmuligheder for, hvordan siden skal se ud og hvad den skal indeholde. En gul trekant betyder, at feltet SKAL udfyldes. Sidetitel skal udfyldes det er samtidig det navn, som menupunktet får i sidevisning. Husk også at fjerne flueben i Skjul side med mindre du ikke vil have vist siden på nuværende tidspunkt. Vi vælger, at typen skal være en helt almindelig Standard side. Fanebladene Metadata, Ressources, Options og Access behøver vi ikke bekymre os om lige nu, men vi skal ind på Extended. Når man opretter en ny side, arver den helt automatisk templaten fra den overliggende side i det her tilfælde mødekalendersiden for Holstebro Vestre, som er en fast side, der ikke kan redigeres i. Vi bliver derfor nødt til at vælge en anden template og det sker i fanebladet Extended. (I vejledninger findes en oversigt over alle tilgængelige templates for klubber). 7
Her vælger vi Klub underside uden højre kolonne i det felt, der hedder Page Template Structure. Hvis feltet lige under Use Template Design ikke automatisk bliver opdateret, så vælg blot samme template der. Vi er nu færdige med sideopsætningen og kan begynde at fylde indhold på. Det første vi vil lave, er et element med tekst og et højrestillet foto. Klik på Page > Indgangsside > Ikon for nyt indhold Herefter åbner i Detailvisning en liste over mulige indholdselementer. Vi vælger Tekst med billede til højre. 8
Og får så en række muligheder for at tilpasse elementet. I Generelt fanebaldet kan vi vælge at skjule elementet indtil vi synes, at nu skal det være offentlig tilgængeligt. Vi kan sætte en overskrift ind er ikke obligatorisk. I næste faneblad Text har vi en editor, der minder meget om andre editorer. Vi kan skrive eller kopiere tekst ind via copy/paste hvis du gør det, skal teksten kopieres fra en simpel teksteditor som f.eks. Notepad ALDRIG NOGENSINDE EN KOPI AF TEKST FRA WORD. Kopier tekst fra Word over i Notepad og derfra kopier til Typo3. I Media fanebladet (NÆSTE SIDE) kan vi indsætte et foto og bestemme f.eks. bredden på billedet og om der skal vises et større billede, hvis man klikker på billedet. Vi kan sætte en billedtekst ind og flere andre ting. Eksperimenter selv. 9
Husk Gem og luk når de nødvendige indstillinger er foretaget. Kigger vi ind på Vis side, ser den sådan ud nu i Frontend: 10
Vi skal nu indsætte et nyt element på samme side med 6 fotos i 3 kolonner. Vi begynder med at vælge Opret nyt element nedenunder det, vi allerede har oprettet. I næste visning vælger vi Kun billeder Så får vi et billede, der ser sådan ud. Indtast evt. en overskrift og gå videre til Media-fanebladet. I Media indsætter vi fotos, vælger antal kolonner, vælger billedbredde og vælger klik-forstør. Gem. 11
Sidste del af opgaven går ud på at lave to faktabokse med runde hjørner. 12
I næste billede vælger vi det indholdselement (flex-element), der hedder 2 kolonner. I det efterfølgende billede (ikke vist her) skal du blot gemme. Klik på sidetitlen (her: Indgangsside) og du ser nu det nye element med de to kolonner. Klik på ikonet for opret nyt element inde i venstre kolonne. I næste billede vælger du det element der hedder Faktaboks med runde hjørner. I næste billede vælger du blot Gem. 13
Klik igen på sidetitlen og du ser nu følgende side: Klik igen på Opret element i den inderste boks. Vælg tekstelement, skriv en overskrift og gå til fanebladet Tekst. Her skriver du noget tekst eller kopierer noget tekst ind. Gem og så ser siden sådan ud i backend. 14
I højre kolonne gentages processen eller indholdet af venstre kolonne kopieres over i højre kolonne og dernæst tilrettes teksten. Her lige hvordan man kopierer et element. Klik først på ikonet for Kopier element bemærk, at det skal være det yderste element inden i venstre kolonne. Herved kopieres også alt det, der er inden i elementet med. I højre kolonne klikkes på Sæt ind ikonet (Clipboard med grøn pil ned) og hele indholdet fra venstre kolonnen er nu kopieret ind i højre kolonne. Tilret overskrifter og tekst og Gem. 15
Opgave 4: Opret en automatisk nyhedsside Vi vil nu oprette et Nyhedsarkiv, hvor vi har en række nyheder med lidt tekst. Ved klik på Læs mere... får vi hele nyhedsartiklen vist. 16
Desuden skal vi på Indgangssiden indsætte en nyhedsboks i venstre kolonne, der automatisk altid viser seneste nyhed. 17
Begynd med at oprette en ny side, der skal have titlen Nyheder. Brug Page/Side-modulet I sidevisning venstreklikkes på ikonet ud for Indgangsside. Vælg Ny i kontekstmenuen og dernæst vælges Side (efter) i detailvisningsfeltet. Så åbner en indstillingsside i detailvisningsfeltet. Her kan du indstille, hvad din side skal hedde, hvordan den skal se m.m. I fanebladet Generelt indtaster du titlen på siden her: Nyheder. Fanebladet Extended indeholder muligheder for at vælge forskellige templates, hvilket har betydning for udseendet af siden. Hvis ikke man vælger en template, arves templaten fra den overliggende side her selve klubsiden med mødekalender og den er ikke særlig velegnet til andet end mødekalenderen. Så vælg i stedet Klub underside uden højre kolonne. Vi skal nu sætte indhold ind på siden og her vil vi vælge et plugin, som automatisk sørger for at holde styr på nyhederne. I sidevisningsområdet klikkes på titlen Nyheder Stadig i Page/Side-modulet klikker vi på ikonet for nyt indhold i Hovedkolonnen. I oversigten over Indholdselementer vælger vi Nyheder. Nu åbner et billede, hvor man kan definere en række indstillinger for plugin et. I fanebladet Generelt indtastes en overskrift her: Nyhedsarkiv. 18
I fanebladet Generellle indstillinger vælges indstillingerne som vist herunder: 19
I fanebladet Skabelon sættes max. bredde for fotos til 200 pix. og antal viste nyheder pr. side sættes til 5. Hvis der er mere end 5 indsættes automatisk en funktion til at gå vidre til næste side. Øvrige felter udfyldes ikke her. De sidste to faneblade anvendes ikke her. Klik på Gem og luk. Vi vil nu indsætte en søgeboks i venstre kolonne. Klik på titlen Nyheder i sidevisningsområdet. I næste billede vælges igen Nyheder 20
I Generelle Indstillinger udfyldes felterne som vist herunder. I fanebladet Skabelon indsættes følgende i Template file reference: fileadmin/templates/extensions/tt_news/search.html Vi mangler nu kun at indsætte nyhedsboksen på Indgangssiden, før vi kan begynde at skrive nyheder. Vi indsætter først en boks til at være ramme omkring nyhedeselementet. Vælg Boks med runde tophjørner. Dernæst indsættes inden i denne boks et plugin igen Nyheder, der konfigureres som vist på efterfølgende side. 21
Vi har nu lavet mekanikken til at styre nyhedsflowet, så nu skal vi have oprettet nogle nyheder. 22
Nyheder, der styres af et plugin, oprettes i modulet Liste Efter klik på Nyheder åbnes følgende side i detailvisning. Udfyld og formater efter behov I Special fanebladet kan indtastes en arkivdato, forfatter, e-mail og evt. søgeord. 23
I fanebladet Media indsættes fotos, billedtekst, links og evt. link til filer f.eks. en uddybende pdf om emnet. Fanebladet Categories & Relations er yderst vigtig. Hvis ikke vi sætter en kategori på, vil plugin et ikke vide, at det er en nyhed, der skal ind i det plugin, der netop er assignet til Nyheder. Øvrige faneblade behøver vi ikke bruge her. Opret nogle flere nyheder og læg mærke til, hvordan plugin et helt automatisk styrer visningerne. Nyhedsplugin anvendes også til blogs, projekter og arrangementer. Fremgangsmåden er den samme som for nyheder. Det er udelukkende kategorien, der styrer hvor artiklen skal vises. En artikel kan fint have flere kategorier. F.eks. både Projekter og Nyheder, så vises den blot på begge visningssider. Hvis man bruger kategorien Arrangementer, så værk opmærksom på, at fanebladet skal Event skal udfyldes med dato for arrangementets afvikling og det er den dat, der bestemmer i hvilken rækkefølge arrangementerne vises. De skal jo helst vises i den rækkefølge de afvikles og ikke efter hvornår, de er oprettet. 24
Opgave 5: Opret fotogallerier Fotogallerier er ret nemme at have med at gøre. Her viser jeg hvordan jeg har lavet fotogallerier på Dyrehavens side, og desuden har jeg lavet en oversigtsside over alle fotogallerierne - se www.dyrehaven.dk Her over ses oversigtssiden med klikbare fotos for hvert arkiv og herunder et enkelt fotoarkiv. 25
Inden du går i gang med at lave siderne er det en god ide allerede at have up-loadet nogle fotos i forskellige mapper. Der skal være en mappe pr. fotogalleri og der må kun være de fotos i den mappe, som skal vises i fotogalleriet. Og alle fotos i mappen vil blive vist i fotogalleriet. Her er den filstruktur jeg benytter i følgende øvelse. Fotos uploades via modulet Filliste, men det gennemgåes ikke her, men andet steds i vejledningen. 26
Vi begynder med at lave indholdssiden Klik på Page - klik på Dyrehaven (ikonet) - i kontekstmenuen vælges Ny og dernæst Side inden i. Den ny side åbner og vi taster titlen på siden ind. Det er et obligatorisk felt og det er den tekst, der vises i menuen i Frontend. Fanebladene Metadata, Resources, Options og Access skal vi ikke bruge her. Men i Extended skal vi sætte template structure og Template Design til "Klub underside uden højre kolonne". Det er vigtigt at begge felter er udfyldt, ellers vises siden ikke. 27
Vi vil gøre indholdssiden næsten færdig, inden vi sætter fotogallerierne ind. V begynder med at designe indsholdssiden med de små flex-elementer. Det vil ikke blive gennemgået i detaljer her, idet princippet er det samme som ved "Opbygning af siden aktiviteter i distriktet", som er detaljeret gennemgået tidligere. Men helt kort: 1. Opret et element med to kolonner 2. I hver af de to kolonner oprettes et flex-element med runde tophjørner 3. Inden i hver af de to flex-elementer oprettes et nyt flex-element "Kun billeder" 4. I dette flexelement skrives titlen på fotogalleriet og der indsættes et billede fra dette fotogalleri (billedbredde 250 pix). For at lave endnu en oversigt over to yderligere fotogallerier er det nemmest blot at kopiere alt det vi lige har lavet. Klik på kopi ikonet i øverste højre hjørne og indsæt under elementet ved at klikke på det nye ikon, der fremkommer. Ret overskrifter og fotos i de to kopier, så de svarer til de to sidste fotogallerier. 28
Vi mangler nu at lave links til fotogallerierne, så dem må vi hellere få oprettet. I kontekstmenuen vælges Ny og dernæst Side (inden i) I Generelt fanebladet indtastes titlen på arkivet. Andet skal der ikke gøres her så klik på Gem og luk. Klik nu på den nye side du lige har lavet (klik på teksten) og dernæst klik på Indsæt Nyt indhold. Rul helt ned i bunden af flex-elementerne og vælg Smooth Gallery. 29
I fanebladet Generelt behøver du ikke gøre noget, men i fanebladet Plugin skal du indsætte bredden på galleriet - 650 pix svarer til det, der kan vises i højre kolonnen, 800 pix er den bredde, som fotos vil blive vist i, hvis man klikker på dem for at forstørre dem (hvis fotoene vel at mærker er lagt op i en større størrelse). Klik på globen ud for "Path to directory" - derved åbner et vindue med filstrukturen og vi finder nu den mappe, hvor vores fotos ligger - klik på den ig stien indsættes. På nøjagtig samme måde opretter du nu de øvrige tre fotogallerier med fotos fra andre år eller hvad du nu vælger. Husk dog at klikke på ikonet på den side du lige har oprettet og når du vælger ny side, skal det være efter og ikke inden i. Sidestrukturen kan se sådan ud: 30
Vi mangler nu kun at linke indholdssidens billeder til fotogalleriet, så vi åbner de 4 flexelementer efter tur Her laver vi et link fra dette billede til den side, hvor selve fotogalleriet ligger Klik blot på globen med linket til højre for link-feltet og browse dig frem til den rigtige side. Eller indtast sidens id direkte i feltet. 31
Ressourcer Hjemmesider, hvor der kan læres meget mere om Typo3: http://www.linkfactory.dk/typo3cms/typo3-online/ (på dansk) http://typo3.org/documentation/videos/tutorials-v4/ (på letforståeligt engelsk) På YouTube ligger rigtig mange små videosekvenser, der viser løsninger på forskellige udfordringer. Søg via Google på ordene YouTube typo3 og der dukker adskillige videoer op nogen er endda på dansk Billedbehandling: http://www.sumopaint.com/app/ Sumopaint er et gratis internetbaseret program fuldt på højde med Adobe Photoshop Extended, som koster ca. 12.000,- kr. Andre gratis billedbehandlingsprogrammer er: http://www.photoshop.com/ http://www.splashup.com/ http://pixlr.com/editor/ (på dansk og meget let at bruge) Måling af billeder Mange er i tvivl om, hvor bredt et foto egentlig er eller skal være på en side. Det kan man meget let måle ved at hente et lille program Meazure og så bruge måleværktøjet til at måle direkte på skærmen hvor bredt et foto er eller bør være. Hent programmet på http://www.cthing.com/ Det er gratis.