WEBVTT - generated by Video Portal TU Dortmund

1
00:00:00.040 --> 00:00:03.680
Der heutige Themen im Fokus Termin,

2
00:00:04.000 --> 00:00:07.240
der behandelt den Bildeditor,

3
00:00:07.240 --> 00:00:10.240
den wir bei uns in unserem System haben.

4
00:00:10.680 --> 00:00:13.680
Und zwar hatten wir folgende Ausgangslage.

5
00:00:14.680 --> 00:00:18.040
Grundsätzlich haben wir eine wirklich breite
Palette an

6
00:00:18.040 --> 00:00:21.040
verschiedenen Inhaltselementen bei uns im System.

7
00:00:21.760 --> 00:00:26.320
Angefangen von unseren Seitenheadern, die ein
sehr schmales Format erfordern

8
00:00:26.520 --> 00:00:30.680
bis über Kacheln, die vielleicht eher ein
quadratisches Format erfordern oder

9
00:00:30.960 --> 00:00:35.720
auch Inhaltelemente, Text und Bild rechts,
links daneben, wo man etwas freier ist

10
00:00:36.280 --> 00:00:39.400
in den Bildgrößen, die man dort auch wirklich
unterbringen kann.

11
00:00:39.760 --> 00:00:41.920
Das heißt, es ist wirklich eine breite Palette.

12
00:00:41.920 --> 00:00:45.640
Und für all diese Möglichkeiten sollte man
in irgendeiner Art und Weise

13
00:00:45.920 --> 00:00:48.160
einen entsprechenden Bildausschnitt setzen
können.

14
00:00:48.160 --> 00:00:52.480
Zudem haben wir, wenn Seitenbesucher unsere
Auftritte aufrufen,

15
00:00:52.760 --> 00:00:57.360
auch da wirklich eine große Palette an Endgeräten,
die hier im Einsatz sind.

16
00:00:57.600 --> 00:01:02.000
Auch da angefangen von Desktop PCs, wo relativ
viel Platz ist

17
00:01:02.000 --> 00:01:06.000
bis hin zu Smartphones, die ja auch in unterschiedlichsten
Größen

18
00:01:07.000 --> 00:01:10.000
und Bildschirmbreiten daherkommen, wo die Inhalte
wirklich untereinander

19
00:01:10.000 --> 00:01:15.000
rutschen in eine Spalte und man da auch noch
gänzlich andere Anforderungen hat.

20
00:01:15.000 --> 00:01:16.000
Was die Darstellung von Inhalten angeht.

21
00:01:16.000 --> 00:01:18.000
Da auch noch mal zwei Beispiele.

22
00:01:18.000 --> 00:01:19.000
Also Links sehen wir noch mal

23
00:01:19.000 --> 00:01:22.000
die Beispiele für unsere abweichenden Bildausschnitte.

24
00:01:22.000 --> 00:01:26.000
Wie schon erwähnt, einmal oben das Beispiel
für unseren Seitenheader,

25
00:01:26.000 --> 00:01:30.000
der sehr extremes Querformat aufweist und darunter
einmal

26
00:01:30.000 --> 00:01:32.000
dann unser Inhaltselement Text und Bild rechts,

27
00:01:32.000 --> 00:01:36.000
wo man das Bild natürlich in einem ganz anderen
Ausschnitt darstellen kann.

28
00:01:36.000 --> 00:01:39.000
Auf der rechten Seite auch noch mal verschiedene
Darstellungen

29
00:01:39.000 --> 00:01:42.000
für Desktop-PC, Tablet und auch für kleine
Smartphones.

30
00:01:43.000 --> 00:01:46.000
Und dem musste und sollte irgendwie Rechnung
getragen werden,

31
00:01:46.000 --> 00:01:49.000
dass man da redaktionell vernünftig auch dann
mit Bildern arbeiten kann.

32
00:01:50.000 --> 00:01:54.000
Und aus diesem Grund nutzen wir hier auch dann
den entsprechenden Bildeditor.

33
00:01:55.000 --> 00:01:56.000
Funktioniert folgendermaßen.

34
00:01:56.000 --> 00:01:59.000
Wir haben, sobald ich ein Inhaltselement einbinde,

35
00:02:00.000 --> 00:02:03.000
die Möglichkeit, einen Bildausschnitt zu setzen.

36
00:02:03.000 --> 00:02:06.000
In der Regel ist es so, wenn ich ein Bild wirklich
ergänze, werden

37
00:02:06.000 --> 00:02:10.000
auch schon standardmäßig Bildausschnitte
von TYPO3 gesetzt.

38
00:02:10.000 --> 00:02:13.000
Ich kann aber auch eigene Bildausschnitte definieren.

39
00:02:14.000 --> 00:02:16.000
Bildausschnitte in der Mehrzahl aus dem Grund,
weil

40
00:02:16.000 --> 00:02:20.000
wir können wirklich jetzt für jedes Bild,
was wir einbinden im System

41
00:02:20.000 --> 00:02:24.000
in der Regel auch einen Bildausschnitt je Geräteklasse
hinterlegen.

42
00:02:24.000 --> 00:02:27.000
Das heißt, ich kann für Smartphones einen
Bildausschnitt

43
00:02:27.000 --> 00:02:30.000
hinterlegen, für Tablet-Geräte und auch für
Desktop-PCs.

44
00:02:31.000 --> 00:02:33.000
Das Ganze funktioniert dann folgendermaßen:

45
00:02:33.000 --> 00:02:36.000
Wenn ich als Seitenbesucher zum Beispiel mit
einem Smartphone

46
00:02:37.000 --> 00:02:40.000
auf unsere Auftritte, auf eine bestimmte Seite
komme,

47
00:02:40.000 --> 00:02:41.000
dann registriert

48
00:02:41.000 --> 00:02:44.000
der Browser okay, ich bin mit einer bestimmten
Bildschirmbreite unterwegs.

49
00:02:44.000 --> 00:02:46.000
Das ist ein Smartphone.

50
00:02:46.000 --> 00:02:49.000
Und dann wird auch der entsprechende Bildausschnitt,
den ich als Redakteur

51
00:02:49.000 --> 00:02:52.000
dort für Smartphones hinterlegt habe, mit
ausgespielt.

52
00:02:53.000 --> 00:02:57.000
Wichtig zu bedenken dabei ist Es wird niemals
das Originalbild verändert.

53
00:02:57.000 --> 00:03:00.000
Das heißt, immer wenn ich ein Inhaltselement
irgendwo einbinde

54
00:03:00.000 --> 00:03:05.000
und dort auch ein Bild im Einsatz ist, dann
wird nur eine sogenannte Referenz

55
00:03:05.000 --> 00:03:09.000
erzeugt auf das Originalbild, Das heißt, die
Bildausschnitte, die ich setze,

