Hallöchen,
ich habe mal wieder ein Problem.
Mit Typo3 4.5 ist es ja möglich mit directImageLink und linkParams die perfectlightbox o.Ä. by default setzen. Was auch sehr gut ist.
Nun habe ich in ein bestimmtes Contentelement die ad-gallery per reinen Typoscript integriert.
Eine Sache will einfach nicht klappen.
1.imageLinkWrap {
linkParams.ATagParams.dataWrap.override = class="ad-gallery" rel="ad-gallery"
linkParams.ATagParams.dataWrap.override.if.value = 1
linkParams.ATagParams.dataWrap.override.if.equals.field = layout
}
Klappt für alle Bilder, nur nicht für das erste. Da bleibt rel="lightbox[lb???]" bestehen, was natürlich doof ist.
Packe ich die perfectlightbox static TS vor meine Änderung, wird nur lightbox generiert.
Packe ich sie nach meine Änderung, bleibt das erste Bild lightbox.
Hat jemand ne Idee?
LG
Charly
Hallo charly21,
linkParams habe ich nicht in der TS-Referenz für imageLinkWrap gefunden, ist das neu?
imageLinkWrap.enable = 1 // nicht vergessen.
imageLinkWrap.typolink.ATagParams = class="xy"
so in etwa könnte es gehen.
Hi udowald,
in der aktuellen Version 4.6.0 Doku stehts drin:
https://docs.typo3.org/m/typo3/reference-typoscript/main/en-us/Functions/Index.html
falls die mal nicht erreichbar ist:
imageLinkWrap
...
Since TYPO3 4.5 it is also possible to display the image in a lightbox instead of using showpic.php. See the property "linkParams" below for a short instruction.
...
Property: directImageLink
Data type: boolean /stdWrap
Description: If true, a link to the generated image file will be returned directly (which means that showpic.php will not be used).
Default: 0
Property: linkParams
Data type: ->typolink
Description:
Allows manipulation of the generated typolink, if JSwindow is not used.
Example:
JSwindow = 0
directImageLink = 1
linkParams.ATagParams.dataWrap = class="{$styles.content.imgtext.linkWrap.lightboxCssClass}" rel="{$styles.content.imgtext.linkWrap.lightboxRelAttribute}"
With these options it is easy to use a lightbox of your choice to display resizable images in the frontend: You only need to integrate the lightbox by including its JS and CSS files and to activate it for certain links (e.g. for links with the class "lightbox").
udowald schriebimageLinkWrap.enable = 1 // nicht vergessen.
imageLinkWrap.typolink.ATagParams = class="xy"
dies möchte ich aber nur, wenn ein bestimmtes Feld im Content ausgewählt wurde. In meinem Beispiel das Feld layout aus tt_content.
An allen anderen Stellen kann ich mit override = xxxx arbeiten.
Das ist mein Stand mit deinen Änderungen.
linkParams.ATagParams.dataWrap.override = klappt für alle Bilder, nur nicht für erste!!
1.imageLinkWrap.override = 1
1.imageLinkWrap.override.if.value = 1
1.imageLinkWrap.override.if.equals.field = layout
1.imageLinkWrap {
enable.override = 1
enable.override.if.value = 1
enable.override.if.equals.field = layout
}
1.imageLinkWrap {
linkParams.ATagParams.dataWrap.override = class="ad-gallery" rel="ad-gallery"
linkParams.ATagParams.dataWrap.override.if.value = 1
linkParams.ATagParams.dataWrap.override.if.equals.field = layout
}
LG
Charly
Hallo charly21,
ok, ich hatte linkParams noch nicht gebraucht. Gibt es ab 4.5. Danke für den Hinweis.
Ich kenne deinen kompletten Code leider nicht aber der folgende Code klappt bestens.
// Enable lightbox with typoscript
tt_content.image.20.1.imageLinkWrap {
JSwindow = 0
directImageLink = 1
linkParams.ATagParams {
dataWrap = class = "lightbox" rel="lightbox{field:uid}"
}
}
// Override Params with condition
tt_content.image.20.1.imageLinkWrap {
enable.override = 1
linkParams.ATagParams.dataWrap {
override = class="ad-gallery" rel="ad-gallery"
override.if.value = 1
override.if.equals.field = layout
}
}
override wird nur einmal eingeschaltet mit enable.
Hi udowald,
hab meinen Code mal angepasst und das doppelte override entfernt.
Den "kleinen" Fehler habe ich auch gefunden, warum das erste Bild immer noch mit der lightbox in rel stand.
Ich habe im CE image ClickEnlarge aktiviert und es nicht einfach nur übers TS gesteuert.
In deinem TS war auch noch ein kleiner Fehler drin. bei enable muss override dann auch conditions haben, sonst greift es nicht.
Aber deine Hilfe war Gold wert!!!!
Für alle, die sich in Zukunft sparen wollen eine ext für ad-gallery zu installieren und dies direkt über das TS zu steuern, werde ich die Tage das TS und die Sourcen zur Verfügung stellen.
// Override Params with condition
1.imageLinkWrap {
enable.override = 1
enable.override.if.value = 1
enable.override.if.equals.field = layout
linkParams.ATagParams.dataWrap {
override = class="ad-gallery" rel="ad-gallery"
override.if.value = 1
override.if.equals.field = layout
}
}
LG
Charly
So, endlich mal Zeit.....
hier also der Code. Vielen Dank auch an hendrik (kern23) der mir die Idee und den Ausgangscode geliefert hat.
[b]PAGE TSConfig[/b]
TCEFORM.tt_content.layout {
addItems.57 = Ad Gallery
}
TS Template : tt_content.image.20 if layout 57
// fix render method
tt_content.image.20.renderMethod.override = ul
tt_content.image.20.renderMethod.override.if.value = 57
tt_content.image.20.renderMethod.override.if.equals.field = layout
tt_content.image.20 {
imgObjNum = 1 |*| 2 |*| 3
// amount of columns for displaying images
cols.override = 1
cols.override.if.value = 57
cols.override.if.equals.field = layout
noRows.override = 1
noRows.override.if.value = 57
noRows.override.if.equals.field = layout
addClasses.override = ad-nav
addClasses.override.if.value = 57
addClasses.override.if.equals.field = layout
#imageColumnStdWrap.dataWrap = <div class="csc-textpic-imagecolumn" style="width:{register:columnwidth}px;"> | </div>
imageColumnStdWrap.dataWrap.override = |
imageColumnStdWrap.dataWrap.override.if.value = 57
imageColumnStdWrap.dataWrap.override.if.equals.field = layout
#imageStdWrap.dataWrap = <div class="csc-textpic-imagewrap" style="width:{register:totalwidth}px;"> | </div>
imageStdWrap.dataWrap.override = <div class="ad-thumbs">
imageStdWrap.dataWrap.override.if.value = 57
imageStdWrap.dataWrap.override.if.equals.field = layout
rendering.ul.noRowsStdWrap.wrap.override = <ul class="ad-thumb-list"> | </ul>
rendering.ul.noRowsStdWrap.wrap.override.if.value = 57
rendering.ul.noRowsStdWrap.wrap.override.if.equals.field = layout
layout.stdWrap.wrap.override = <div class="ad-gallery"><div class="ad-image-wrapper"></div><div class="ad-controls"></div>|</div></div>
layout.stdWrap.wrap.override.if.value = 57
layout.stdWrap.wrap.override.if.equals.field = layout
1.file {
// crop scale image
height.override = 70
height.override.if.value = 57
height.override.if.equals.field = layout
width < .height
width.override = 105c
}
// Override Params with condition
1.imageLinkWrap {
enable.override = 1
enable.override.if.value = 57
enable.override.if.equals.field = layout
linkParams.ATagParams.dataWrap {
override = class="ad-gallery" rel="ad-gallery"
override.if.value = 57
override.if.equals.field = layout
}
}
2 < .1
3 < .2
4 < .1
}
Und damit auch nur, wenn im Layout die Ad Gallery ausgewählt wird, die entsprechenden JS Files geladen werden, dies noch:
PATH-TO-JS und PATH-TO-CSS müsste ihr gegen eigene Pfade austauschen.
Die Sourcen gibts hier : JS File und hier CSS File
jquery.ad-gallery_start.js enthält:
$(document).ready(function() {
$('.ad-gallery').adGallery();
});
temp.adGallery57headerData = COA
temp.adGallery57headerData {
10 = LOAD_REGISTER
10 {
headerFiles.cObject = TEXT
headerFiles.cObject.value(
<script src="PATH-TO-JS/jquery.ad-gallery_1.2.4.js"></script>
<script src="PATH-TO-JS/jquery.ad-gallery_start.js"></script>
<link media="screen" href="PATH-TO-CSS/jquery.ad-gallery_1.2.4.css" type="text/css" rel="stylesheet">
)
}
20 = TEXT
20 {
data = register:headerFiles
if.isTrue.numRows {
pidInList = this
table = tt_content
select.where = layout = 57
}
}
}
page.headerData.57 < temp.adGallery57headerData
Viel Spaß und wenns Probleme gibt, einfach melden.
LG
Charly