Hallo,
ich suche nach einer Möglichkeit mit pw_teaser so einen Teaser hinzubekommen.
Nach einigen Stunden ohne Erfolg, möchte ich nun fragen, ob jemand hier einen tip hat.
Also oben ist praktisch das erste Bild aus der Seite und dann der Titel und der Bodytext.
Das Bild kommt also direkt aus dem Content und nicht aus resource.
Der gesamte Teser ist dann ein Link auf die Seite, die der Teaser anzeigt und hat einen Schatten.
(Siehe angehängtes Bild)
Vielen Dank schon mal für Eure Hilfe, ich bin am verzweifeln :-)
Hallo,
bin auch gerade damit am rumbasteln.
Hast Du es schon geschafft mit der Erweiterung überhaupt auf den Content einer Seite zuzugreifen?
Ich noch nicht.
Bekomme in meinen Teaser kein Bild oder anderen Inhalt aus dem Seiteninhalt.
Alles andere geht.
Gruß
Knolle_P
Hallo Knolle,
ja im grossen Ganzen klappt es schon.
Ich habe folgendes HTML:
{namespace pw=PwTeaserTeam\PwTeaser\ViewHelpers}
<f:layout name="default" />
<f:section name="main">
<div id = "teaserbox">
<div id="teaserbox-inner">
<f:for each="{pages}" as="page">
<pw:getContent contents="{page.contents}" as="content" index="0">
<div class="teasercol std">
<div class="teaser">
<f:link.page pageUid="{page.uid}" title="{page.title}">
<f:for each="{content.image}" as="image" iteration="iterator">
<f:if condition="{iterator.isFirst} == 1">
<f:image src="{image.uid}" treatIdAsReference="1" alt="{page.title}"/>
<div>
<h3><f:format.stripTags>{content.header}</f:format.stripTags></h3>
<f:format.stripTags><f:format.crop maxCharacters="32">{content.bodytext}</f:format.crop></f:format.stripTags>
</div>
</f:if>
</f:for>
</f:link.page>
</div>
</div>
</pw:getContent>
</f:for>
</div>
</div>
</f:section>
Das zugehörige CSS sieht so aus (bitte nicht lachen):
#teaserbox { width:1220px; height:10px; margin:0 auto; margin-top:10px; }
#teaserbox-inner { float:left; width:100%; margin-top:10px; margin-bottom:10px; }
#teaserbox #teaserbox-inner .teasercol .teaser a, .teaser a:hover { display:block; color:#333; text-decoration:none; }
.teasercol { float:left; width:285px; }
.teaser { width:100%; padding:10px; background:#FFF; margin-bottom:10px; }
.teaser { width:100%; padding:0px; }
.teaser div { width:100%; padding:10px; }
.teaser div { color:#666; }
.teaser div h3 { color:#00265D; font-size:1.5em; margin:0; padding:0; margin-bottom:5px; }
.teaser div span { margin:0; padding:0; color:#666; font-size:0.85em; }
.std { margin-right:20px; }
.teaser {
-webkit-box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.55);
-moz-box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.55);
box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.55);
}
.teaser {
border-radius: 4px 4px 4px 4px;
-moz-border-radius: 4px 4px 4px 4px;
-webkit-border-radius: 4px 4px 4px 4px;
border: 0px solid #000000;
transition: box-shadow 0.2s;
-webkit-transition: box-shadow 0.2s;
}
.teaser img {
width: 100%;
height: auto;
border-radius: 4px 4px 0px 0px;
-moz-border-radius: 4px 4px 0px 0px;
-webkit-border-radius: 4px 4px 0px 0px;
border: 0px solid #000000;
}
.teaser:hover {
-webkit-box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.85);
-moz-box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.85);
box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.85);
}
.teaser { height:auto; min-height:auto; }
@media only screen and (max-width: 1200px) {
#teaserbox, #teaserbox-inner, .teasercol { width:100%; min-width:100%; padding:0; margin-left:0; margin-right:0; }
#teaserbox { margin-top:40px; }
#teaserbox-inner { padding-left:5%; padding-right:5%; width:90%; }
.teasercol { width:30%; min-width:30%; float:left; }
.teaser { float:left; width:100%; margin-left:0; margin-right:0; }
.teaser img { width:100%; min-width:100%; height:auto; min-height:auto; }
.teaser { height:auto; }
.teaser div { float:left; height:80px; min-height:80px; overflow:hidden; }
.teaser div { height:auto; min-height:auto; overflow:auto; }
.std { margin-right:2%; width:48%; }
}
@media only screen and (max-width: 590px) {
.teasercol { width:100%; min-width:100%; }
.teasercol { float:left; clear:none; }
.std { margin-right:0; width:100%; }
}
@media print {
.teasercol { display:none; visibility:hidden; }
#teaserbox { margin:0; }
}
Nur am Ende fehlt irgendwie noch ein "CRLF" oder so, da der nächste Content immer rechts drangequetscht wird und nicht unterhalb der Teaser ...
Aber dafür habe ich noch keine Idee / Antwort.