56
00:03:09.000 --> 00:03:13.000
die werden komplett getrennt vom Originalbild,
zwischengespeichert

57
00:03:14.000 --> 00:03:17.000
und dementsprechend das Originalbild wird niemals
verändert.

58
00:03:18.000 --> 00:03:20.000
Das kann ich beliebig oft entsprechend einsetzen.

59
00:03:20.000 --> 00:03:22.000
Das ist dann der große Vorteil an dieser Stelle.

60
00:03:24.000 --> 00:03:27.000
Ja, Vorteile, die sich daraus ergeben:

61
00:03:28.000 --> 00:03:30.000
Einerseits sind wir dann mit dem Bild Editor
sehr flexibel,

62
00:03:30.000 --> 00:03:32.000
was die Nutzung von Bildern angeht.

63
00:03:32.000 --> 00:03:36.000
Wie schon gesagt, wenn ich ein Bild habe, kann
ich das wirklich, sofern

64
00:03:36.000 --> 00:03:37.000
natürlich das Bildmotiv das auch hergibt,

65
00:03:37.000 --> 00:03:41.000
das an unterschiedlichsten Stellen bei uns
im System einbinden und auch

66
00:03:41.000 --> 00:03:44.000
in unterschiedlichsten Inhaltselementen dann
entsprechend auch nutzen.

67
00:03:45.000 --> 00:03:48.000
Der Bildeditor ist ein gestalterisches Mittel
ist ein weiterer Vorteil.

68
00:03:49.000 --> 00:03:52.000
Ich kann nicht nur sagen, ich schneide mein
Bild passend

69
00:03:52.000 --> 00:03:55.000
zu, sodass es wirklich neben ein bestimmtes
Inhaltselement

70
00:03:55.000 --> 00:03:58.000
passt, sondern ich kann auch wirklich sagen,

71
00:03:58.000 --> 00:04:01.000
welches Motiv zeigt denn mein Bildausschnitt?

72
00:04:01.000 --> 00:04:03.000
Wenn ich beispielsweise ein Bild habe,

73
00:04:03.000 --> 00:04:04.000
was einen Hintergrund

74
00:04:04.000 --> 00:04:07.000
und eine Personengruppe zeigt, kann ich mich
dazu entscheiden,

75
00:04:07.000 --> 00:04:11.000
etwas mehr vom Hintergrund zu sehen, sodass
man das Gesamtmotiv in den Fokus

76
00:04:11.000 --> 00:04:11.000
rückt.

77
00:04:11.000 --> 00:04:14.000
Oder ich setze den Bildausschnitt beispielsweise
so,

78
00:04:15.000 --> 00:04:19.000
dass dann wirklich nur die Personengruppe dann
im Fokus steht

79
00:04:19.000 --> 00:04:22.000
und auf die Art und Weise kann ich natürlich
den Bildeditor

80
00:04:22.000 --> 00:04:25.000
in gewisser Weise auch als gestalterisches
Mittel einsetzen.

81
00:04:25.000 --> 00:04:27.000
Und zu guter Letzt, wie auch schon erwähnt,

82
00:04:27.000 --> 00:04:29.000
haben wir natürlich die Möglichkeit,

83
00:04:29.000 --> 00:04:32.000
das Ganze hier auch zur Optimierung für die
mobilen Endgeräte zu nutzen.

84
00:04:33.000 --> 00:04:36.000
Das zeige ich dann im Anschluss auch noch mal
in einem Livebeispiel.

85
00:04:36.000 --> 00:04:40.000
Hier ist ja vor allen Dingen die Herausforderung,
dass auf Smartphones

86
00:04:40.000 --> 00:04:44.000
alle Inhalte in einer Spalte untereinander
weg angezeigt werden.

87
00:04:45.000 --> 00:04:48.000
Und wenn wir beispielsweise viele Bilder auf
einer Seite haben,

88
00:04:48.000 --> 00:04:53.000
die eher im quadratischen Format angelegt sind,
resultiert das natürlich darin,

89
00:04:53.000 --> 00:04:56.000
dass wir, wenn wir sie nicht anpassen würden
für Smartphones,

90
00:04:56.000 --> 00:04:59.000
eine relativ lange Seite haben, wo ich als
Seitenbesucher recht

91
00:04:59.000 --> 00:05:03.000
weit und lange scrollen muss, um zu den Inhalten
zu kommen.

92
00:05:03.000 --> 00:05:06.000
Oder generell mich durchscrollen muss und da
sagt man eher,

93
00:05:06.000 --> 00:05:11.000
wenn es die Bilder hergeben, sollte man schauen,
dass man auf Smartphones dann

94
00:05:11.000 --> 00:05:15.000
eher Querformate nutzt, um dort ein bisschen
einfach an Höhe zu sparen

95
00:05:15.000 --> 00:05:16.000
an dieser Stelle.

96
00:05:16.000 --> 00:05:19.000
Dann haben wir noch die Frage gestellt “Was
ist der Bildeditor nicht?”,

97
00:05:19.000 --> 00:05:22.000
weil das oftmals auch immer zu Verwechslungen
führt.

98
00:05:23.000 --> 00:05:26.000
Der Bildeditor ist kein Bildbearbeitungsprogramm.

99
00:05:26.000 --> 00:05:27.000
Was bedeutet das?

100
00:05:27.000 --> 00:05:29.000
Wie schon gesagt, wenn ich einen Bildausschnitt
setze,

101
00:05:29.000 --> 00:05:33.000
dann bezieht sich dieser Bildausschnitt immer
nur auf die Referenz,

102
00:05:33.000 --> 00:05:34.000
also auf die eine Stelle,

103
00:05:34.000 --> 00:05:38.000
wo ich diesen Bildausschnitt jetzt gerade in
diesem Inhaltselement nutze.

104
00:05:38.000 --> 00:05:41.000
Das Originalbild bleibt immer

105
00:05:41.000 --> 00:05:44.000
im Original erhalten und der Bildeditor ist
wirklich nur dazu

106
00:05:44.000 --> 00:05:48.000
gedacht, Bilder passend zu schneiden für die
jeweilige Stelle,

107
00:05:49.000 --> 00:05:52.000
an der dann das Bild entsprechend zum Einsatz
kommt.

108
00:05:52.000 --> 00:05:55.000
Wir können mit dem Bildeditor keine dauerhaften

109
00:05:55.000 --> 00:05:59.000
Beschnitte oder Retusche-Arbeiten am Originalbild
durchführen.

110
00:05:59.000 --> 00:06:02.000
Das ist nicht Sinn und Zweck dieser ganzen
Funktion.

111
00:06:02.000 --> 00:06:04.000
Wenn wir das wirklich möchten,

