Foto s bewerken en toevoegen aan de website

Transcriptie

1 Foto s bewerken en toevoegen aan de website

2 Inhoud Formaten... 3 Foto s bovenaan de pagina - topimages... 3 Foto s op maat maken en bewerken... 3 Foto s toevoegen bovenaan de pagina... 5 Via een content item... 5 Via de media library... 8 Foto s contactpersonen Richtlijnen pasfoto s Foto s contact personen bewerken en op maat maken Contactpersonen toevoegen Teampagina met contactpersonen aanmaken Richtlijnen uploaden van foto s... 22

3 Formaten Als je eigen foto s wilt gebruiken op de website dan dienen de foto s aan de volgende eisen te voldoen: Plaats waar foto s geplaatst worden Foto s die boven een bericht geplaatst worden en zodanig ook in de nieuwsstream getoond worden Foto s die in de tekst opgenomen kunnen worden Foto boven landingspagina (bv. Over LTO Noord) Foto in banner: achtergrond Foto in banner: detail Foto s in foto galerie: thumbnails Personen foto s (getoond bij o.a. Auteur, contactpersoon) Afmetingen 1120 x 503 pixels 480 x 336 pixels 1920 x 733 pixels 1440 x 336 pixels 480 x 336 pixels 140 x 100 pixels 180 x 180 pixels Foto s bovenaan de pagina - topimages Bovenaan de pagina s op de website staat meestal een (gerelateerde) afbeelding. Dit is de top image. Bij nieuwsberichten en weblogs is het verplicht om hier een foto te hebben. Anders komt er in de nieuwsstream op de homepage een wit vlak. Foto s op maat maken en bewerken Foto s zijn vaak te groot om aan onze beeldbank toe te voegen, of worden niet goed weergegeven in nieuwsstream of nieuwspagina. Richtlijnen top images: Géén pasfoto s Het onderwerp moet zich op de bovenste 75% van de foto afspelen Om foto s van formaat te veranderen kun je gebruik maken van het programma Paint: Open Paint Open de foto die je wilt bewerken Kies formaat wijzigen Vink pixels aan Zorg dat hoogte- breedte verhouding behouden is aangevinkt. Zet bij horizontaal de bij formaten foto s aangegeven waarde. Kies opslaan als Sla bij voorkeur op als.jpg Voeg -web in de beschijving toe zodat duidelijk is dat deze foto voor de website is.

4 Je hebt nu een afbeelding met de juiste breedte. De gewenste hoogte van de afbeelding kun je uitsnijden in Paint. Kies voor Selecteren en klik met je muis op de linker rand van de foto houd je muis aangeklikt en sleep helemaal naar rechterkant van de foto. Onderin zie de geselecteerde pixels in hoogte en breedte. Zorg ervoor dat je horizontaal de hele afbeelding hebt geselecteerd. Je hebt immers de juiste breedte eerder vastgezet. Door je muis omlaag (of omhoog) te bewegen bepaal je de gewenste hoogte (en uitsnede) van de foto. TIP Het kan soms lastig zijn om exact de juiste pixels te selecteren. Dit vereist een vaste hand. Een oplossing is om het beeld eerst verder in te zoomen. De pixels worden dan als het ware groter en makkelijker te selecteren.

5 Foto s toevoegen bovenaan de pagina Er zijn twee manieren om foto s toe te voegen bovenaan je pagina: Via een content item Via de media library Via een content item Maak een content item (webpagina) aan Ga naar top image en klik op bladeren Je krijgt onderstaand scherm Kies media uploaden Kies bestemming wijzigen en selecteer de map waarin je de foto wilt toevoegen

6 En klik op bevestigen Kies Bladeren voor mediabestanden Selecteer de foto van je schijf op de computer, en kies openen Vul een beschrijving in en een alternate text.

7 Klik op media uploaden in de rechter bovenhoek In het scherm zie je direct de zojuist geuploade foto in je map staan. Selecteer de foto en kies selecteer media De foto staat nu bij je bericht. LET OP: bij het publiceren van je item moet je gerelateerde items aanvinken. Anders wordt de zojuist geuploade foto niet zichtbaar.

8 Via de media library Je kan je foto s ook toevoegen aan de media library voordat je je pagina gaat maken waar de foto op moet komen. Voordeel hiervan is dat je meerdere foto s in een keer kan uploaden en dat je foto s nooit in de verkeerde map terecht komen. Open de Mediatheek vanuit het startscherm van het CMS Ga naar de map Images en zoek de juiste map (team, thema, regio, etc) Staat de juiste map hier nog niet tussen, maak deze dan als volgt aan. Klik rechts en kies invoegen mediamap en geef de naam op. Nu kun je foto s uploaden naar de mediatheek. Klik op de map In het rechterscherm verschijnen nu 3 opties: o upload file: hiermee kun je 1 foto uploaden o uploads files (advanced): hier kun je meerdere foto s achter elkaar uploaden o new folder: hiermee kun je een subfolder aanmaken om foto s binnen je album te ordenen Staan alle foto s erin, ga dan klik dan op de mapnaam en sla je deze op door op Opslaan te klikken in de grijze bovenbalk Publiceer alle foto s door publiceer item te kiezen, vink hier ook aan dat alle subitems gepubliceerd moeten worden en klik op Publiceer

9 Om de foto toe te voegen aan je pagina/bericht volg je de stappen hiervoor beschreven bij foto toevoegen tijdens aanmaken van je item.

