> ## Documentation Index
> Fetch the complete documentation index at: https://docs.dc.ag/llms.txt
> Use this file to discover all available pages before exploring further.

# dynamic content - Create Image Galleries

> Display multiple images as a gallery with thumbnail previews on your pages.

With image galleries, you can display multiple images on your pages. One of the images is shown large, while the others appear below it as small thumbnail previews.

Next to the large image there are arrows that allow visitors to your page to navigate between the images, so that the next one is displayed large in turn. In addition, visitors can also click on the small preview images to display the selected one in large format.

Unlike a file gallery, the images are displayed directly on the page without the user having to click on them.

<Note>
  This guide is part of the [Content Types](/docs/en/dynamic-content/user-guide/inhaltsarten). We show you how to create content in general under [Create and Edit Content](/docs/en/dynamic-content/user-guide/inhalte-erstellen).
</Note>

<Steps>
  <Step>
    ## Step 1: Select the Content Type "Image Galleries"

    First, select the content type "Image Galleries" when creating a content item. A window with the heading "New Image Gallery" should open. Here you can configure the settings for your image gallery and upload images directly.

    <Frame>
      <img src="https://mintcdn.com/dcag/NHJ2s69sWhUfX2Ig/images/dynamic-content/inhaltsarten/bildergalerien/auswahl-inhaltsart.png?fit=max&auto=format&n=NHJ2s69sWhUfX2Ig&q=85&s=da979fe2deaa6048f5e8c2dd3e91a3e3" alt="Select the content type Image Galleries" width="1080" height="643" data-path="images/dynamic-content/inhaltsarten/bildergalerien/auswahl-inhaltsart.png" />
    </Frame>
  </Step>

  <Step>
    ## Step 2: Choose a Description

    First, define a description. This is only for organisational purposes and will not be displayed on the selected page.

    <Frame>
      <img src="https://mintcdn.com/dcag/NHJ2s69sWhUfX2Ig/images/dynamic-content/inhaltsarten/bildergalerien/beschreibung.png?fit=max&auto=format&n=NHJ2s69sWhUfX2Ig&q=85&s=4f88dde863ef65288e68c3622b9a7ba1" alt="Define the description of the image gallery" width="1080" height="643" data-path="images/dynamic-content/inhaltsarten/bildergalerien/beschreibung.png" />
    </Frame>
  </Step>

  <Step>
    ## Step 3: Set Maximum Image Width and Height

    Next, set the image width and height. You can choose these freely, but you should at least use the same format or aspect ratio as the original images.

    <Columns cols={2}>
      <Column>
        <Frame>
          <img src="https://mintcdn.com/dcag/NHJ2s69sWhUfX2Ig/images/dynamic-content/inhaltsarten/bildergalerien/bildbreite.png?fit=max&auto=format&n=NHJ2s69sWhUfX2Ig&q=85&s=6e89a577d322485df29cfcfe4f491d7a" alt="Set maximum image width" width="1080" height="643" data-path="images/dynamic-content/inhaltsarten/bildergalerien/bildbreite.png" />
        </Frame>
      </Column>

      <Column>
        <Frame>
          <img src="https://mintcdn.com/dcag/NHJ2s69sWhUfX2Ig/images/dynamic-content/inhaltsarten/bildergalerien/bildhoehe.png?fit=max&auto=format&n=NHJ2s69sWhUfX2Ig&q=85&s=23fde4d7ccd6f281b0298c6b61f3f008" alt="Set maximum image height" width="1080" height="643" data-path="images/dynamic-content/inhaltsarten/bildergalerien/bildhoehe.png" />
        </Frame>
      </Column>
    </Columns>
  </Step>

  <Step>
    ## Step 4: Set Maximum Thumbnail Width and Height

    Next, configure the thumbnail width and height settings.

    <Columns cols={3}>
      <Column>
        <Frame>
          <img src="https://mintcdn.com/dcag/NHJ2s69sWhUfX2Ig/images/dynamic-content/inhaltsarten/bildergalerien/thumbnail-breite.png?fit=max&auto=format&n=NHJ2s69sWhUfX2Ig&q=85&s=b051facb467dde45c455e9a7e1f678a8" alt="Set thumbnail width" width="1080" height="643" data-path="images/dynamic-content/inhaltsarten/bildergalerien/thumbnail-breite.png" />
        </Frame>
      </Column>

      <Column>
        <Frame>
          <img src="https://mintcdn.com/dcag/NHJ2s69sWhUfX2Ig/images/dynamic-content/inhaltsarten/bildergalerien/thumbnail-hoehe.png?fit=max&auto=format&n=NHJ2s69sWhUfX2Ig&q=85&s=a94de3dc5f95021a89a62002c535db30" alt="Set thumbnail height" width="1080" height="643" data-path="images/dynamic-content/inhaltsarten/bildergalerien/thumbnail-hoehe.png" />
        </Frame>
      </Column>

      <Column>
        <Frame>
          <img src="https://mintcdn.com/dcag/NHJ2s69sWhUfX2Ig/images/dynamic-content/inhaltsarten/bildergalerien/thumbnail-speichern.png?fit=max&auto=format&n=NHJ2s69sWhUfX2Ig&q=85&s=37b4bb7b036b1fbafdeb595799a149f4" alt="Save thumbnail settings" width="1080" height="643" data-path="images/dynamic-content/inhaltsarten/bildergalerien/thumbnail-speichern.png" />
        </Frame>
      </Column>
    </Columns>
  </Step>

  <Step>
    ## Step 5: Manage Images

    After saving, you can now start adding images directly. To do so, click the "Plus" button with the adjacent label "New". You also have the option to upload multiple images at once via drag & drop.

    <Columns cols={3}>
      <Column>
        <Frame>
          <img src="https://mintcdn.com/dcag/NHJ2s69sWhUfX2Ig/images/dynamic-content/inhaltsarten/bildergalerien/bilder-pflegen-1.png?fit=max&auto=format&n=NHJ2s69sWhUfX2Ig&q=85&s=5954281b28caee0a0e1de7458c072fab" alt="Add images via the Plus button" width="1080" height="643" data-path="images/dynamic-content/inhaltsarten/bildergalerien/bilder-pflegen-1.png" />
        </Frame>
      </Column>

      <Column>
        <Frame>
          <img src="https://mintcdn.com/dcag/NHJ2s69sWhUfX2Ig/images/dynamic-content/inhaltsarten/bildergalerien/bilder-pflegen-2.png?fit=max&auto=format&n=NHJ2s69sWhUfX2Ig&q=85&s=6fe827ac1e05b881ef588693b55bf61e" alt="Image upload window" width="1080" height="643" data-path="images/dynamic-content/inhaltsarten/bildergalerien/bilder-pflegen-2.png" />
        </Frame>
      </Column>

      <Column>
        <Frame>
          <img src="https://mintcdn.com/dcag/NHJ2s69sWhUfX2Ig/images/dynamic-content/inhaltsarten/bildergalerien/bilder-pflegen-3.png?fit=max&auto=format&n=NHJ2s69sWhUfX2Ig&q=85&s=cf0a66e2fe9612371bde2b3e12ba4b68" alt="Select file" width="1080" height="643" data-path="images/dynamic-content/inhaltsarten/bildergalerien/bilder-pflegen-3.png" />
        </Frame>
      </Column>
    </Columns>

    <Columns cols={2}>
      <Column>
        <Frame>
          <img src="https://mintcdn.com/dcag/NHJ2s69sWhUfX2Ig/images/dynamic-content/inhaltsarten/bildergalerien/bilder-pflegen-4.png?fit=max&auto=format&n=NHJ2s69sWhUfX2Ig&q=85&s=87acd8f2067cabd42125e29501a0c379" alt="Upload images via drag & drop" width="1080" height="643" data-path="images/dynamic-content/inhaltsarten/bildergalerien/bilder-pflegen-4.png" />
        </Frame>
      </Column>

      <Column>
        <Frame>
          <img src="https://mintcdn.com/dcag/NHJ2s69sWhUfX2Ig/images/dynamic-content/inhaltsarten/bildergalerien/bilder-pflegen-5.png?fit=max&auto=format&n=NHJ2s69sWhUfX2Ig&q=85&s=071819fc960026b5abea28e59253a4d2" alt="Uploaded images in overview" width="1080" height="643" data-path="images/dynamic-content/inhaltsarten/bildergalerien/bilder-pflegen-5.png" />
        </Frame>
      </Column>
    </Columns>
  </Step>

  <Step>
    ## Step 6: Adjust Image Description

    In the overview, you will see the images you have uploaded. An automatic description has already been generated based on the image name. You can edit this by double-clicking on the respective image.

    <Columns cols={3}>
      <Column>
        <Frame>
          <img src="https://mintcdn.com/dcag/NHJ2s69sWhUfX2Ig/images/dynamic-content/inhaltsarten/bildergalerien/bild-beschreibung-1.png?fit=max&auto=format&n=NHJ2s69sWhUfX2Ig&q=85&s=f3f2be0c9ad5f4f1e94b7aa04df4c327" alt="Overview of uploaded images" width="1080" height="643" data-path="images/dynamic-content/inhaltsarten/bildergalerien/bild-beschreibung-1.png" />
        </Frame>
      </Column>

      <Column>
        <Frame>
          <img src="https://mintcdn.com/dcag/NHJ2s69sWhUfX2Ig/images/dynamic-content/inhaltsarten/bildergalerien/bild-beschreibung-2.png?fit=max&auto=format&n=NHJ2s69sWhUfX2Ig&q=85&s=06c2a1231649c580c0b9fc8fa48d2111" alt="Open image for editing" width="1080" height="643" data-path="images/dynamic-content/inhaltsarten/bildergalerien/bild-beschreibung-2.png" />
        </Frame>
      </Column>

      <Column>
        <Frame>
          <img src="https://mintcdn.com/dcag/NHJ2s69sWhUfX2Ig/images/dynamic-content/inhaltsarten/bildergalerien/bild-beschreibung-3.png?fit=max&auto=format&n=NHJ2s69sWhUfX2Ig&q=85&s=e073ce946d7dd1d6b48dbf4c6f3d81a7" alt="Edit image description" width="1080" height="643" data-path="images/dynamic-content/inhaltsarten/bildergalerien/bild-beschreibung-3.png" />
        </Frame>
      </Column>
    </Columns>

    <Columns cols={2}>
      <Column>
        <Frame>
          <img src="https://mintcdn.com/dcag/NHJ2s69sWhUfX2Ig/images/dynamic-content/inhaltsarten/bildergalerien/bild-beschreibung-4.png?fit=max&auto=format&n=NHJ2s69sWhUfX2Ig&q=85&s=1e412df383ac0a3ea08fe983e7dd0054" alt="Adjust description" width="1080" height="643" data-path="images/dynamic-content/inhaltsarten/bildergalerien/bild-beschreibung-4.png" />
        </Frame>
      </Column>

      <Column>
        <Frame>
          <img src="https://mintcdn.com/dcag/NHJ2s69sWhUfX2Ig/images/dynamic-content/inhaltsarten/bildergalerien/bild-beschreibung-5.png?fit=max&auto=format&n=NHJ2s69sWhUfX2Ig&q=85&s=c16c0e7ac451afce11f99c2f7d07e8f2" alt="Save description" width="1080" height="643" data-path="images/dynamic-content/inhaltsarten/bildergalerien/bild-beschreibung-5.png" />
        </Frame>
      </Column>
    </Columns>
  </Step>
</Steps>

## Related Topics

<CardGroup cols={2}>
  <Card title="Content Types" icon="shapes" href="/docs/en/dynamic-content/user-guide/inhaltsarten">
    Overview of all available modules.
  </Card>

  <Card title="Create and Edit Content" icon="pen-to-square" href="/docs/en/dynamic-content/user-guide/inhalte-erstellen">
    Create content on pages.
  </Card>

  <Card title="Slideshows" icon="images" href="/docs/en/dynamic-content/user-guide/inhaltsarten/slideshows">
    Present images as a slideshow.
  </Card>

  <Card title="File Galleries" icon="folder-open" href="/docs/en/dynamic-content/user-guide/inhaltsarten/dateigalerien">
    Provide files as a gallery for download.
  </Card>
</CardGroup>