112
00:06:04.000 --> 00:06:07.000
dass dort bestimmte Bildinhalte erst gar nicht
in unser System kommen -

113
00:06:08.000 --> 00:06:12.000
wenn ich ein Bild habe, wo vielleicht irgendwo
ein Straßenschild sichtbar ist

114
00:06:12.000 --> 00:06:15.000
und das soll gar nicht erst irgendwie in irgendeiner
Art und Weise zu sehen sein -

115
00:06:15.000 --> 00:06:19.000
würden wir da wirklich empfehlen, diese Bild-Retuschen
und Bild-Beschnitte

116
00:06:19.000 --> 00:06:21.000
vor dem Upload

117
00:06:21.000 --> 00:06:24.000
in das eigentliche TYPO3 System in einem anderen
Programm durchzuführen.

118
00:06:25.000 --> 00:06:28.000
Und dafür ist letzten Endes der Bildeditor
im Ursprung nicht gedacht.

119
00:06:28.000 --> 00:06:30.000
Welche Bildformate kann ich nutzen?

120
00:06:30.000 --> 00:06:34.000
Grundsätzlich alle Bildformate die man standardmäßig
nutzen sollte,

121
00:06:34.000 --> 00:06:38.000
um Bilder auf Webseiten zu bringen, also die
klassischen Formate

122
00:06:38.000 --> 00:06:41.000
JPEG, PNG, GIF, WEBP.

123
00:06:41.000 --> 00:06:44.000
Was nicht funktioniert, das ist das Vektorformat
SVG, weil

124
00:06:44.000 --> 00:06:47.000
es SVG arbeitet da ein bisschen anders, wenn
es darum geht,

125
00:06:47.000 --> 00:06:49.000
wie wird der Ausschnitt gesetzt.

126
00:06:49.000 --> 00:06:53.000
Das heißt, es kommt sich ein bisschen ins
Gehege mit unserem Bildeditor.

127
00:06:54.000 --> 00:06:58.000
Sprich: wenn wirklich dort Bildausschnitte
gesetzt werden sollten, da bitte

128
00:06:58.000 --> 00:07:02.000
dann er dann auf die oben gezeigten Bildformat
umschwenken.

129
00:07:02.000 --> 00:07:06.000
Und es wird mit dem Vektorformat sehr wahrscheinlich
nicht funktionieren

130
00:07:06.000 --> 00:07:07.000
an dieser Stelle.

131
00:07:07.000 --> 00:07:09.000
Ja, dann kommen wir auch schon zum Livebeispiel

132
00:07:09.000 --> 00:07:14.000
und ich schwenke dann einmal, um von Powerpoint
in unser Backend.

133
00:07:14.000 --> 00:07:16.000
Und zeige einmal,

134
00:07:16.000 --> 00:07:20.000
wie man so ein Bild einbindet und entsprechend
Bildausschnitte setzt.

135
00:07:20.000 --> 00:07:21.000
Wir haben jetzt eine Seite

136
00:07:21.000 --> 00:07:24.000
und auf dieser Seite befindet sich erst mal
ein Inhaltselement

137
00:07:24.000 --> 00:07:25.000
Text und Bild rechts.

138
00:07:25.000 --> 00:07:28.000
Ich habe noch kein Bild eingebunden.

139
00:07:28.000 --> 00:07:29.000
Wenn ich das jetzt mache,

140
00:07:33.000 --> 00:07:34.000
kann ich ja,

141
00:07:34.000 --> 00:07:37.000
das kennen wir alle denke ich hier unten über
Bild hinzufügen,

142
00:07:37.000 --> 00:07:40.000
ein Bild ergänzen, was sich in meinem Dateispeicher
befindet,

143
00:07:41.000 --> 00:07:44.000
und ich wähle jetzt einfach mal ein Bild aus,
was hier

144
00:07:44.000 --> 00:07:47.000
in unserem zentralen Bilderpool liegt.

145
00:07:47.000 --> 00:07:50.000
Und ohne dass ich jetzt bereits irgendetwas
getan habe,

146
00:07:50.000 --> 00:07:54.000
wenn ich jetzt hier runterscrolle, sehe ich,
hat TYPO3 mir hier drei

147
00:07:54.000 --> 00:07:57.000
standardmäßige Bildausschnitte schonmal vorgegeben.

148
00:07:58.000 --> 00:08:01.000
Einmal für Desktop-PCs, für Tablets und auch
für Mobilgeräte.

149
00:08:02.000 --> 00:08:04.000
Wenn ich nicht gewillt bin und das auch nicht
möchte,

150
00:08:04.000 --> 00:08:07.000
muss ich da eigentlich redaktionell auch gar
nicht mehr tätig werden.

151
00:08:07.000 --> 00:08:11.000
Ich zeige das jetzt einmal, das heißt, das
Bild ist jetzt schon sichtbar

152
00:08:11.000 --> 00:08:15.000
und damit hätten wir erst mal standardmäßig
ein Bild ins Spiel gebracht.

153
00:08:16.000 --> 00:08:20.000
Jetzt wollen wir mal sehen, wie man diese Bildausschnitte
dann setzen kann.

154
00:08:21.000 --> 00:08:23.000
Wenn ich jetzt sage, die standardmäßig gesetzten

155
00:08:23.000 --> 00:08:26.000
Bildausschnitte, die möchte ich so nicht haben,

156
00:08:26.000 --> 00:08:28.000
ich möchte eigene Bildausschnitte setzen,

157
00:08:28.000 --> 00:08:31.000
dann klicke ich einmal hier auf “Editor öffnen”.

158
00:08:31.000 --> 00:08:35.000
Dann haben wir einmal dieses Overlay, was sich
dann öffnet,

159
00:08:35.000 --> 00:08:38.000
und auf der linken Seite sehen wir das Originalbild,

160
00:08:39.000 --> 00:08:42.000
auf dem ich dann jetzt meine Bildausschnitte
definieren kann.

161
00:08:42.000 --> 00:08:43.000
Das kann ich machen.

162
00:08:43.000 --> 00:08:48.000
Ich habe hier immer so kleine orangene Anfasser
in den Ecken

163
00:08:48.000 --> 00:08:51.000
und hier an den Seiten meines Bildausschnitts

164
00:08:51.000 --> 00:08:54.000
und kann über diese Anfasser jetzt meinen
Bildausschnitt sozusagen ziehen

165
00:08:54.000 --> 00:08:57.000
und auch per Drag and Drop diesen Bildausschnitt
auf

166
00:08:57.000 --> 00:09:00.000
meinem Originalbild an eine beliebige Stelle
verbringen.

167
00:09:02.000 --> 00:09:05.000
Wenn wir nach rechts schauen, sehen wir auch
hier diese Dreiteilung.

