Closed larssandergreen closed 5 years ago
In the -ko-supports you have to define a new "style" to be handled by the theming. Take textStyle as reference and name your style imageCaptionStyle or something similar, than name your property to have the "imageCaptionStyle" suffix and use "extend: imageCaptionStyle".
I'm not sure I follow. I have captionTextStyle and captionTextStyle:preview in -ko-supports (based on longTextStyle) and captionTextStyle as a property of the singleArticleBlock. I'm not clear on what captionTextStyle should be a suffix to or and where to use extend: captionTextStyle.
I've pasted what I have below, am I missing a piece somewhere?
captionTextStyle { label: Caption; properties: face color size lineHeight align linksColor } captionTextStyle:preview { -ko-bind-text: @['AaZz']; -ko-font-family: @face; -ko-color: @color; -ko-font-size: @[size]px; }
and
singleArticleBlock { label: Image/Text Block; properties: captionVisible=true titleVisible=true buttonVisible=true imageVisible=true hrlineVisible=true imagewidth=534 captionTextStyle titleTextStyle longTextStyle buttonStyle caption image longText buttonLink; theme: contentTheme}
This is in the template for the singleArticleBlock:
<caption editable="captionText" if="captionVisible"><p>cghdvfhdabhfbsdhjbfhjsdbhfbsdhbfhjsdbfjhbsdhjfbhjsdbfhjsbdhjfbsdhj</p></caption>
This is the template for the caption: `
<def attr="false" selector="tr" style="display: none"></def>
<def attr="color" selector="td" style="color: {{color}}"></def>
<def attr="size" selector="td" style="font-size: {{size}}"></def>
<def attr="face" selector="td" style="font-family: {{face}}"></def>
<def attr="align" selector="td" align="{{align}}" style="text-align: {{align}}"></def>
<def attr="line-height" selector="td" style="line-height: {{line-height}}"></def>
<def attr="fixed-align" selector="td" align="{{fixed-align}}" style="text-align: {{fixed-align}}"></def>
<def attr="style" selector="td" style="-ko-font-size: @[{{style}}.size]px; -ko-color: @{{style}}.color; -ko-font-family: @{{style}}.face{{#align}}; -ko-text-align: @{{style}}.align; -ko-attr-align: @{{style}}.align{{/align}}{{#line-height}}; -ko-line-height: @[{{style}}.lineHeight]{{/line-height}}"></def>
<def attr="editable" selector="td" data-ko-editable="{{editable}}"></def>
<def attr="content" selector="td" style="-ko-bind-text: @{{content}}"></def>
<tmpl><tr><td class="caption links-color" width="100%" valign="top" style="font-weight: normal">{{replacedcontent}}</td></tr></tmpl>
`
I don't see any captionTextStyle variable used in the template at all. You only use "captionText" and "captionVisible" variables.
Thank you!
For others, what I ended up doing to get this working was setting the default style for the caption like this:
<default selector="block[theme='contentTheme'] caption" face="Arial, Helvetica, sans-serif" align="right" size="11px" color="#808080" style="captionTextStyle"></default>
I'm using the HTMML template language and trying to add a new template to a block. In this case, I'm adding a caption underneath the image, but above the section title. I've essentially copied everything from the longtext type and made this a captiontext type.
However, I'm not having any luck getting the caption style to show up in the global or the block style setting in the editor. I have been able to insert a selection under content for the block to add or remove the caption.
Is there somewhere else that I need to change something to have this show up?