Zum Inhalt springen

Wie setze ich eine (Referenz-) Liste mit Bildern um?

Erstellt am 15. August 2006 · 15 Antworten · letzte Antwort am 15. August 2006

Tags: Bilder, Frage

burzum ·

Ich habe folgendes Konstrukt:

Eine Seite die eine Liste aller Unterseiten ausgeben soll und zu jeder Unterseite ein dafür definiertes oder darin enthaltenes (k.A. was einfacher und besser wäre) Bild anzuzeigen.

Der Thumbnail von dem Bild soll bei einem Mouseover ein größeres Bild zeigen. Den Effekt selbst realisiere ich mit CSS (ja das geht), allerdings habe ich k.A. wie ich das in Typo3 irgendwie umsetzen kann das ich ein zweites Bild dafür habe oder ein Bild das verschieden groß (physisch nicht per width & height) ausgegeben wird.

Geht das? Falls ja WIE?

einpraegsam.​net ·

- Selber Stricken in einer Extension
- Oder tt_news verwenden (dann sind die Unterseiten aber auch in tt_news)
- Oder ein Menü in TS mit Bildern basteln

Was mich interessiert -

wie machst du die Bilder per hover größer?

Wenn man z.B. einem Bild eine Klasse "test" gibt, dann kann man im CSS per

.test:hover { width: 200px }

eine breitere Größe vergeben, funktioniert jedoch nur auf modernen Browsern
(also nicht im IE 6)

Unbekannter Benutzer ·

Ich kann ja nur spekulieren, aber ich würds mit divs lösen, die als background das Bild haben, dann kann ich das ja auch tauschen.

Die Bilder kannst du dir über das Media Feld der Seiten holen.

burzum ·

@wunschtacho

Dann kommt das leider nicht in Frage wenn es im IE6 nicht geht. Normal kümmert mich der "Browser" einen Sche... aber bei meiner Seite die auch als Referenz für Kunden dienen soll geht das wohl kaum... 😉

a.photo{
    position:relative; /*this is the key*/
    z-index:24; 
	/* background-color:#ccc; */
    color:#000;
    text-decoration:underline;
}

a.photo:hover{
	z-index:25; 
	background-color:#ccc;
}

a.photo span{
	display: none;
}
a.photo:hover span{ /*the span will display just on :hover state*/
    display:block;
    position:absolute;
    top:40px; 
	left:10px; 
    background-color:#E0E0E0;
	padding:3px; 
	color:#000;
	border:8px solid #626262;
    text-align: center;
}

Das ganze wird dann so angewand:

<a href="#" class="photo"><img src="sendimage.php?pic=4082884a2056dfdf3cc77e2e15dcbc7d_thumb" alt="Photo" class="photo" /><span><img src="sendimage.php?pic=4082884a2056dfdf3cc77e2e15dcbc7d"

@steffenk & Kitsunet
Örks, also eine Extension wollte ich nicht gleich zu Anfang schreiben... Ich kann zwar php allerdings sieht es nach viel Arbeit aus eine Extension für Typo3 zu schreiben. Besonders wenn man erst ein paar Tage mit Typo3 rumspielt und nur mal eben über den Source eine bestehenden Extension (th_mailformplus) geschaut hat. Im schlimmsten Fall, *seufz*, gibts irgendwo ein gutes Tutorial bei dem man eine kleine Beispielextension programmiert?

Unbekannter Benutzer ·

Um die Bilder aus dem Media-Feld zu nehmen ist nur ein etwas komplizierterer TS-Code nötig, da brauchst du keine Extension schreiben. Ich bin gerade unterwegs, ich werde aber versuchen, später mal ein bisschen TS-Code zu posten, der dir weiterhelfen sollte...

Unbekannter Benutzer ·

Ansatz 1 über afterImg:

lib.archivmenu = HMENU
lib.archivmenu {

1 = TMENU
1.expAll = 1
1.wrap = <div id="archived"><ul>|</ul></div>
1.NO {
afterImg {
import.data = field:media
import = uploads/media/
field.listNum = 0


}
afterImgLink = 1
wrapItemAndSub = <li>| </li>
}

Wobei dir das eigentlich schon reichen müsste... Man könnte auch über ein after.cObject gehen...
afterImg und after.cObject, gibts jeweils auch nochmal als before, halt je nach dem ob du das Bild vor oder nach dem Text haben willst...

Alles wissenswerte für dich findest du hier:

https://docs.typo3.org/m/typo3/reference-typoscript/main/en-us/ContentObjects/Hmenu/Tmenu/Tmenuitem.html

Wichtig ist der Bereich aus meinem TS-Code:

import.data = field:media
import = uploads/media/
field.listNum = 0

Da wird ein Bild aus dem Mediafeld der Seite zu der der Link gehört genommen. Mit field.listNum gibst du an welches Bild er nimmt... 0 ist das erste. Da du ja zwei Bilder brauchst wird die ganze Sache schon etwas komplizierter, da müsstest du dann doch mit dem cObject arbeiten und daraus ein COA machen mit den zwei Bildern und entsprechendem Wrap...
Typo kann auch über ImageMagick Bilder verkleinern, du könntest also auch nur ein Bild hochladen und dann die kleinere Version von TYPO erstellen lassen...

burzum ·

Okeee, wie baue ich das Ganze nun ein?

Ich habe folgenden TS-Code in meiner ersten Seite auf der ersten Ebene

Setup:

config.doctype = xhtml_strict
config.xhtml_cleaning = all
config.htmlTag_langKey = de
config.simulateStaticDocuments = 0
config.disableAllHeaderCode=1
#config.removeDefaultJS = 1
#config.removeDefaultJS = external
#config.inlineStyle2TempFile = 1
#config.disablePrefixComment = 0 

# Default PAGE object
page = PAGE
page.10 = TEMPLATE 
page.10 {
	template = FILE
	template.file = uploads/tf/kd2index.html
	workOnSubpart = DOCUMENT
}

lib.stdheader.stdWrap.space >
lib.stdheader.10.stdWrap.wrap =

page.10.subparts.MENU < tmp.HAUPTNAVIGATION
page.10.subparts.FOOTER < tmp.FOOTERNAVIGATION
page.10.subparts.CONTENT < styles.content.get

Include static:
content (default)

Include static (from extensions):
CSS Syteld content (css_styled_content)

Include basis template:
Hauptnavigation
Footernavigation

Genauso habe ich jetzt die Seite aufgebaut in der ich die Liste benutzen möchte, nur eben mit page.20 und page.10.subparts.CONTENT < lib.archivmenu

Deinen Scriptcode habe ich, genauso wie Hauptnavigation und Footernavigation in einem Systemordner untergebracht und in der Seite in der sie erscheinen soll via
Und Include basis template: Liste eingefügt.

Ausgegeben wird allerdings nichts - der Contentbereich bleibt leer. 🙁

Was mache ich falsch?

Unbekannter Benutzer ·

du musst dem Menü sagen, wo es anfangen soll... Am einfachsten mit

lib.archivmenu = HMENU
lib.archivmenu {
special = directory
special.value = #HIER DIE PID DER SEITE MIT DEN UNTERSEITEN
# REST WIE SCHON GEPOSTET
burzum ·

#angry# Ok, wieder was gelernt.

Ich habe den Code hinzugefügt und noch den Pfad geändert, denn wie ich bemerkt habe, speichert der Contenttyp "Text mit Bild" das Bild nicht in /media/ sondern in /pics/ kann sein sein das ich die Zeile import.data = field:media auch noch in field:pics ändern muß? -- Edit -- Ok, habs probiert, geht auch nicht. Nach wie vor keine Ausgabe.

lib.archivmenu = HMENU
lib.archivmenu {
special = directory
special.value = 6
{
    2 = TMENU
    2.expAll = 1
    2.wrap = <div id="archived"><ul>|</ul></div>
    2.NO 
    {
        afterImg 
        {
            import.data = field:media
            import = uploads/pics/
            field.listNum = 0
        }
        afterImgLink = 2
        wrapItemAndSub = <li>| </li>
    }
}

Außerdem habe ich noch bemerkt das nun alle Referenzseiten unterhalb der auflistenden Seite ja auch die Liste als Template kriegen. Wie kann ich das Template nur auf die eine Seite beschränken?

steffenk ·

das Feld media sind die Bilder, die man in den Seiteneigenschaften unter Files angeben kann (Seitentyp muss erweitert sein)