Du er ikke logget ind: Log ind eller opret profil
 
Tutorials

Billeder i Drupal

Hvordan man arbejder med billeder i Drupal er en af de helt store udfordringer at beskrive. Ikke fordi Drupal er dårlig til at arbejde med billeder, men fordi der er så mange forskellige muligheder og fordi der sjældent er to personer, der har nøjagtig samme behov.
Jeg vil derfor beskrive 4 typiske scenarier, som jeg mener vil dække manges behov. Men der er ingen tvivl om, at der vil være situationer og behov, som ikke umiddelbart er dækket af denne tutorial.
============================================Af Kenneth Nielsen, Submit.dk © Er skrevet med udgangspunkt i Drupal 6. ============================================
De 4 typiske scenarier er:

Hvordan opretter man et fotogalleri / billedgalleri?
Hvis du ønsker et fotogalleri / billedgalleri på dit Drupal-site er der flere muligheder. Den mest anvendte mulighed er at installere Drupal modulet Image, som gennemgåes herunder:

  1. Download modulet Image (som bl.a. inkluderer modulet Image Gallery) fra www.drupal.org/project/image.
  2. Aktivér modulerne Image og Image Gallery fra administer > site building > modules.
  3. Opret nu nogle gallerier via content management > image galleries.
  4. Opret nye billeder ved at vælge create content > image. 
  5. Når du opretter det enkelte billede, kan du nu vælge hvilket galleri billedet skal placeres i, via dropdown boksen.
  6. Vælg nu administer > site building > menus.
  7. Klik på linket navigation og sæt nu "flueben" i enabled ud for menupunktet image galleries.
  8. Klik på linket image galleries som nu er oprettet i navigations-menuen. Du vil nu se en oversigt over dine gallerier. Du vil også se, at de beskrivelser du indtastede for de enkelte gallerier, vil blive vist sammen med en thumbnail af det senest uploadede billede i det enkelte galleri.

Du har sikkert observeret, at de enkelte billeder vises i 3 forskellige størrelser. Dels som en thumbnail (100x100 pixels), dels som et preview (maksimum 640x640 pixels) og endelig i den originale størrelse. De to førstnævnte størrelser er nogle præ-definerede værdier, som du selv  kan ændre via administer > site configuration > images.
Ønsker du ikke et decideret fotogalleri, men blot en måde at liste dine billeder på, er det stadig ovenstående modul du skal benytte til oprettelsen af billederne. Til selve visningen kan du så istedet benytte modulet Drupal Views.
NB. Husk at tildele de rigtige rettigheder til de roller, du ønsker skal kunne oprette billeder/gallerier.
Hvordan opretter man et billede på en helt almindelig side (page)?
Hvis dit behov er at indsætte et enkelt billede på en helt almindelig side (det som i Drupal terminologien hedder en page) kan du benytte modulet Image. Fremgangsmetoden er følgende:

  1. Download modulet Image (som bl.a. inkluderer modulet Image Attach) fra www.drupal.org/project/image.
  2. Aktivér modulerne Image og Image Attach fra administer > site building > modules.
  3. Opret nu en ny side ved at vælge create content > page.
  4. Indtast noget tekst i felterne title og body.
  5. Klik på attached images.
  6. Såfremt du fulgte guiden til oprettelse af et fotogalleri, har du sandsynligvis allerede nogle billeder, du kan vælge imellem, fra dropdown boksen existing image. Hvis ikke, kan du nu uploade et billede i feltet upload image.
  7. I feltet image title kan du indtaste en tekst, som vil blive vist når man fører musen over billedet.
  8. Klik på knappen save, og du har nu en side med et billede, som er indsat til højre for teksten, du tidligere indtastede. Ønsker du at ændre på placeringen af billedet, skal du igang med theming, hvilket ikke er en del af denne artikel. Læs evt. denne artikel om Drupal theming.