168
00:09:05.000 --> 00:09:09.000
Wir können das Ganze einmal für Desktop-PCs,
einmal für Tablet-Geräte

169
00:09:09.000 --> 00:09:13.000
und einmal auch für Smartphones entsprechend
definieren.

170
00:09:13.000 --> 00:09:16.000
Und wir sehen auch für diese drei Geräteklassen

171
00:09:16.000 --> 00:09:19.000
können wir zwar nur einen Bildausschnitt setzen,

172
00:09:19.000 --> 00:09:23.000
es gibt hier aber auch bestimmte Seitenverhältnisse,
die wir vorab wählen können.

173
00:09:24.000 --> 00:09:26.000
Meistens ist auch immer eins

174
00:09:26.000 --> 00:09:30.000
standardmäßig vorgegeben und die anderen,
die wir hier zur Auswahl haben,

175
00:09:30.000 --> 00:09:34.000
die sind auch so konfiguriert, die ändern
sich je nach Inhaltselement.

176
00:09:34.000 --> 00:09:37.000
Die haben wir sozusagen vorweggenommen, weil
wir gesagt haben,

177
00:09:38.000 --> 00:09:41.000
für bestimmte Inhaltselemente eignen sich
bestimmte Seitenverhältnisse

178
00:09:41.000 --> 00:09:45.000
besonders gut und das heißt, es ist nicht
immer gesagt,

179
00:09:45.000 --> 00:09:48.000
dass Sie genau diese Seitenverhältnisse dann
sehen.

180
00:09:48.000 --> 00:09:52.000
Hier haben wir aber zur Auswahl einmal “Free”
als freies Seitenverhältnis.

181
00:09:52.000 --> 00:09:56.000
Das bedeutet, ich könnte jetzt komplett frei
wählen,

182
00:09:56.000 --> 00:09:59.000
wie mein Seitenverhältnis hier aussehen soll.

183
00:10:00.000 --> 00:10:03.000
Bei den anderen bin ich, was das Seitenverhältnis
angeht,

184
00:10:03.000 --> 00:10:07.000
einfach festgelegt auf zum Beispiel 16:9 und
egal wie ich ziehe,

185
00:10:07.000 --> 00:10:10.000
bleibt das Seitenverhältnis immer erhalten.

186
00:10:10.000 --> 00:10:14.000
Also diese festen Seitenverhältnisse, die
sind in der Regel immer dann ganz gut,

187
00:10:14.000 --> 00:10:17.000
wenn man zum Beispiel auch mit mehreren Bildern
arbeitet,

188
00:10:17.000 --> 00:10:19.000
die vielleicht auch dann identisch sein sollen.

189
00:10:19.000 --> 00:10:22.000
Und damit das Ganze eine etwas harmonisches
Gesamtbild ergibt.

190
00:10:22.000 --> 00:10:24.000
Ich könnte jetzt sagen, für meinen

191
00:10:24.000 --> 00:10:28.000
Desktop-PC nehme ich zum Beispiel ein eher
quadratisches Format.

192
00:10:28.000 --> 00:10:32.000
Für mein Tablet nehme ich jetzt mal ein 4:3
Format

193
00:10:32.000 --> 00:10:36.000
und wähle mal einen gänzlich anderen Bildausschnitt.

194
00:10:36.000 --> 00:10:39.000
Vielleicht eher so diesen Teil.

195
00:10:39.000 --> 00:10:43.000
Und für Mobilgeräte nehme ich jetzt mal ein
16:9 Format.

196
00:10:43.000 --> 00:10:47.000
Weil es dann in etwa ein Querformat ist, und
nehmen einfach mal nur den Himmel.

197
00:10:47.000 --> 00:10:50.000
Damit wir gleich in unserem Beispiel einmal
den Unterschied sehen.

198
00:10:50.000 --> 00:10:52.000
Jetzt habe ich drei komplett

199
00:10:52.000 --> 00:10:55.000
unterschiedliche Bildausschnitte für meine
Geräteklassen gewählt,

200
00:10:56.000 --> 00:10:57.000
speichere das ab

201
00:10:57.000 --> 00:11:02.000
und wie kann ich das jetzt testen - vorab -
und mir das anzeigen lassen?

202
00:11:03.000 --> 00:11:05.000
Grundsätzlich gibt es immer die Möglichkeit,

203
00:11:05.000 --> 00:11:09.000
wenn wir hier uns in der Vorschau befinden,
- ich aktualisiere das einmal -

204
00:11:10.000 --> 00:11:12.000
dann kann ich immer meinen Browser

205
00:11:12.000 --> 00:11:15.000
nutzen, um das Ganze zu simulieren.

206
00:11:15.000 --> 00:11:19.000
Wir sehen jetzt, das ist der quadratische Bildausschnitt,
den ich gesetzt habe

207
00:11:19.000 --> 00:11:21.000
für meinen Desktop-PC - das stimmt soweit,
weil

208
00:11:21.000 --> 00:11:23.000
ich habe hier eine relativ große Bildschirmbreite.

209
00:11:23.000 --> 00:11:27.000
Wenn ich jetzt einfach mal hingehe und ich
würde jetzt meinen Browser

210
00:11:27.000 --> 00:11:30.000
ein bisschen kleiner ziehen, - ich mach das
mal langsam -

211
00:11:32.000 --> 00:11:35.000
dann sehen wir irgendwann, ab einem gewissen
Punkt, bricht das Ganze um

212
00:11:35.000 --> 00:11:38.000
und wir sehen den Bildausschnitt, den wir für
Tablet-Geräte gesetzt haben,

213
00:11:38.000 --> 00:11:41.000
weil das eher so Bildschirmbreiten und Monitorbreiten
sind,

214
00:11:42.000 --> 00:11:45.000
in denen wir uns jetzt hier bewegen, wo dann
der Browser sagt, okay,

215
00:11:45.000 --> 00:11:48.000
das ist wahrscheinlich ein Tablet, deswegen
spiele ich

216
00:11:48.000 --> 00:11:52.000
diesen Bildausschnitt hier aus und wir können
auch weiter runtergehen.

217
00:11:52.000 --> 00:11:55.000
Wenn das Ganze irgendwann einspaltig wird,

218
00:11:55.000 --> 00:11:56.000
dann wird

219
00:11:56.000 --> 00:11:59.000
hier mein Bildausschnitt ausgespielt, den ich
für Mobilgeräte gesetzt habe,

220
00:11:59.000 --> 00:12:03.000
weil einfach aufgrund der Breite hier der Browser
sagt, gut, das ist sehr

221
00:12:03.000 --> 00:12:07.000
wahrscheinlich ein Smartphone, was hier auf
die Seite zugreift,

222
00:12:07.000 --> 00:12:10.000
also spiele ich den passenden Bildausschnitt
dann entsprechend aus.

