Hallo,
ich möchte eine Galerie bauen, bei der ich links die Thumnails und beim daraufklicken rechts dann das jeweilige Bild sehe.
siehe: http://p56876.typo3server.info/index.php?id=8
Im Moment habe ich das so gelöst, dass ich sowohl für die Thumnails als auch für die vergrößerte Ansicht mit dem normalen Bildelement von typo3 arbeite und die Bilder des linken Bildelementes (Thumnbnails) mit den jeweiligen Seiten der Einzelbilder verlinke. Klappt auch sehr gut. Ist bloß sehr aufwendig in der und fehleranfällig in der Pflege.
Möchte ich ein Bild wegnehmen oder die Reihenfolge ändern muss ich das auf jeder eizelnen Bildseite machen :-(
Zusätzlich setze ich für die vergrößerten Bilder noch "KJ: Image Lightbox v2" ein um die Bilder auf Wunsch noch größer darzustellen. (beim anklicken)
Nun aber zu meiner Frage.
Gibt es eine Möglichkeit die Thumbnailansicht irgendwie automatisch generieren zu lassen.Vielleicht einer Art grafischen Sitemap oder irgendein anderer Ansatz??
Kann mir jemand einen Tip geben, mit dem ich weiter machen kann. Wichtig ist nur, dass es hinter so aussieht weie auf dem oben beschriebenen Link.
Danke und ein sonniges Wochenende
Marc
thumbnails und bilder auf einer seite??
Du könntest mit der Spalte Normal und Links arbeiten. Du legst für jedes Bild eine Seite an in der du einen datensatz "Bilder" anlegst in dort das Bild reinstelltst. Die Seite mit dem Bild ist vom Typ Erweitert. Unter Media hängst Du das gleiche Bild nochmal an. In der Spalte Links legst Du eine Sitemap mit dem Typ "Menu der Unterseiten" und formatierst diese mit TS so, dass sie dir die Bilder in der Linken Spalte anzeigt, die in "Media" der unterseiten angehängt sind...
In Zukunft brauchst Du dann nur eine neue Seite mit dem Bild und dem Media anlegen und Links füllt sich das automatisch 🙂
Hallo blackpixel, danke für Deine Antwort. So ähnlich habe ich es mir schon gedacht. Ich weiß bloß leider nicht wie ich es anfangen soll, die Sitemap so in TS umzumodeln, dass es so ausieht wie in meinem Beispiel. Also immer vier Bilder nebeneinander und die diese Thmbnails 6o px hoch. Außerdem müssen die Abstände zwischen den Bildern in Spalten und Zeilen gleich sein. Geht das?
http://p56876.typo3server.info/index.php?id=8
Habe bislang noch nie mit sitemaps gearbeitet. Kann mir da jemand helfen?
Danke Marc
Im Prinzip ist das nicht schwierig. Du gibst der Spalte mit den Bildern eine feste breite, zb. 200pixel. Wenn darin 4 Bilder sein sollen pro reihe darf jedes bild max 45pixel breite haben, 5 pixel als abstand. die Sitemap kannst Du mit
tt_content.menu.20.4.1.NO {
beforeImg {
import = uploads/media/
import.field=media
import.listNum=0
width = 45
}
allWrap = <div style="float:left; margin: 0px 5px 0px 0px;"> | </div>
}
formatieren.
Unprobiert, sollte so aber durchaus möglich sein 🙂
ah, ich sehe grad dir ist die höhe wichtig... als anstatt width im ts einfach height setzen und die pixel eingeben... 🙂
Warum dafür nicht einfach die Extension wt_gallery verwenden. Die leistet genau das was du willst.
Hallo blackpixel,
danke für Deine Hilfe, leider klappt es bei mir nicht. Bestimmt mache ich noch irgendetwas falsch. ich habe alle Seiten auf erweitert umgestellt und dort das gleiche Bild hinterlegt, dass ich auf der Seite auch anzeigen möchte. Im setup des roottemplate habe ich Deine Zeilen eingefügt, habe aber auch noch Fragen um es zu verstehen:
1: import = uploads/media/
was ist das für ein Ordner. speichert er dort hinein die Bilder, die ich bei der erweiterten Seitenansicht angebe?)
2:tt_content.menu.20.4.1.NO {
was genau bedeutet 20.4.1 ??
Hallo Slang. ich würde gerne KJ: Image Lightbox v2 benutzen und das funktioniert meiner Meinung nach nicht mit wt_gallery. Außerdem habe ich lieber ein System, dass ich dann irgendwann verstehe und meinen Vorstellungen anpassen kann. Ich schau mir aber wt_gallery noch einmal genauer an. Danke für den Tip
Gruss Marc
Hier einmal das ganze Setup:
# Allgemeine TypoScript-Konfigurationen
config.linkVars = L
config.sys_language_uid = 0
config.language = en
page = PAGE
page {
typeNum = 0
config.metaCharset = utf-8
# Die Designvorlage integrieren
10 = TEMPLATE
10.template = FILE
10.template.file = fileadmin/index.html
10.workOnSubpart = DOKUMENT
stylesheet = fileadmin/include/style.css
10.marks {
##################################
# Menü
##################################
NAV = HMENU
NAV {
special = directory
special.value = 1
entryLevel = 0
1 = GMENU
1.NO = 1
1.NO {
XY = 130, 18+[16.h]
backColor = #FFFFFF
wrap = <br>|
# Text auf den Menüpunkt rendern
10 = TEXT
10.text.field = title
10.text.listNum = 0
10.fontColor = #444444
10.fontFile = fileadmin/fonts/HelveticaNeueMed.ttf
10.fontSize = 13
10.niceText = 1
10.offset = 25, 12
# Eine ggf. vorhandene zweite Textzeile
15 < .10
15.text.listNum = 1
15.offset = 25, 32
# Hilfsebene zur Berechnung der Höhe von Menüpunkten
16 < .10
16.text.case = upper
16.text.listNum = 1
16.fontSize = 20
16.offset = 1000,1000
}
1.RO < .1.NO
1.RO.10.fontColor = #a50000
1.RO.15.fontColor = #a50000
1.RO.16.fontColor = #a50000
1.CUR < .1.NO
1.CUR.backColor = #FFFFFF
1.CUR.10.fontColor = #a50000
1.CUR.15.fontColor = #a50000
1.CUR.16.fontColor = #a50000
1.CUR.20 = IMAGE
1.CUR.20.XY = 25,18
1.CUR.20.file = fileadmin/systemgrafik/activ.gif
1.CUR.20.offset = 0, 5
1.ACTIFSUB < .1.NO
1.ACTIFSUB.backColor = #FFFFFF
1.ACTIFSUB.10.fontColor = #a50000
1.ACTIFSUB.15.fontColor = #a50000
1.ACTIFSUB.16.fontColor = #a50000
1.ACTIFSUB.20 = IMAGE
1.ACTIFSUB.20.XY = 25,18
1.ACTIFSUB.20.file = fileadmin/systemgrafik/activ.gif
1.ACTIFSUB.20.offset = 0, 5
# Die zweite Ebene als Kopie der ersten Ebene beschreiben
2 < .1
2.NO {
XY = 130, 17+[16.h]
backColor = #FFFFFF
wrap = <br>|
10.fontColor = #444444
10.fontFile = fileadmin/fonts/HelveticaNeueMed.ttf
10.fontSize = 11
10.offset = 30, 10
15.offset = 30, 32
}
2.RO < .2.NO
2.RO.backColor = #ffffff
2.RO.10.fontColor = #b4b4b4
2.RO.15.fontColor = #b4b4b4
2.CUR < .2.NO
2.CUR.backColor = #ffffff
2.CUR.10.fontColor = #b4b4b4
2.ACTIFSUB < .2.NO
2.ACTIFSUB.backColor = #ffffff
2.ACTIFSUB.10.fontColor = #b4b4b4
}
##################################
# Thubs
##################################
THUB = CONTENT
THUB {
table = tt_content
select.orderBy = sorting
select.where = colPos = 1
select.languageField = sys_language_uid
select.limit = 2
}
##################################
# Inhalt
##################################
CONTENT = CONTENT
CONTENT {
table = tt_content
select.orderBy = sorting
select.where = colPos = 0
select.languageField = sys_language_uid
select.limit = 2
}
##################################
# Bildtitel
##################################
TITEL = CONTENT
TITEL {
table = tt_content
select.orderBy = sorting
select.where = colPos = 2
select.languageField = sys_language_uid
select.limit = 1
}
##################################
# Titel 1
##################################
# Einen Titel vergeben
TITEL1 = IMAGE
TITEL1.file = GIFBUILDER
TITEL1.file {
XY = 815, 22
backColor = #FFFFFF
10 = TEXT
10.text = agostino rossi
10.text.listNum = 0
10.text.listNum.splitChar = |
10.fontFile = fileadmin/fonts/Helvetica_Neue_Condensed_Bold.ttf
10.fontColor = #a50000
10.align = left
10.fontSize = 18
10.niceText = 1
10.offset = 0, 18
}
##################################
# Titel 2
##################################
# Einen Titel vergeben
TITEL2 = IMAGE
TITEL2.file = GIFBUILDER
TITEL2.file {
XY = 815, 15
backColor = #FFFFFF
10 = TEXT
10.text = photographie & achitecture
10.text.listNum = 0
10.text.listNum.splitChar = |
10.fontFile = fileadmin/fonts/Helvetica_Neue_Condensed_Bold.ttf
10.fontColor = #222222
10.align = left
10.fontSize = 13
10.niceText = 1
10.offset = 0, 12
}
}
}
##################################
# grafische Überschrift
##################################
lib.stdheader >
lib.stdheader = CASE
lib.stdheader {
key.field = header_layout
default = TEXT
default.field = header
default.wrap = <h1>|</h1>
1 = IMAGE
1.file = GIFBUILDER
1.file {
XY = 400, 20+[15.h]
backColor = #ffffff
10 = TEXT
10.text.field = header
10.text.listNum = 0
10.text.listNum.splitChar = |
10.fontFile = fileadmin/fonts/HelveticaNeueMed.ttf
10.fontColor = #444444
10.fontSize = 13
10.niceText = 1
10.offset = 20, 12
# Eine ggf. vorhandene zweite Textzeile
15 < .10
15.text.listNum = 1
15.offset = 1, 50
}
# Hilfsebene zur Berechnung der Höhe von Menüpunkten
16 < .10
16.text.case = upper
16.text.listNum = 1
16.fontSize = 20
16.offset = 1000,1000
wrap = |<br>
}
##################################
# Statistik
##################################
config.linkVars = L
config.sys_language_uid = 0
config.language = de
config.index_enable = 1
config.index_externals = 1
config.stat_apache = 1
config.stat_apache_logfile = logfile.txt
DNSLookup=1
#Begin simulate static
config.simulateStaticDocuments = 1
##################################
# Abstand zwischen Inhaltselementen
##################################
tt_content.stdWrap.wrap = <div class="ce">|</div>
##################################
# grafische Sitemap mit Thumbnails
##################################
tt_content.menu.20.4.1.NO {
beforeImg {
import = uploads/media/
import.field=media
import.listNum=0
width = 45
}
allWrap = <div style="float:left; margin: 0px 5px 0px 0px;"> | </div>
}
wt_gallery funktioniert problemlos mit der lightbox
Hallo,
jetzt habe ich es doch immerhin zum Teil hinbekommen
http://p56876.typo3server.info/11.0.html
ich habe bei sitemap "Menue of subpages to these pages (with abstract)" ausgewählt.
Das war wahrscheinlich der entscheidene Punkt.
Er zeigt mir jetzt die Bilder der Subpaes an und verlinkt diese auch. Es gibt aber noch ein paar Probleme:
1. Das Foto ist nicht verlinkt
2. Der Seitentitel (hier die Zahlen) sollen nicht nicht sichtbar sein
3. Die verlinkte Seite soll nicht in einem neuen Fenster aufgehen
Kann mir hier noch jemand weiterhelfen?
Viele Grüße
Marc