Bemærk at billedet (såfremt du uploadede et stort billede) er skaleret ned til såkaldt preview-størrelse (maksimum 640x640 pixels). Bemærk også at du kan klikke på billedet og dermed komme ind på billedets egen node, og at der herfra er links til billedets thumbnail (100x100 pixels) og billedet i dets originale størrelse. Værdierne (640x640 og 100x100) er nogle præ-definerede værdier, som du selv kan ændre via administer > site configuration > images.
I eksemplet herover benytter jeg content typen page som eksempel. Du kan naturligvis oprette dine helt egne content types og benytte Image Attach på nøjagtig samme måde som beskrevet herover.
Vær iøvrigt opmærksom på, at modulet Image Attach har den begrænsning, at der kun kan indsættes ét billede per node.
NB. Husk at tildele de rigtige rettigheder til de roller, du ønsker skal kunne oprette pages og billeder.
Hvordan opretter man en teaser (story) med tekst og et thumbnail-billede, som linker til den fulde node med den fulde tekst og som viser  billedet i stor størrelse?
I Drupal findes en content type med navnet story. En story er velegnet til f.eks. artikler, idet en story består af dels en teaser (de første linier af artiklen) og dels af selve artiklen i dens fulde længde. Med mindre du har ændret på det, vil forsiden i en basis-installation af Drupal, vise en liste med teasere til de story's, der nu engang er oprettet. Teaseren til den senest oprettede story vil som udgangspunkt blive vist øverst.
Ofte har man brug for at indsætte et foto i en artikel og samtidig vise det samme foto som en lille thumbnail i selve teaseren.Fremgangsmetoden til dette er følgende:

  1. Download modulet Image (som bl.a. inkluderer modulet Image Attach) fra www.drupal.org/project/image.
  2. Aktivér modulerne Image og Image Attach fra administer > site building > modules.
  3. Opret nu en ny story ved at vælge create content > story.
  4. Indtast noget tekst i felterne title og body.
  5. Klik på attached images.
  6. Såfremt du fulgte guiden til oprettelse af et fotogalleri, har du sandsynligvis allerede nogle billeder, du kan vælge imellem, fra dropdown boksen existing image. Hvis ikke, kan du nu uploade et billede i feltet upload image.
  7. I feltet image title kan du indtaste en tekst, som vil blive vist når man fører musen over billedet.
  8. Klik på knappen save, og du har nu en side med et billede, som er indsat til højre for teksten, du tidligere indtastede. Ønsker du at ændre på placeringen af billedet, skal du igang med theming, hvilket ikke er en del af denne artikel. Læs evt. denne artikel om Drupal theming.
  9. Gå nu til forsiden af dit websted, og se at der nu er oprettet en teaser med en thumbnail af dit billede.