223
00:12:11.000 --> 00:12:12.000
Also das ist die

224
00:12:12.000 --> 00:12:15.000
Möglichkeit, wie man das immer gegen testen
kann.

225
00:12:15.000 --> 00:12:19.000
Die andere Variante ist, wir können natürlich
hier auch im Backend

226
00:12:19.000 --> 00:12:22.000
sagen, es gibt dieses Modul “Anzeigen”.

227
00:12:22.000 --> 00:12:25.000
Und mit dem Modul “Anzeigen”, wenn ich
dann eine entsprechende Seite auswähle,

228
00:12:26.000 --> 00:12:28.000
kann ich hier oben über dieses kleine Menü

229
00:12:28.000 --> 00:12:33.000
auch verschiedene vordefinierte Geräte sozusagen
auch mir ausgeben lassen.

230
00:12:33.000 --> 00:12:37.000
Ein Computer also sprich ein Desktop-PC würde
jetzt nicht sehr viel Sinn machen,

231
00:12:37.000 --> 00:12:39.000
weil da bin ich gerade schon da kann ich einfach

232
00:12:39.000 --> 00:12:41.000
die Vorschau nutzen wir das gerade gesehen
haben.

233
00:12:41.000 --> 00:12:43.000
Ich könnte aber hier zum Beispiel auch sagen,

234
00:12:43.000 --> 00:12:46.000
wie sieht das Ganze denn auf einem iPhone 6
aus?

235
00:12:46.000 --> 00:12:49.000
Und dann würde hier der entsprechende Ausschnitt
auch dann angepasst werden.

236
00:12:49.000 --> 00:12:53.000
Also letzten Endes nichts anderes als das,
was wir auch gerade

237
00:12:53.000 --> 00:12:57.000
manuell durch Ziehen am Browserfenster erreicht
haben.

238
00:12:57.000 --> 00:12:58.000
Aber das sind so die beiden Wege,

239
00:12:58.000 --> 00:13:01.000
wie man das ganze dann letzten Endes gegen
prüfen könnte.

240
00:13:02.000 --> 00:13:05.000
Das soweit erstmal zur Standardeinbindung.

241
00:13:05.000 --> 00:13:09.000
Es gibt jetzt zwei Ausnahmen von der Regel,
die ich gerne auch zeigen würde.

242
00:13:09.000 --> 00:13:12.000
Das eine sind News und Veranstaltungen.

243
00:13:13.000 --> 00:13:16.000
News und Veranstaltungen ist ja immer so aufgebaut,

244
00:13:16.000 --> 00:13:19.000
dass wir hier jeweils eine Listenansicht haben.

245
00:13:19.000 --> 00:13:22.000
Und wenn ich jetzt zum Beispiel hier auf meine
News klicke,

246
00:13:22.000 --> 00:13:25.000
haben wir eine dazugehörige Detailansicht.

247
00:13:25.000 --> 00:13:28.000
Für beide Ansichten kann ich mich jeweils
immer entscheiden,

248
00:13:28.000 --> 00:13:31.000
ob ich dort ein entsprechendes Bild hinterlegen
möchte oder nicht.

249
00:13:32.000 --> 00:13:35.000
Und hier funktioniert der Bildeditor

250
00:13:35.000 --> 00:13:38.000
ein kleines bisschen abweichend zu dem, was
wir gerade gesehen haben.

251
00:13:39.000 --> 00:13:42.000
Das zeige ich einmal.

252
00:13:43.000 --> 00:13:46.000
So, Listen Ansicht.

253
00:13:47.000 --> 00:13:49.000
Ich gehe hier in meine News hinein

254
00:13:49.000 --> 00:13:52.000
und da kann ich ja das Bild ergänzen,

255
00:13:52.000 --> 00:13:55.000
indem ich hier auf den Reiter “Medien”
klicke.

256
00:13:55.000 --> 00:13:59.000
Und da habe ich jetzt erst mal, wir das gerade
schon im Frontend gesehen haben,

257
00:13:59.000 --> 00:14:01.000
das entsprechende Bild hinterlegt.

258
00:14:01.000 --> 00:14:05.000
Wenn ich das jetzt einmal aufklappe, dann sehen
wir, wir haben hier unten

259
00:14:05.000 --> 00:14:08.000
nicht nur drei Bildausschnitte, sondern in
der Summe vier.

260
00:14:09.000 --> 00:14:13.000
Das hat den einfachen Hintergrund, weil wir
hier natürlich in erster Instanz

261
00:14:13.000 --> 00:14:14.000
nicht schauen müssen,

262
00:14:14.000 --> 00:14:17.000
für welche Geräteklasse setze ich meinen
Bildausschnitt,

263
00:14:17.000 --> 00:14:20.000
sondern wir müssen uns einmal zuerst überlegen,

264
00:14:20.000 --> 00:14:22.000
wo wird denn dieser Bildausschnitt genutzt.

265
00:14:22.000 --> 00:14:23.000
Hat einfach der Hintergrund:

266
00:14:23.000 --> 00:14:26.000
Wir können hier nur an dieser Einstellung
Bilder hinterlegen

267
00:14:26.000 --> 00:14:29.000
und können dieses Bild nutzen, sowohl

268
00:14:29.000 --> 00:14:32.000
für die Listenansicht als auch für die Detailansicht.

269
00:14:33.000 --> 00:14:37.000
Und das sehen wir auch hier oben, wenn wir
diesen kleinen Drop Down uns anschauen.

270
00:14:37.000 --> 00:14:39.000
Dieses eine Bild, was ich jetzt hier eingebunden
habe.

271
00:14:39.000 --> 00:14:42.000
Ich kann wirklich sagen, soll das nur in der
Detailansicht sichtbar sein,

272
00:14:43.000 --> 00:14:46.000
ausschließlich in der Listenansicht oder so
das für beide Ansichten genutzt werden

273
00:14:47.000 --> 00:14:48.000
und dementsprechend

274
00:14:48.000 --> 00:14:52.000
können wir dann hier auch dann für diese
beiden Ansichten “Listenansicht”

275
00:14:52.000 --> 00:14:56.000
und auch “Detailansicht” unsere Bildausschnitte
definieren.

276
00:14:57.000 --> 00:14:59.000
Bedeutet auch wenn ich mich jetzt zum Beispiel

277
00:14:59.000 --> 00:15:02.000
dazu entscheide, dieses Bild möchte ich nur
in der Listenansicht sehen,

278
00:15:03.000 --> 00:15:07.000
dann muss ich auch nur den Bildausschnitt für
die Listenansicht konfigurieren.

279
00:15:07.000 --> 00:15:09.000
Das heißt, diese drei hier, die gibt es zwar,