10 Foto s contactpersonen Richtlijnen pasfoto s Om er nu voor te zorgen dat we herkenbaar zijn op deze foto s hebben we een aantal richtlijnen opgesteld. Zorg dat je gezicht herkenbaar is op de foto. Denk aan formaat pasfoto. Zorg voor een neutrale achtergrond. De achtergrond wordt namelijk in het portaal ook getoond. Zorg voor voldoende licht op je gelaat. Soms kan het licht buiten beter zijn dan binnen. Concreter gelden de volgende regels: Formaat 180 x 180 pixels (vierkant dus) Maatvoering Bestand niet groter dan 100 Kb Fotokwaliteit in kleur goedgelijkend natuurlijke weergave scherp, voldoende contrast en gedetailleerd Achtergrond licht of neutraal voldoende contrast tussen hoofd en achtergrond Positionering en weergave gezicht Gezicht volledig zichtbaar Hoofd volledig afgebeeld Hoofd gecentreerd afgebeeld Enkele voorbeelden: Goed:

11 Redelijk: Niet goed: Voorbeeld zichtbaarheid pasfoto s op nieuw digitaal platform:

12 Foto s contact personen bewerken en op maat maken Open de foto (klik rechtemuisknop) met 'foto bewerken' (doe dit bij voorkeur lokaal op je pc, buiten de LTO werkomgeving). Kies bewerken (icoon 2 pennen kruis) Kies hoogte-breedte verhoudingen en kies vervolgens voor vierkant.

13 Zoom nu het beeld in tot een goed bostbeeld door het selectiekader te verkleinen. Plaats vervolgens foto goed in het midden. Sla foto op middels 'kopie opslaan' Open de foto in paint Kies formaat wijzigen Selecteer pixels Zorg at er een vinkje staat hoogte- breedte verhoudingen behouden Vul bij horizontaal (of verticaal) 180 pixels. OK en opslaan als (liefst als.jpg bestand)

14 Contactpersonen toevoegen Ga in de sitecore manager naar mediatheek - contactpersonen

15 Kies upload file en blader vervolgens in je mappen op je pc naar de foto die je wilt uploaden.

16 Vul bij het veld Alt de naam van de persoon in en sla op en publiceer. Ga naar website gegevens - team regio (de regio die je wilt bewerken)

17 Voeg (insert) een nieuw item of bewerk (edit) een bestaand item (persoon). Kies browse om de foto toe te voegen uit de mediafolder, waar je zojuist de foto hebt opgeslagen. Zoek de juiste foto en kies select.

18 De foto is nu gekoppeld in je item. Sla het item op en publiceer, om de foto op de website te tonen.

19 Teampagina met contactpersonen aanmaken Ga naar de content editor. Maak onder Website gegevens>contactpersonen een nieuwe map aan met de naam van het team. Maak hieronder voor elk lid een nieuw contactpersoon aan (of kopieer bestaand contactpersoon) Per contactpersoon item: o Contact Person Name: voor en achternaam o Contact person image: pasfoto (afmeting 180x180 pixels) o Speciality: bv. functiebeschrijving Sorteer de contactpersonen in de gewenste volgorde. Vervolgens maak je een content pagina aan onder content>homepage> [gewenste plek op de site] met de naam van het team. (als voorbeeld kun je kijken naar de pagina Management Team LTO Noord Kies bij Show H1 header voor de optie header Ga vervolgens naar de Experience Editor, via de tab Publish In het nieuwe tabblad verwijder je de content Detail van de zojuist aangemaakte pagina. Zet hier vervolgens een nieuw component neer

20 Kies Add here > ContactpersonList en selecteer de contactlijst die je zojuist aangemaakt hebt onder Website gegevens>contactpersonen>[teamnaam].

21 Als laatste opslaan en publiceren. Let op dat je alle losse onderdelen hebt gepubliceerd of zet anders bij publiceren een vinkje bij Related items. Let op: Zet het vinkje weer uit bij related items, de volgende keer dat je iets publiceert.

22 Richtlijnen uploaden van foto s Plaats de foto s altijd in de map waar jij in aan het werk bent cq. Verantwoordelijk voor bent. Bijvoorbeeld een thema map, of een provincie map. De volgende mappen worden gevuld en beheerd door documentatie: o Beeldbank LTO Noord o Nieuwe Oogst beelden Titel: vul altijd een unieke en goed herkenbare titel in. De titel wordt namelijk getoond zodra je een foto in bijvoorbeeld een nieuwsitem opneemt. Titels moeten uniek zijn, dus gebruik desnoods nummers om dit te realiseren. Alt: dit is de alternatieve tekst, als de foto niet goed geladen wordt. Je kunt hier de titel herhalen. Eventueel zonder extra nummering. Artiest: hier kun je de naam van de fotograaf vermelden. Weet je deze niet, en weet je zeker dat het een foto is die door een LTO Noord collega is gemaakt, dan vul je hier LTO Noord in Informatie: Hier kun je bij titel, trefwoorden en beschrijving extra informatie meegeven waarop binnen de Mediatheek / CMS Sitecore gezocht kan worden. Zorg er hierbij voor dat je deze informatie toevoegt in de Nederlandse versie van de foto. Dit kun je zien door het kleine tabje rechtsboven de velden. Als dit op Engels staat zet het dan eerst op Dutch.