Bemærk at billedet (såfremt du uploadede et stort billede) er skaleret ned til såkaldt preview-størrelse (maksimum 640x640 pixels). Bemærk også at du kan klikke på billedet og dermed komme ind på billedets egen node, og at der herfra er links til billedets thumbnail (100x100 pixels) og billedet i dets originale størrelse. Værdierne (640x640 og 100x100) er nogle præ-definerede værdier, som du selv  kan ændre via administer > site configuration > images.
Vær iøvrigt opmærksom på, at modulet Image Attach har den begrænsning, at der kun kan indsættes ét billede per node.
NB. Husk at tildele de rigtige rettigheder til de roller, du ønsker skal kunne oprette stories og billeder.
Hvordan indsætter man flere billeder på en side - og hvordan placerer man dem et bestemt sted i det øvrige indhold?
I de tre ovennævnte scenarier var det kun muligt at indsætte ét billede per node, og billedets placering var på forhånd fastlagt. Ønsker du istedet at kunne indsætte flere billeder på én node, og fuldstændig selv bestemme placeringen af disse billeder kan du benytte modulet Image Assist.

  1. Download modulet Image fra www.drupal.org/project/image.
  2. Download modulet Image Assist fra www.drupal.org/project/img_assist.
  3. Download også modulet Views fra www.drupal.org/project/views, da Image Assist er afhængig af Views.
  4. Aktivér de 3 moduler Image, Image Assist og Views fra administer > site building > modules.
  5. Du skal nu ændre i indstillingerne til input formatet. Vælg derfor administer > site configuration > input format.
  6. Klik på teksten configure ud for filtered HTML (eller alternativt ud for full HTML, hvis du ikke ønsker, alle brugere skal kunne indsætte billeder).
  7. Sæt "flueben" i feltet inline images.
  8. Opret nu en ny side (f.eks. en story). Indtast noget tekst i feltet title og skriv et par liniers tekst i feltet body.
  9. Klik nu på ikonet under body-feltet for at indsætte et billede.
  10. Der åbner nu et nyt browser-vindue op, hvorfra du kan uploade billeder. Klik på knappen upload.
  11. Indtast en titel på billedet i feltet title.
  12. Hvis du har modulet image gallery installeret, vil du se feltet image galleries, hvori du kan angive hvilket galleri, billedet skal uploades til.
  13. I feltet image browses frem til det billede, du vil uploade.
  14. Klik på knappen save.
  15. Nu er billedet uploadet, og du ser nu en thumbnail af billedet.
  16. Indtast evt. en beskrivelse i feltet description.
  17. I feltet size kan du vælge om billedet skal indsættes på siden i thumbnail størrelse (100x100 pixels) eller preview størrelse (maksimum 640x640 pixels).
  18. I feltet alignment kan du angive om billedet skal venstrejusteres, højrejusteres eller centreres.
  19. I feltet link kan du angive om billedet skal fungere som et link
  20. I feltet insert mode kan du vælge om koderne skal skrives som HTML-koder eller som såkaldte filter tags. For slutbrugeren er det fuldstændigt ligegyldigt hvad du vælger, da det kun er dig selv der ser koderne. Har du valgt filtered HTML i input format er du dog nødsaget til at vælge filter tags fremfor HTML.
  21. Klik til sidst på knappen insert og de nødvendige koder bliver lavet for dig.
  22. Gem din story og se resultatet i browseren..

Bemærk at billederne (såfremt du uploader store billeder) bliver skaleret ned til såkaldt preview-størrelse (maksimum 640x640 pixels). De thumbnails du ser er 100x100 pixels. Værdierne (640x640 og 100x100) er nogle præ-definerede værdier, som du selv  kan ændre via administer > site configuration > images.
NB. Husk at tildele de rigtige rettigheder til de roller, du ønsker skal kunne oprette indhold og indsætte billeder.
En anden mulighed for at indsætte billeder er med en såkaldt WYSIWYG-editor (What You See Is What You Get). De to mest anvendte er TinyMCE og FCKeditor. Se evt. denne FCKeditor tutorial.

5
Din bedømmelse: Ingen Gennemsnit: 5 (1 stemme)

1 kommentarer

Indsend kommentar

Hej alle
Lige et opklarende spørgsmål mht. ikonet under body-feltet. Er dette ikon placeret under body-feltet, hvis man ikke har installeret FCKeditor?
Jeg har installeret FCKeditor, og det eneste ikon jeg kan se, der har med billeder at gøre, er placeret i værktøjslinien lige over selve skrivefeltet.
Når jeg klikker på dette ikon, så popper der et lille vindue op med overskriften "Egenskaber for billeder". Men der er ikke nogen upload knap. Blot et felt med titlen URL. Skal jeg angive billedets sti i URL-feltet, og så klikke "Ok"?
Jeg kunne i øvrigt heller ikke "inline images", som man skal sætte flueben, jf. overstående.
Jeg har valgt at installeret image, img_assist og views. Jeg har ikke aktiveret muligheden for at arbejde med billeder i FCKeditor, jf. installationen som angivet i tutorialen om FCKeditor.
På forhånd tak!
Mvh. LeonN

  • Det er gratis
  • Du kan skrive artikler og tips
  • Du kan få hjælp eller hjælpe andre 
  • - og meget mere …