280
00:15:09.000 --> 00:15:13.000
weil das System sie gerne haben möchte, aus
technischen Gründen,

281
00:15:13.000 --> 00:15:17.000
aber die kann ich komplett ignorieren, weil
ich hier oben natürlich gesagt habe:

282
00:15:17.000 --> 00:15:19.000
zeig mir das Bild bitte nur in der Listenansicht

283
00:15:19.000 --> 00:15:23.000
und dementsprechend muss ich nur diesen einen
Bildausschnitt dann beachten.

284
00:15:23.000 --> 00:15:24.000
Das wäre das eine.

285
00:15:25.000 --> 00:15:27.000
Bei den Veranstaltungen

286
00:15:27.000 --> 00:15:30.000
verhält es sich mehr oder weniger analog.

287
00:15:32.000 --> 00:15:34.000
Hier haben wir allerdings

288
00:15:34.000 --> 00:15:37.000
den Unterschied, bei den News haben wir einen
Bildausschnitt,

289
00:15:37.000 --> 00:15:41.000
der auf der Detailseite und auch für unsere
Listenansicht

290
00:15:41.000 --> 00:15:45.000
ungefähr identisch sein kann - also 2:1 vom
Bildformat her.

291
00:15:46.000 --> 00:15:49.000
Bei den Veranstaltungen ist es so

292
00:15:49.000 --> 00:15:51.000
- das zeige ich auch einmal im Frontend-,

293
00:15:51.000 --> 00:15:55.000
dass wir hier in der Listenansicht einen eher
quadratischen Bildausschnitt haben.

294
00:15:55.000 --> 00:15:59.000
Und wenn ich jetzt in die Veranstaltung hineingehe
- auf der Detailseite,

295
00:15:59.000 --> 00:16:03.000
haben wir dann auch wieder einen Bildausschnitt,
eher im Format 2:1.

296
00:16:03.000 --> 00:16:06.000
Das heißt, das weicht schon sehr stark voneinander
ab.

297
00:16:06.000 --> 00:16:09.000
Aus dem Grund wenn ich jetzt einmal hier wieder

298
00:16:09.000 --> 00:16:12.000
in meiner Veranstaltung ins Backend wechsle,

299
00:16:14.000 --> 00:16:17.000
und dort wieder in den Reiter “Medien”,

300
00:16:17.000 --> 00:16:21.000
haben wir natürlich dann auch hier zwei Bilder,
die wir hinterlegen müssen.

301
00:16:21.000 --> 00:16:25.000
Und zwar einmal haben wir ein Bild hier oben
für meine Listenansicht.

302
00:16:26.000 --> 00:16:26.000
Und hier

303
00:16:26.000 --> 00:16:30.000
muss ich wirklich sagen dann eins zu eins an
dieser Stelle.

304
00:16:30.000 --> 00:16:32.000
Das ist ein quadratisches Format

305
00:16:32.000 --> 00:16:36.000
für das gerade gesehen haben und ich habe
ein Bild für meine Detailansicht

306
00:16:37.000 --> 00:16:39.000
und da wähle ich dann zwei zu eins

307
00:16:39.000 --> 00:16:42.000
vom Format her.

308
00:16:42.000 --> 00:16:44.000
Das wäre so die eine große Ausnahme.

309
00:16:44.000 --> 00:16:46.000
News und Veranstaltung.

310
00:16:46.000 --> 00:16:48.000
Die zweite Ausnahme,

311
00:16:48.000 --> 00:16:51.000
geht aber so ein bisschen in die gleiche Richtung,
ist bei den Seitenheadern.

312
00:16:51.000 --> 00:16:53.000
Das kann ich auch einmal zeigen.

313
00:16:53.000 --> 00:16:56.000
Ich wechsle zurück zu meiner Seite “Text
und Bild

314
00:16:56.000 --> 00:16:59.000
rechts”.

315
00:17:01.020 --> 00:17:04.020
Da haben wir aktuell noch, wenn ich noch mal
die Vorschau aufrufe,

316
00:17:04.020 --> 00:17:10.020
hier oben ein Headerbild von einem Vogel auf
einem frühlingshaften Ast.

317
00:17:10.020 --> 00:17:13.020
Und wenn ich dieses Header Bild nun wechseln
wollte,

318
00:17:15.020 --> 00:17:18.020
das kennen wir ja auch, gehe ich in die Seiteneigenschaften.

319
00:17:18.020 --> 00:17:21.020
dann einmal in den Reiter “Ressourcen”

320
00:17:21.020 --> 00:17:24.020
und könnte jetzt hier ein abweichendes Headerbild
hinterlegen.

321
00:17:25.020 --> 00:17:27.020
Das mache ich einmal um das zu zeigen.

322
00:17:27.020 --> 00:17:28.020
Ich nehme jetzt auch wieder mein Beispielbild.

323
00:17:31.020 --> 00:17:33.020
So. Und wenn ich jetzt hier runterscrolle,
sehen wir auch hier,

324
00:17:33.020 --> 00:17:35.020
es sind nicht drei Bildausschnitte,

325
00:17:35.020 --> 00:17:39.020
die TYPO3 mir standardmäßig gesetzt hat,
sondern es sind mehrere.

326
00:17:40.020 --> 00:17:41.020
Das hat auch da wieder einen Grund.

327
00:17:41.020 --> 00:17:43.020
Ähnlich wie bei News und Veranstaltungen

328
00:17:43.020 --> 00:17:47.020
überlegen wir uns hier nicht im ersten Schritt,
für welche Geräteklasse

329
00:17:47.020 --> 00:17:50.020
hinterlege ich meinen Bildausschnitt, sondern
wir überlegen uns

330
00:17:50.020 --> 00:17:53.020
im allerersten Schritt, auf welcher Seite befinde
ich mich gerade?

331
00:17:53.020 --> 00:17:56.020
Befinde ich mich auf der Startseite meines
Auftritts

332
00:17:56.020 --> 00:17:58.020
oder befinde ich mich auf einer Unterseite?

333
00:17:58.020 --> 00:18:03.080
Auch hier hat das den technischen Hintergrund,
das TYPO3 an dieser Stelle

334
00:18:03.080 --> 00:18:06.080
alle möglichen Bildausschnitte einmal braucht

335
00:18:06.080 --> 00:18:08.080
und sich dann den passenden aussucht.

336
00:18:08.080 --> 00:18:10.080
Wir haben das aus dem Grund auch relativ eindeutig
benannt.

337
00:18:10.080 --> 00:18:14.080
Also wenn wir uns jetzt auf unserer Startseite
befinden würden,

338
00:18:14.080 --> 00:18:17.080
gibt es hier zwei Bildausschnitte, die wir
dann auch wirklich nur beachten

