Fotoalbum met CCK en Views in Drupal 7

Probeer eens de media module, is nieuw in Drupal 7

Hoi,

Ik heb een basic fotoboek op D7 samengesteld met volgende modules:
* CCK
* Views
* Lightbox2
* PLUpload en MUpload (voor uploaden meerder files)

resultaat: http://www.santiagotegenkanker.be/fotoboek-overzicht
mijn gebruikers zijn zeer content over het resultaat...
Als het nodig is, kan ik wel eens een step-by-step schrijven, maar een basic kennis van de views-module zal je al aardig op weg helpen.

Gallery Formatter-module vond ik niet goed overweg kunnen met staande foto's.

Om een mix van portrait en landscape wat mooier te maken heb ik een fotoformaat gemaakt dat de vertikale zijde steeds dezelfde maat geeft. Hierdoor heb je die "sprongen" niet als je een landscape en portrait naast elkaar zet.

Ja heel mooie fotopagina Kris. Als het je eens moest passen om een step-by-step te schrijven, dit is echt prachtig!

Benodigde Modules

Hoe deze te installeren en configureren vind je op de respectievelijke project pagina’s

• Lightbox2
• CCK
• Views
• PLUpload
• Multiupload filefield Widget (sandbox project)
• Custom Formatter

Step-by-step

1. Creer een content-type “Fotoboek Pagina”:
   1. Label: images
   2. Naam: field_image
   3. Field: image
   4. Widget: Muploader
   5. Dit is (nartuurlijk) een required field, en zet het aantal op onbeperkt
2. Creer een Custom Formatter:
1. Naam: fotoboek_image
2. Label: fotoboek image
3. Field types: image
4. Code:


$path = $variables['#item']['uri'];
$uri = image_style_path('medium', $path);
$image_html = ' ';
return '' . $image_html . '';

Deze code zal de URL die normaal getoond wordt omvormen en de lightshow tag toevoegen aan alle foto’s in je fotoboek-view (zie verder). Ik heb de lightshow zo geconfigureerd dat hij in een loop draait.

3. Creer een view “fotoboek” type Page, dit wordt de pagina die je eigenlijke fotoboek-pagina zal tonen:
1. Title: “Fotoboek”
2. Format: Unformatted list
3. Fields:
1. Content: title
1. Geen label
2. Style settings: Wrap field in HTML en zet het op h1
2. Content: logo
1. Geen label
2. Formatter: Custom: fotoboek Image
3. Multiple Field Settings:
1. Check Display all values in the same row
2. Display type: Simple separator met als waarde een ‘ ’ ofte spatie, en zet Display “all” value starting from “0”
4. Style settings: add default classes
3. Zet het pad op: “fotoboek”
4. Eventueel voeg je in de Header een Global Text Area in waar je wat tekst kwijtkan voor je bezoekers
5. Zet de Pager Display all items
4. Creer een view “Fotoboek-overzicht” type Page, dit wordt de landings-pagina voor je fotoboek met hierop 1 foto per fotoboek pagina die je aanmaakt:
1. Title: “Fotoboek overzicht”
2. Format: Grid
1. Row Class: fotoboek
2. Number of columns: 4
3. Alignment: Horizontal
3. Voeg volgende velden toe:
1. Content: Nid
1. Zet “exclude from display aan”: we willen deze ID immers niet tonen maar gebruiken als token om door te linken naar de juiste fotoboek-pagina
2. Content: logo
1. Geen label
2. Formatter: Image
3. Image style: Medium (maar je kiest zelf het formaat dat je wenst)
4. Link image to: Nothing
5. Multiple Field Settings:
1. Check Display all values in the same row
2. Display type: Simple separator met als waarde een ‘ ’ ofte spatie, en zet Display “1” value starting from “0”
6. Style settings: add default classes
7. Rewrite results
1. Output this field as link
2. zet in het link path: “fotoboek/[nid]”
3. Content: Title
1. Geen label
2. Style settings: add default classes
3. Rewrite results
1. Output this field as link
2. zet in het link path: “fotoboek/[nid]”
4. Voeg volgende filter toe:
1. Content: Published (Yes)
2. Content: Type (in Fotoboek Pagina)
5. Voeg volgende sorteer criteria toe:
1. Content: Post date (desc)
6. Zet het pad op: “fotoboek-overzicht”
7. Eventueel voeg je in de Header een Global Text Area in waar je wat tekst kwijtkan voor je bezoekers
8. Zet de Pager op 12 items per pagina (dus 3 rijen foto’s)
5. In je theme css voeg volgende code toe:

.fotoboek
{
width: 25%;
text-align:center;
}

En nu maar hopen dat ik niks over het hoofd gezien heb... :-)

GOOD LUCK

PS: ik gebruik tevens Cufon voor het weergeven van bepaalde lettertypes zoals mijn h1: Végur, h2: Sauna

Even een vraagje, wat moet er tussen de haakjes worden ingevuld? $image_html = ' ';
Moet dit gewoon leeg blijven? Dit vraag ik omdat ik constant een foutmelding krijg over de formatters.

Bvd,
Ron

De code tag op dit forum heeft blijkbaar een deel van mijn tekst uitgefilterd.
Je kan de originele code bekijken door met google chrome op inspect element te klikken, of via de firebug plugin kan je hier ook aan.

Kris