Openstad
  • Introductie
  • Projectmanagement
    • Algemene kaders
    • Participatieprocessen
      • Voorkeurspeiling
      • Wedstrijd
      • Participatief begroten
  • Digitale tools
    • OpenStad CMS basis
      • Inloggen
      • De bouwstenen
      • Live in-page editing
      • Bewerkmodus (Draft)
      • Versiebeheer
    • Participatieprocessen
      • Voorkeurspeiling
      • Wedstrijd
      • Participatief begroten
    • How-to's
      • Nieuwe site aanmaken
      • Nieuwe pagina's toevoegen
      • Pagina's vullen
      • Inzendingen uploaden
      • Inzendingen weergeven
      • Filteren en categoriseren van inzendingen
      • Likes verzamelen
      • Reacties en argumenten
      • Interactieve kaart
      • Polygonen
      • Newsletter
      • Moderatie
      • Unieke stemcodes
      • Stemmen
      • Gebruikersbeheer
      • Gebruikers anonimiseren per website
      • Inzendingen exporteren en importeren
      • Vormgeving & logo aanpassen
      • E-mail notificaties
    • Widgets referentie
      • Accordeon
      • Agenda
      • Arguments
      • Columns
      • Slider
      • Counter
      • Date countdown bar
      • Ideas map
      • Ideeën op een kaart (Kaart applicatie)
      • iFrame
      • Image
      • Info bar
      • Link or button
      • List
      • Like
      • Location
      • Participatory budgeting
      • Keuzewijzer
      • Keuzewijzer resultaten
      • Rich text
      • Resource admin buttons
      • Resource overview
      • Resource form
      • Resource representation
      • Resource raw widget
      • Resource image
      • Speech bubble
      • Share widgets
      • Title
      • User remove form
      • Video upload
      • Video 3d party
      • Vorige volgende knoppen
    • Algemeen
      • Terminologie
      • Waarschuwingen
      • Adminpanel
      • Adminpanel (beta)/React admin
      • Page Settings
      • OpenStad hoofdmenu
        • Tags
        • Global
        • Open palette
        • Clear cache
        • Pages
        • Users
        • Images
        • Files
        • Workflow
        • Logout
      • Styles for the container
      • Interactieve kaart thema iconen
      • Inzendingen (ideas)
      • Artikelen (articles)
      • Gebruikers (users)
      • Authenticatie methodes
      • Rollen
      • URL's
      • Testen
      • Raw
      • Resources
  • Technical documentation (English)
    • Architecture
    • Getting started
    • Deploying to production
      • Kubernetes
      • Installing on Digital ocean with Kubernetes
      • Backups
      • Deploying a custom image
    • Frontend: CMS
      • Apostrophe CMS
      • The Openstad version of ApostropheCMS
      • Using openstad-components
      • Configuration
    • Frontend: Components
      • Use and configuration
      • Publishing
      • Components
        • Choices Guide
        • Ideas On Map
    • Api
      • Site
      • Idea
      • Argument
      • Vote
      • Article
      • Newsletter Signup
      • User
      • Auth
      • Resource & Data permissions
      • Pagination and search
      • Email settings
      • Database migrations
      • API configuration
    • oAuth2
      • Oauth2 configuration
    • Management panel
      • Management Panel configuration
    • Image server
    • Contributing & versioning
    • Git flow
    • Roadmap
Powered by GitBook
On this page
  • De afbeelding
  • Styling
  1. Digitale tools
  2. Widgets referentie

Image

PreviousiFrameNextInfo bar

Last updated 3 years ago

Plaats een afbeelding op je webpagina om de tekst te verduidelijken.

Let op: maak de afbeelding eerst in het gewenste formaat en de juiste resolutie in een fotobewerkingsprogramma.

  • Kies de sectie waar je de afbeelding wilt plaatsen

  • Druk op +

  • Kies Image

  • Je ziet nu het onderstaande scherm

  • Upload het bestand (jpg of png, bij voorkeur niet groter dan 200kb)

  • Een preview verschijnt

  • Geef de afbeelding een titel en alt-tekst (voor toegankelijkheid, beschrijf de afbeelding)

  • Wil je een link toevoegen? Kies dan Yes en voeg de url toe waarnaar de afbeelding moet linken

  • Je kunt ook linken naar een grotere versie van de afbeelding:

    • Druk onder de preview van de afbeelding op view file

    • In het nieuwe tabblad, kopieer het deel van de url vanaf /uploads/...

    • Plak de url in het linkveld

  • Kies hoe je de afbeelding wilt weergeven in de vooringestelde opties

De afbeelding

Zorg dat de afbeelding van goede kwaliteit is, dus goed scherp. Voor paginagrote afbeeldingen kies je een resolutie van 1920x1080. Let op dat de afbeelding niet te groot is, dat gaat ten koste van de snelheid van de pagina.

Snijd de afbeelding in een fotobewerkingsprogramma bij op het juiste formaat. Dit kan niet na uploaden in OpenStad.

Styling

Styles for the container: Deze module beschikt over de standaard CSS styling mogelijkheden, zie

styles for the container.