339
00:18:17.080 --> 00:18:20.080
müssen: Startseite Desktop und Startseite
Tablet.

340
00:18:21.080 --> 00:18:23.080
Aktuell befinden wir uns auf einer Unterseite.

341
00:18:23.080 --> 00:18:27.080
Dementsprechend müssen wir auch nur diese
drei Bildausschnitte für die Unterseite

342
00:18:27.080 --> 00:18:30.080
mit berücksichtigen und können die anderen
gänzlich außer Acht lassen.

343
00:18:31.080 --> 00:18:33.080
Die beiden letzten, die haben wir auch

344
00:18:33.080 --> 00:18:37.080
aus diesem Grund an den Schluss gestellt, betreffen
dann nur den Hauptauftritt.

345
00:18:37.080 --> 00:18:39.080
Ich denke, das wird für die wenigsten hier
infrage kommen.

346
00:18:39.080 --> 00:18:41.080
Die meisten haben hier ihren eigenen Auftritt,

347
00:18:41.080 --> 00:18:43.080
für den sie dann letzten Endes redaktionieren.

348
00:18:43.080 --> 00:18:48.080
Und wenn ich jetzt hier einen Bildausschnitt
setzen wollen würde.

349
00:18:48.080 --> 00:18:51.080
Wir befinden uns gerade auf einer Unterseite,

350
00:18:51.080 --> 00:18:53.080
muss ich auch, wie gesagt, nur diese drei hier

351
00:18:54.080 --> 00:18:55.080
berücksichtigen.

352
00:18:55.080 --> 00:18:58.080
Unterseite Desktop, Tablet und auch mobile.

353
00:18:59.080 --> 00:19:02.040
Könnte dann meinen entsprechenden Bildausschnitt
hier zurechtziehen,

354
00:19:03.040 --> 00:19:07.040
speichern und dann habe ich den Seitenheader
entsprechend angepasst.

355
00:19:07.040 --> 00:19:09.040
An dieser Stelle.

356
00:19:09.040 --> 00:19:12.040
So, das zu den Ausnahmen.

357
00:19:12.040 --> 00:19:14.040
Jetzt schaue ich noch einmal.

358
00:19:14.040 --> 00:19:19.040
Wir haben dann noch Anwendungsbeispiele, die
ich gerne einmal zeigen wollen würde.

359
00:19:20.040 --> 00:19:22.040
Und dann sind wir auch schon bei der Fragerunde.

360
00:19:22.040 --> 00:19:25.040
Und zwar Anwendungsbeispiele, drei In der Summe.

361
00:19:26.040 --> 00:19:28.040
Einmal die Optimierung für mobile Endgeräte,

362
00:19:28.040 --> 00:19:32.040
die ich ja schon angesprochen hatte, dann noch
einmal Seitenheader

363
00:19:32.040 --> 00:19:35.040
und auch das Menü-Teaser-Bild zeige ich gleich
einmal kurz

364
00:19:35.040 --> 00:19:38.040
und auch die Bildkacheln als Anwendungsbeispiel.

365
00:19:39.040 --> 00:19:42.040
Das habe ich auch da im Backend einmal vorbereitet.

366
00:19:43.040 --> 00:19:46.040
Und zwar einmal die Optimierung für mobile
Endgeräte.

367
00:19:46.040 --> 00:19:49.040
Da hatte ich ja eingangs schon gesagt, auf
Smartphones

368
00:19:49.040 --> 00:19:52.040
sollte man eher auf ein Querformat umsteigen.

369
00:19:52.040 --> 00:19:53.040
Das zeige ich jetzt auch einmal.

370
00:19:53.040 --> 00:19:57.040
Das ist eine Seite, wo ich wirklich bei allen
vier

371
00:19:57.040 --> 00:19:59.040
Inhaltselementen, die ich hier beispielhaft
auf der Seite

372
00:19:59.040 --> 00:20:03.000
habe, ausschließlich quadratische Bildausschnitte
genutzt habe.

373
00:20:03.000 --> 00:20:06.000
Für alle drei Geräteklassen.

374
00:20:06.000 --> 00:20:09.000
Soll einfach mal zeigen, wie das aussieht,
wenn es nicht wirklich optimiert ist.

375
00:20:09.000 --> 00:20:13.000
Ich gehe jetzt mal auf eine Breite, die eher
ein Smartphone entspricht.

376
00:20:14.000 --> 00:20:15.000
Hier müsste ich natürlich schon

377
00:20:15.000 --> 00:20:19.000
etwas weiter scrollen, um mir alle Texte auf
der Seite zu erschließen,

378
00:20:19.000 --> 00:20:22.000
weil die Bilder für sich genommen schon relativ
viel Platz

379
00:20:22.000 --> 00:20:25.000
von meinem Bildschirm wegnehmen, von der Höhe
her alleine.

380
00:20:25.000 --> 00:20:27.000
Wenn ich mir vorstelle, ich habe nicht nur
vier Bilder

381
00:20:27.000 --> 00:20:29.000
auf der Seite, sondern vielleicht acht oder
auch

382
00:20:29.000 --> 00:20:31.000
zehn, kann da durchaus auch schon mal vorkommen.

383
00:20:31.000 --> 00:20:34.000
Oder vielleicht Bilder in einem extrem Hochformat.

384
00:20:34.000 --> 00:20:38.000
Dann ist das natürlich etwas, was für Seitenbesucher
nicht sehr schön ist

385
00:20:39.000 --> 00:20:42.000
und dementsprechend habe ich jetzt die selbe
Seite hier auch

386
00:20:42.000 --> 00:20:44.000
für mobile Endgeräte optimiert.

387
00:20:46.000 --> 00:20:48.000
Auch hier habe ich für Desktop-PCs

388
00:20:48.000 --> 00:20:52.000
einen quadratischen Bildausschnitt gesetzt,
aber für die mobilen Geräte

389
00:20:52.000 --> 00:20:54.000
einen Bildausschnitt im Querformat.

390
00:20:54.000 --> 00:20:57.000
Und das ist natürlich dann, wenn ich jetzt
mit einem Smartphone hier

391
00:20:57.000 --> 00:21:00.060
auf die Seite komme, schon mal etwas komfortabler,
weil ich auch einfach

392
00:21:00.060 --> 00:21:03.060
zwar trotzdem das Bild wahrnehme und auch den
Bildinhalt sehe,

393
00:21:04.060 --> 00:21:06.060
aber ich habe einfach nicht so viel

394
00:21:06.060 --> 00:21:09.060
Fläche, auf der ich dann scrollen muss und
kann mir auch die Inhalte

395
00:21:09.060 --> 00:21:11.060
etwas schneller erschließen. An dieser Stelle.

396
00:21:11.060 --> 00:21:13.060
Immer vorausgesetzt natürlich,

