I'm fairly new to typo3 and I have an issue that i don't find an explanation on how to change it. I'm sure there are already some helpful tutorials but i have issues finding them.
I am making a website and I have already made a template for fontend and backend.
It is a very simple test template that consists only of one slider and one text element.
The slider is handmade and should have the following layout:
<section class="custom-slider">
<img src="img1.jpg">
<img src="img2.jpg">
...
</section>
Thought easy, i have my slider place in my template, just need to add plain images.
but typo3 gives me:
<section class="custom-slider">
<div id="c3" class="frame frame-default frame-type-image frame-layout-0"><header><h2 class=""></h2></header><div class="ce-image ce-center ce-above"><div class="ce-gallery" data-ce-columns="1" data-ce-images="1"><div class="ce-outer"><div class="ce-inner"><div class="ce-row"><div class="ce-column"><figure class="image"><img class="image-embed-item" src="fileadmin/_processed_/1/2/csm_slider1_c3fdcdcaf5.jpg" width="600" height="187" alt="" /></figure></div></div></div></div></div></div></div>
</section>
Now i search how i can make my own custom elements or render existing elements different. I have found a lot of tutorials but they all are based on 'Extension Builder' or 'Builder' and require a custom extention. These don't seem to work on Typo3 8.7.x. Is there a different solution or can someone give me a good tutorial link?
Thank you in advanst:)
Ps: since i will have the same problem with styled text elements i would like to ask if there is a way to declare in the themplate how different predeterment elements are rendered?
In TYPO3 8.7 (I assume) your rendering is done with FSC (fluid_styled_content), so you have to understand the mechanism of FSC to render a CE (ContentElement).
As the name suggests Fluid is used. Fluid uses different templates organized in three categories (each with it's own folder):
Layouts
Templates
Partials
The call goes to a template (in the folder 'templates') where a tag can be inserted to use a specific layout (from floder 'Layouts'). if this tag is given the rendering starts with the given layout. In the layout different sections and partials can be called. Sections belong to the template, partials need to have an own partial file (in folder 'Partials').
You can override single files from the given declaration to individulize the behaviour.
In your example you may evaluate the field layout in layout, template and partial to avoid the default wrapping of any content (your images) in different div tags.
What is the difference between Polymer's light DOM and local DOM?
From the docs(1):
The DOM that an element creates and manages is called its local DOM.
This is distinct from the element's children which are sometimes called its light DOM for clarity.
This doesn't seem to help much. Isn't the light DOM supposed to contain the children and if so what does the local DOM contain?
[1] https://www.polymer-project.org/1.0/docs/devguide/local-dom
Here's an example to explain the difference. Suppose you have the following custom element:
<dom-module id="x-foo">
<template>
<div>I am local dom</div>
<content></content>
</template>
<script>
Polymer({
is: 'x-foo'
});
</script>
</dom-module>
And you use it like this in your document:
<x-foo>I am light dom</x-foo>
What ever you put into the template of the element is local dom. What you put as children to your custom element when you use it is light dom. So, the local dom is determined by the creator of the element, while the light dom is set by the user of the element. Of course, when you both create and use your own custom elements you have some flexibility what to put where.
If you create a component <a-component>, then it has its own markup (it's template) which is the local DOM. The template can contain <content></content> tags (one unnamed and multiple named ones) where children are projected to. Content added as children is shown in the light DOM.
When we have an <a-component> with it's local DOM
<dom-module id="a-component">
<template>
<div>A</div>
<content></content>
<div>B</div>
</template>
</dom-module>
and we use it like
<a-component>
<div>C</div>
</a-component>
then <div>C</div> is shown in the light DOM. The resulting DOM in the browser then looks like
<div>A</div>
<div>C</div>
<div>B</div>
Where <div>A</div> and <div>B</div> are called the local DOM when seen from within <a-component> and shady or shadow DOM when seen from the outside of the component and <div>C</div> is in the light DOM.
If we take again this markup we would add to the page
<a-component>
<div>C</div>
</a-component>
You see that <div>C</div> is directly added by the user of the component while <div>A</div> and <div>B</div> are hidden (in the shadow) and revealed only later when <a-component> is processed by the browser.
The distinction of shady and shadow is about if full shadow DOM is enabled or not for Polymer. Shady emulates shadow to some degree but with some notable differences, this is why it got a different name.
In the past I have built labels for my form like this:
<label wicket:for="name"><wicket:label><wicket:message key="name"></wicket:message></wicket:label>:</label><input wicket:id="name" type="text"/>
Do I still need to use the wicket:label tag? I am not using wicket:label in wicket 7 and it seems to work fine. I may not be understanding the purpose of using wicket:label. It seems like wicket:label is just additional markup. Below is what I am doing now. Is this correct?:
<label wicket:for="name"><wicket:message key="name"></wicket:message>:</label><input wicket:id="name" type="text"/>
This example is related to Wicket XHTML tags
Have a look at the JavaDoc of AutoLabelResolver and AutoLabelTextResolver.
The <label wicket:for="name"> is handled by AutoLabelResolver. It links the HTML label tag to the HTML form component (in your case the input tag) by filling in the correct ID in the HTML for attribute of the label. It also adds css classes to the label tag for for example errors, so you can style the text in the label tag in case of an error.
The <wicket:label> has two purposes. If you give it a value either by the key attribute (as you did) or by having some text between the tags, the text is set as the label model of the Java FormComponent, which then is used in validation messages like this '${label}' is required. (see LabeledWebMarkupContainer#setLabel and LabeledWebMarkupContainer#getLabel).
If you don't assign any text to the <wicket:label> tag, then it is used as output. That means the value of the label model of your Java FormComponent is used to replace the tag.
If you have no <wicket:label> in the HTML markup and no label model set in your Java code, then your Java FormComponent will have an empty label model and Wicket falls back to using the Wicket ID as label. So depending on how your Wicket IDs look, you will get validator messages like 'user_name' is required. instead of something nice looking like 'User name' is required.
I need a custom styling for different elements (ul li, ol li, tables, links etc.) that are added through Typo3 RTE.
Thus I want to configure the RTE so every time some content is added through RTE it is outputted in the front-end with a wrapping div e.g. <div class="added_through_rte"></div>.
Is there a way to do it?
Put this in yout TypoScript setup
tt_content.text.20.wrap = <div class="added_through_rte"> | </div>
This wraps all content from the field "text" of the table tt_content.
If you use RTE in other records, you will have to configure each one in a simmilar way.
On the other hand, you can define custom CSS classes for the most elements (ul, ol, links, headers, paragraphs etc.) managed by a RTE. This is a lot more configure work but more flexibel, so you can have many different list classes to chose from etc. This is quite a huge topic and lot to research.
How can I add attributes to the current Insert Image dialogue box on umbraco Richtext Editor?
What I really want is to let content editor choose images and set their class, and maybe choose if this is lightbox image or not. If user choose lighbox option, then a hyper link is added with some extra attributes, like data-rel. I even want to be able to modify the image url added by the content editor, if possible.
The output should look like this
<a href="/media/2813/DSC_2615.JPG" data-rel="prettyPhoto[gal-3-col]" >
<img src="http://domain.com/imageGen.ashx?
image=%2fmedia%2f2813%2fDSC_2615.JPG&width=420" alt="DSC_2615" title="DSC_2615"
class="alignright">
</a>
I found this very useful link http://forum.umbraco.org/yaf_postst8163_TinyMCE--insert-image-dialog.aspx which solve half of my issue, but I can't figure out how to continue
Default umbraco tinymce add image interface is
<plugin loadOnFrontend="false">umbracoimg</plugin>
I was able to modify it to show additional field in the image selection interface, then render markup I want.
I edited \umbraco\plugins\tinymce3\insertImage.aspx, added my field there and some jquery logic:
<ui:PropertyPanel id="pp_desc" runat="server" Text="Description">
<input type="text" id="title" style="width: 300px"/>
</ui:PropertyPanel>
...
Then if you are adding custom attributes, you might want to add them to \config\umbracoSettings.config
<!-- what attributes that are allowed in the editor on an img tag -->
<allowedAttributes>src,alt,title,border,class,style,align,id,name,onclick,usemap</allowedAttributes>
and \config\tinyMceConfig.config
<validElements>
<![CDATA[+a[id|style|rel|rev|charset|hreflang|dir|lang|tabindex|accesskey|type|name|href|target|title|class|onfocus|onblur|onclick|
ondblclick|onmousedown|onmouseup|onmouseover|onmousemove|onmouseout|onkeypress|onkeydown|onkeyup],-strong/-b[class|style],-em/-i[class|style],
-strike[class|style],-u[class|style],#p[id|style|dir|class|align],-ol[class|reversed|start|style|type],-ul[class|style],-li[class|style],br[class],
img[id|dir|lang|longdesc|usemap|style|class|src|onmouseover|onmouseout|border|alt=|title|hspace|vspace|width|height|align|umbracoorgwidth|umbracoorgheight|onresize|onresizestart|onresizeend|rel],
-sub[style|class],-sup[style|class],-blockquote[dir|style|class],-table[border=0|cellspacing|cellpadding|width|height|class|align|summary|style|dir|id|lang|bgcolor|background|bordercolor],
-tr[id|lang|dir|class|rowspan|width|height|align|valign|style|bgcolor|background|bordercolor],tbody[id|class],
thead[id|class],tfoot[id|class],#td[id|lang|dir|class|colspan|rowspan|width|height|align|valign|style|bgcolor|background|bordercolor|scope],
-th[id|lang|dir|class|colspan|rowspan|width|height|align|valign|style|scope],caption[id|lang|dir|class|style],-div[id|dir|class|align|style],
-span[class|align|style],-pre[class|align|style],address[class|align|style],-h1[id|dir|class|align],-h2[id|dir|class|align],
-h3[id|dir|class|align],-h4[id|dir|class|align],-h5[id|dir|class|align],-h6[id|style|dir|class|align],hr[class|style],
dd[id|class|title|style|dir|lang],dl[id|class|title|style|dir|lang],dt[id|class|title|style|dir|lang],object[class|id|width|height|codebase|*],
param[name|value|_value|class],embed[type|width|height|src|class|*],map[name|class],area[shape|coords|href|alt|target|class],bdo[class],button[class],iframe[*],code[*]]]>
</validElements>
Then I modified the .js that is in charge of rendering html that will be added to tinymce editor:
\umbraco_client\tinymce3\plugins\umbracoimg\js\image.js
ed.execCommand('mceInsertContent', false, '<div id="__dimps_width" class="img-with-text"><img id="__mce_tmp" /><p id="__dimps_desc">description</p></div>', { skip_undo: 1 });
ed.dom.setAttribs('__mce_tmp', args);
ed.dom.setAttrib('__mce_tmp', 'id', '');
ed.dom.setAttribs('__dimps_width', {style: 'width: ' + nl.width.value + 'px;'});
...
One important thing: everything is cached and bundled, so to make sure your changes was applied remove all files from \app_data\TEMP\ClientDependency\ and use new instance of incognito browser. You probably can disable it somewhere, but I just removed the cache.
There is no magic in Umbraco TinyMCE. Just a bunch of .aspx and .js code. Modify it to your needs.