# Leistungsbeschreibung Fotos

# Übersichtsseite

<table border="1" id="bkmrk-titel-verf%C3%BCgbar-widg" style="border-collapse: collapse; width: 100%; height: 143.391px;"><colgroup><col style="width: 26.2217%;"></col><col style="width: 12.0532%;"></col><col style="width: 61.8443%;"></col></colgroup><thead><tr style="height: 29.7969px;"><td style="height: 29.7969px;">Titel</td><td style="height: 29.7969px;">Widget</td><td style="height: 29.7969px;">Widget-Beschreibung</td></tr></thead><tbody><tr style="height: 113.594px;"><td style="height: 113.594px;">Fotos</td><td style="height: 113.594px;"><div drawio-diagram="1916"><img src="https://wiki.dedesales.de/uploads/images/drawio/2025-08/d6ubdohxh8bq1uV1-drawing-9-1754295011.png" alt=""/></div>

</td><td style="height: 113.594px;">1. Anzahl der Fotos

Klick:

\- öffnet die Übersichtsseite

Verfügbar:

\- Startseiten-Dashboard

Recht:

\- Grundkonfiguration - Rollen - &lt;Rolle&gt; - Basis - Bilder

</td></tr><tr><td>Fotos</td><td><div drawio-diagram="1919"><img src="https://wiki.dedesales.de/uploads/images/drawio/2025-08/9gPnpGQVNbD7sSdN-drawing-9-1754296906.png" alt=""/></div>

</td><td>1. Anzahl der Fotos

Klick:

\- öffnet die Übersichtsseite

Verfügbar:

\- Kundendetails

Recht:

\- Grundkonfiguration - Rollen - &lt;Rolle&gt; - Basis - Fotodokumentation

</td></tr></tbody></table>

### Allgemein

#### Funktionen in der Titelleiste