397
00:21:13.060 --> 00:21:16.060
dass das jeweilige Bild auch so für ein Querformat
geeignet ist.

398
00:21:17.060 --> 00:21:19.060
Das ist natürlich auch nicht immer bei jedem
Bild der Fall,

399
00:21:19.060 --> 00:21:24.060
aber wenn das Bild das wirklich hergibt, ist
das ein sehr guter Ansatz,

400
00:21:24.060 --> 00:21:27.060
um den Leuten da ein bisschen das Leben zu
erleichtern.

401
00:21:28.060 --> 00:21:29.060
So, dann das nächste Beispiel.

402
00:21:29.060 --> 00:21:31.060
Das wären die Bildkacheln.

403
00:21:33.060 --> 00:21:33.060
Die kann

404
00:21:33.060 --> 00:21:37.060
man zum Beispiel nutzen, um solche Teaser ins
Leben zu rufen.

405
00:21:37.060 --> 00:21:40.060
Also im Prinzip, wenn ich auf einer Übersichtsseite
bin

406
00:21:40.060 --> 00:21:43.060
mit verschiedenen Unterseiten, könnte ich
hier

407
00:21:43.060 --> 00:21:47.060
sagen, ich benutze so ein 2:1 Format und kann
die Kacheln dann verlinken.

408
00:21:47.060 --> 00:21:50.060
Die werden ja auch durchaus gerne mal auf Startseiten
benutzt zu diesem Zweck.

409
00:21:51.060 --> 00:21:55.060
Ich kann aber auch mit dem Bildeditor sagen,
ich wähle ein abweichendes Format

410
00:21:55.060 --> 00:21:55.060
für meine Bilder.

411
00:21:55.060 --> 00:21:57.060
Da gibt es auch die Möglichkeit,

412
00:21:57.060 --> 00:22:01.020
dann ein eher Hochkantformat für Porträtfotos
zu nutzen

413
00:22:01.020 --> 00:22:05.020
und kann die Bildkacheln dann auch nutzen,
um vielleicht eine Übersichtsseite

414
00:22:05.020 --> 00:22:09.020
von meinem Team zu erzeugen und von dort aus
auf Personendetailseiten abzuspringen.

415
00:22:10.020 --> 00:22:13.020
Wir empfehlen zwar immer, da an dieser Stelle
dann das

416
00:22:13.020 --> 00:22:15.020
Kontakteplugin zu nutzen, aber das ist durchaus

417
00:22:15.020 --> 00:22:20.020
auch ein Anwendungsfall, der in unseren Auftritten
vorkommt.

418
00:22:20.020 --> 00:22:21.020
Deswegen haben wir irgendwann

419
00:22:21.020 --> 00:22:25.020
auch für die Bildkacheln dieses Hochformat
entsprechend ermöglicht.

420
00:22:25.020 --> 00:22:26.020
Ich kann das noch mal zeigen.

421
00:22:26.020 --> 00:22:29.020
Das würde ich ganz normal, wie wir das vorhin
auch schon gesehen haben,

422
00:22:30.020 --> 00:22:31.020
im Bildeditor auswählen.

423
00:22:31.020 --> 00:22:34.020
Und wenn ich jetzt hier mal in mein Inhaltselement
hineingehe.

424
00:22:37.020 --> 00:22:40.020
Ich klappe hier mal eine Kachel auf.

425
00:22:40.020 --> 00:22:44.020
Nun haben wir hier wieder den aktuellen Bildausschnitt
hier im Verhältnis 2:1

426
00:22:45.020 --> 00:22:48.020
und im Editor haben wir hier auch dann ein

427
00:22:49.020 --> 00:22:52.020
Format für Hochkantfotos

428
00:22:52.020 --> 00:22:53.020
oder auch ein quadratisches Format.

429
00:22:53.020 --> 00:22:54.020
Also das würde

430
00:22:54.020 --> 00:22:58.020
könnte ich relativ einfach auch da über den
Bildeditor regeln und ins Leben rufen.

431
00:22:59.020 --> 00:23:03.080
Und zu guter Letzt als Beispiel einmal den
Seitenheader

432
00:23:03.080 --> 00:23:06.080
und auch das Menü-Bild

433
00:23:07.080 --> 00:23:09.080
ist auch ein sehr schönes Anwendungsbeispiel.

434
00:23:09.080 --> 00:23:12.080
Gerade wenn man vielleicht sagt,

435
00:23:12.080 --> 00:23:15.080
wir haben verschiedene Kategorien auf unseren
Auftritten

436
00:23:15.080 --> 00:23:18.080
und für jede Kategorie, die ich

437
00:23:18.080 --> 00:23:22.080
- ich switche mal kurz in das Frontend - hier
oben für die Kategorie,

438
00:23:22.080 --> 00:23:23.080
die hier im Hauptmenü erscheint,

439
00:23:23.080 --> 00:23:26.080
möchte ich ein einheitliches Seitenheaderbild
haben

440
00:23:26.080 --> 00:23:27.080
und vielleicht auch hier

441
00:23:27.080 --> 00:23:31.080
so ein Vorschaubild im Menü, was genau auch
zum Seitenheaderbild passt.

442
00:23:32.080 --> 00:23:34.080
Dann könnte ich das ins Leben rufen, indem
ich auch hier

443
00:23:34.080 --> 00:23:38.080
in den Seiteneigenschaften meiner Seite im
Reiter “Ressourcen” sage:

444
00:23:39.080 --> 00:23:41.080
Ich hinterlege jetzt einmal hier so ein Headerbild.

445
00:23:41.080 --> 00:23:43.080
Das habe ich schon mal vorbereitet

446
00:23:44.080 --> 00:23:47.080
- Und hinterlege das gleiche Bild hier unten.

447
00:23:47.080 --> 00:23:50.080
Einmal als Menü Teaser, Bild

448
00:23:50.080 --> 00:23:53.080
Und auf die Art und Weise könnte ich jetzt

449
00:23:53.080 --> 00:23:56.080
für meine Seiten hier oben auf der ersten
Navigationsebene.

450
00:23:57.080 --> 00:24:00.040
So könnte ich jetzt sagen, ich hätte hier
im Menü ein Bild

451
00:24:00.040 --> 00:24:03.040
und hätte das identische Bild für meine Seiten,

452
00:24:03.040 --> 00:24:08.040
die sich unterhalb dieser Seite im Hauptmenü
befinden.

453
00:24:08.040 --> 00:24:12.040
Also das wäre auch so ein Anwendungsfall,
um da vielleicht dann den Bildeditor

454
00:24:12.040 --> 00:24:15.040
von nutzen zu können, um mit einem Bild dann
halt auch verschiedene Inhalte

455
00:24:16.040 --> 00:24:16.040
zu befüllen.