<table border="1" id="bkmrk-icon-erl%C3%A4uterung-erm" style="border-collapse: collapse; width: 100%;"><colgroup><col style="width: 7.20245%;"></col><col style="width: 92.9167%;"></col></colgroup><thead><tr><td>Icon</td><td>Erläuterung</td></tr></thead><tbody><tr><td>[![image.png](https://wiki.dedesales.de/uploads/images/gallery/2025-08/scaled-1680-/0QoXlo3GGnt6M3VC-image.png)](https://wiki.dedesales.de/uploads/images/gallery/2025-08/0QoXlo3GGnt6M3VC-image.png)

</td><td>Anzeige der aufgenommen Fotos in der Präsentationsansicht

</td></tr><tr><td>+

</td><td>Ermöglicht das Hinzufügen von neuen Fotos (nur verfügbar wenn man aus der Kundenseite kommt)

</td></tr></tbody></table>


#### Grid

<table border="1" id="bkmrk-click-swipe-ansichte" style="border-collapse: collapse; width: 100%; height: 99.8281px;"><colgroup><col style="width: 33.3731%;"></col><col style="width: 33.3731%;"></col><col style="width: 33.3731%;"></col></colgroup><thead><tr style="height: 29.7969px;"><td style="height: 29.7969px;">Click</td><td style="height: 29.7969px;">Swipe</td><td style="height: 29.7969px;">Ansichten</td></tr></thead><tbody><tr style="height: 70.0312px;"><td style="height: 70.0312px;">Eintrag bearbeiten</td><td style="height: 70.0312px;">1. Löschen

</td><td style="height: 70.0312px;">1. Tabelle

</td></tr></tbody></table>


##### Spaltendefinition

<table border="1" id="bkmrk-bezeichnung-sichtbar" style="border-collapse: collapse; width: 100%; height: 873.406px;"><colgroup><col style="width: 16.5075%;"></col><col style="width: 83.4925%;"></col></colgroup><thead><tr style="height: 29.7969px;"><td style="height: 29.7969px;">Bezeichnung</td><td style="height: 29.7969px;">Sichtbar</td></tr></thead><tbody><tr style="height: 29.7969px;"><td style="height: 29.7969px;">Bild</td><td style="height: 29.7969px;">  
</td></tr><tr style="height: 29.7969px;"><td style="height: 29.7969px;">Aufnahme</td><td style="height: 29.7969px;">  
</td></tr><tr style="height: 29.7969px;"><td style="height: 29.7969px;">Ersteller</td><td style="height: 29.7969px;">  
</td></tr><tr style="height: 29.7969px;"><td style="height: 29.7969px;">Abteilung</td><td style="height: 29.7969px;">Codeliste: Abteilung</td></tr><tr style="height: 29.7969px;"><td style="height: 29.7969px;">Kampagne</td><td style="height: 29.7969px;">Wenn es eine gültige Kampagne gibt</td></tr><tr style="height: 86.8281px;"><td style="height: 86.8281px;">Bildnotiz1</td><td style="height: 86.8281px;">DropDown

1. Grundkonfiguartion - Sprache - &lt;Sprache&gt; - Bildnotiz1 übersetzen
2. Grundkonfiguration - Codeliste: Bildnotiz1-Übersetzung aus 1

</td></tr><tr style="height: 86.8281px;"><td style="height: 86.8281px;">Bildnotiz2</td><td style="height: 86.8281px;">DropDown

1. Grundkonfiguartion - Sprache - &lt;Sprache&gt; - Bildnotiz2 übersetzen
2. Grundkonfiguration - Codeliste: Bildnotiz2-Übersetzung aus 1

</td></tr><tr style="height: 86.8281px;"><td style="height: 86.8281px;">Bildnotiz3</td><td style="height: 86.8281px;">DropDown

1. Grundkonfiguartion - Sprache - &lt;Sprache&gt; - Bildnotiz3 übersetzen
2. Grundkonfiguration - Codeliste: Bildnotiz3-Übersetzung aus 1

</td></tr><tr style="height: 86.8281px;"><td style="height: 86.8281px;">Bildnotiz4</td><td style="height: 86.8281px;">DropDown

1. Grundkonfiguartion - Sprache - &lt;Sprache&gt; - Bildnotiz4 übersetzen
2. Grundkonfiguration - Codeliste: Bildnotiz4-Übersetzung aus 1

</td></tr><tr style="height: 86.8281px;"><td style="height: 86.8281px;">Bildcheck1</td><td style="height: 86.8281px;">DropDown

1. Grundkonfiguartion - Sprache - &lt;Sprache&gt; - Bildcheck1 übersetzen
2. Grundkonfiguration - Codeliste: Bildcheck1-Übersetzung aus 1

</td></tr><tr style="height: 86.8281px;"><td style="height: 86.8281px;">Bildcheck2</td><td style="height: 86.8281px;">DropDown

1. Grundkonfiguartion - Sprache - &lt;Sprache&gt; - Bildcheck2 übersetzen
2. Grundkonfiguration - Codeliste: Bildcheck2-Übersetzung aus 1

</td></tr><tr style="height: 86.8281px;"><td style="height: 86.8281px;">Bildcheck3</td><td style="height: 86.8281px;">DropDown

1. Grundkonfiguartion - Sprache - &lt;Sprache&gt; - Bildcheck3 übersetzen
2. Grundkonfiguration - Codeliste: Bildcheck3-Übersetzung aus 1

</td></tr><tr style="height: 86.8281px;"><td style="height: 86.8281px;">Bildcheck4</td><td style="height: 86.8281px;">DropDown

1. Grundkonfiguartion - Sprache - &lt;Sprache&gt; - Bildcheck4 übersetzen
2. Grundkonfiguration - Codeliste: Bildcheck4-Übersetzung aus 1

</td></tr></tbody></table>

Kundenspalten (Nur vorhanden, wenn man über Start-Dashboard kommt.)

{{@238#bkmrk-bezeichnung-sichtbar}}

<details id="bkmrk-faq-wie-steuere-ich-"><summary>FAQ</summary>

**Kann ich die Bilder aus der Fotodokumentation automatisch verkleinern?**

\- Ja, für den Client können die Bilder über Grundkonfiguration - Einstellungen - "Bilder aus Fotodokumentation automatisch reduzieren" auf eine geringere Größe eingestellt werden.

</details><details id="bkmrk-release-ab-version-1"><summary>Release</summary>

</details>

# Fotodetailseite

#### Übersicht

Die Fotodetailseite dient zur Anzeige und Bearbeitung eines einzelnen Fotos.

Auf der Fotodetailseite wird nur ein Foto angezeigt. Das Foto kann in der normalen Ansicht oder im Vollbild betrachtet werden. Zusätzlich können die Metadaten des Fotos angezeigt werden.

Über die Funktionen der Fotodetailseite kann das Foto geteilt bzw. lokal gespeichert und – sofern möglich – bearbeitet werden.

#### Funktionen in der Titelleiste

<table border="1" id="bkmrk-icon-erl%C3%A4uterung-erm" style="width: 82.619%; height: 176.547px;"><colgroup><col style="width: 8.78963%;"></col><col style="width: 91.0663%;"></col></colgroup><thead><tr style="height: 29.7969px;"><td style="height: 29.7969px;">Icon</td><td style="height: 29.7969px;">Erläuterung</td></tr></thead><tbody><tr style="height: 71.3906px;"><td style="height: 71.3906px;">[![image.png](https://wiki.dedesales.de/uploads/images/gallery/2025-08/scaled-1680-/EiL0LpNC64rEhING-image.png)](https://wiki.dedesales.de/uploads/images/gallery/2025-08/EiL0LpNC64rEhING-image.png)

</td><td style="height: 71.3906px;">Teilen

</td></tr><tr style="height: 75.3594px;"><td style="height: 75.3594px;">[![image.png](https://wiki.dedesales.de/uploads/images/gallery/2025-08/scaled-1680-/2N7c80IRTAL02UPA-image.png)](https://wiki.dedesales.de/uploads/images/gallery/2025-08/2N7c80IRTAL02UPA-image.png)

</td><td style="height: 75.3594px;">Speichern im lokalen Dateisystem</td></tr></tbody></table>

#### Header

<div drawio-diagram="1918"><img src="https://wiki.dedesales.de/uploads/images/drawio/2025-08/KWWibFCdaXxTBoUQ-drawing-9-1754295576.png" alt=""/></div>

1. Wechselt in den Bearbeitungsmodus

#### Fotoanzeige

Auf der Fotodetailseite wird ein einzelnes Foto angezeigt.

##### Initiale Darstellung

Das Foto wird in der initialen Darstellung:

- im richtigen Seitenverhältnis dargestellt
- auf einer schwarzen Fläche angezeigt
- zentriert dargestellt

##### Vollbilddarstellung

Das einzelne Foto kann per Klick in den Vollbildmodus gewechselt werden.

Im Vollbildmodus:

- wird das Foto im Vollbild angezeigt
- werden alle Steuerelemente ausgeblendet

Durch einen erneuten Klick wird der Vollbildmodus beendet und das Foto wieder in der initialen Darstellung angezeigt.

##### Zoom

Die Darstellung des Fotos kann per Zoom angepasst werden.

Ein Doppelklick wechselt zwischen:

- Scale to fit: Das Foto wird vollständig in den verfügbaren Bereich eingepasst
- Scale to zoom: Das Foto wird vergrößert dargestellt

Auf Geräten mit Touch-Bedienung kann das Foto zusätzlich über Pinch to zoom (Zwei-Finger-Geste) vergrößert bzw. verkleinert werden.

##### Daten und Metadaten

Auf der Fotodetailseite können die Metadaten des aktuell angezeigten Fotos angezeigt werden.

Die Daten beziehen sich ausschließlich auf das auf der Fotodetailseite angezeigte Foto.

##### PanelBar

Die PanelBar mit den Fotodaten ist nur sichtbar, wenn die Möglichkeit besteht, mindestens einen Eintrag zu bearbeiten.

Wenn kein Eintrag bearbeitet werden kann, wird die PanelBar nicht angezeigt.

##### Bearbeiten eines Fotos

Über die Funktion im Header kann in den Bearbeitungsmodus gewechselt werden.

Ob eine Bearbeitung möglich ist, hängt von den vorhandenen Bearbeitungsmöglichkeiten ab. Die PanelBar mit den Fotodaten wird nur angezeigt, wenn mindestens ein Eintrag bearbeitet werden kann.

#### Abgrenzung zu anderen Bildansichten

Die Fotodetailseite zeigt immer ein einzelnes Foto.

Sie unterscheidet sich damit vom Präsentationsmodus Fotos im Widget Fotos und vom Präsentationsmodus Produkte in der Auftragserfassung:

- Fotodetailseite: ein einzelnes Foto mit zugehörigen Metadaten.
- Präsentationsmodus Fotos: mehrere Fotos können über Thumbs ausgewählt und betrachtet werden.
- Präsentationsmodus Produkte: mehrere Produktbilder eines Produkts können in der Auftragserfassung betrachtet werden.

{{@349#bkmrk-bezeichnung-sichtbar}}

# Präsentationsmodus Fotos

Der Präsentationsmodus für Fotos dient der Darstellung von Fotos in einer vergrößerten Ansicht. Im Präsentationsmodus wird das aktuell ausgewählte Foto auf einer schwarzen Fläche dargestellt.

Im Präsentationsmodus werden keine Fotodaten angezeigt.

Der Präsentationsmodus umfasst die Bereiche Fotoanzeige, Vollbildanzeige und Fotoauswahl (Thumbs).

{{DDN-01@350#bkmrk-titel-icons}}

{{DDN-01@350#bkmrk-header}}

##### Initiale Darstellung

Beim Öffnen eines Fotos im Präsentationsmodus wird das Foto zunächst in der initialen Darstellung angezeigt.

Die initiale Darstellung hat folgende Eigenschaften:

- Das Foto wird im richtigen Seitenverhältnis dargestellt.
- Das Foto wird zentriert auf einer schwarzen Fläche dargestellt.  
    Vollbildmodus

Das Foto kann aus dem Präsentationsmodus heraus im Vollbildmodus angezeigt werden.

##### Vollbildmodus:

- Das Foto wird bildschirmfüllend dargestellt
- Es werden alle Steuerelemente ausgeblendet

Durch einen erneuten Klick wird die Vollbilddarstellung beendet und das Foto wieder in der initialen Darstellung des Präsentationsmodus angezeigt.

##### Zoom

Die Darstellung des Fotos kann vergrößert bzw. verkleinert werden.

Ein Doppelklick wechselt zwischen den Darstellungen:

- Scale to fit: Das Foto wird vollständig in den verfügbaren Bereich eingepasst
- Scale to zoom: Das Foto wird vergrößert dargestellt

Alternativ kann das Foto über Pinch to zoom, also eine Zwei-Finger-Geste, vergrößert bzw. verkleinert werden.

Foto-Daten werden im Präsentationsmodus nicht angezeigt.

##### Fotoauswahl / Thumbs

Unterhalb der Fotoanzeige befindet sich die Liste der verfügbaren Fotos. Diese Fotoauswahl wird als Thumbs bezeichnet.

Die Thumbs haben folgende Eigenschaften:

- Die Liste der Fotos ist horizontal scrollbar.
- Die Fotos werden in den Thumbs quadratisch dargestellt.
- Bei der quadratischen Darstellung werden die Fotos abhängig vom jeweiligen Quellformat zugeschnitten. Dadurch werden möglicherweise nur Teile des ursprünglichen Fotos angezeigt.
- Das aktuell ausgewählte Foto wird mittig positioniert.
- Durch die mittige Positionierung können links und rechts neben dem aktuell ausgewählten Foto teilweise nur halbe Fotos sichtbar sein.
- Befindet sich das aktuell ausgewählte Foto am Anfang der Liste, wird links davon kein weiteres Foto angezeigt.
- Befindet sich das aktuell ausgewählte Foto am Ende der Liste, wird rechts davon kein weiteres Foto angezeigt.

Die Thumbs dienen somit zur Auswahl des Fotos, das im Präsentationsmodus angezeigt wird.

# Bearbeiten / Hinzufügen eines Eintrags

#### 1. Panel Foto

<table border="1" id="bkmrk-icon-erl%C3%A4uterung-%C3%96ff" style="border-collapse: collapse; width: 100%; height: 158.578px;"><colgroup><col style="width: 10.8929%;"></col><col style="width: 89.2263%;"></col></colgroup><tbody><tr style="height: 29.7969px;"><td style="height: 29.7969px;">Icon</td><td style="height: 29.7969px;">Erläuterung</td></tr><tr style="height: 70.3906px;"><td style="height: 70.3906px;">[![image.png](https://wiki.dedesales.de/uploads/images/gallery/2025-08/scaled-1680-/3ymlKivVvXCNxrGc-image.png)](https://wiki.dedesales.de/uploads/images/gallery/2025-08/3ymlKivVvXCNxrGc-image.png)

</td><td style="height: 70.3906px;">Öffnet den Dateiexplorer um ein lokales Bild in DeDeSales zu laden</td></tr><tr style="height: 58.3906px;"><td style="height: 58.3906px;">[![image.png](https://wiki.dedesales.de/uploads/images/gallery/2025-08/scaled-1680-/6cjtGJRuCiw9IwOH-image.png)](https://wiki.dedesales.de/uploads/images/gallery/2025-08/6cjtGJRuCiw9IwOH-image.png)

</td><td style="height: 58.3906px;">Öffnet die lokale Kamera des jeweiligen Geräts</td></tr></tbody></table>

#### 2. Panel Daten

Die PanelBar Daten ist nur sichtbar, wenn das Bearbeiten von mindestens einem Eintrag möglich ist (Abteilung, Kampagne, Bildnotiz1-4, Bildcheck1-4)

#### 3. Aktionsbutton

<table border="1" id="bkmrk-name-funktion-sichtb" style="width: 100%;"><thead><tr><td style="width: 14.4219%;">Name</td><td style="width: 33.4761%;">Funktion</td><td style="width: 52.102%;">Sichtbarkeit</td></tr></thead><tbody><tr><td style="width: 14.4219%;">Speichern</td><td style="width: 33.4761%;">Speichert die aktuell hinterlegten Daten</td><td style="width: 52.102%;">Immer

</td></tr></tbody></table>