HTML5 Custom Data Attributes in TYPO3 Backend Content Elements - typo3

I am wondering if there is a way to add a HTML5 Custom Data Attribute to any Content Element like Text or Text w/ images.
Anyone tried / did this before or is there a good reason not to do this?

You can either add a new field (own extension) or use any of the existing (e.g. layout to define own values. Then you can change the TypoScript rendering based on the value of this field.

... or in addition to #pgampe's answer, which is fine for programmers you can use ie. DCE extension, which allows you to create any HTML structure with usage pure Fluid syntax

Thank's for the answers. I didn't know DCE, looks very interesting.
As I needed a quick solution for just a few elements on one page I did something really quick and dirty. But as it worked for me, I would like to post it in addition to the two other excellent answers.
I used the field Description field to add the content of my custom field. I know it's not intended for this, but as alreay mentioned: quick & dirty. :-)
tt_content.stdWrap.innerWrap.cObject {
50 =< tt_content.stdWrap.innerWrap.cObject.default
50.20.10.value = csc-default layout-{field:layout}" data-filter="{field:rowDescription}
50.20.10.insertData = 1
}

Related

Changing Templavoila field names

In the process of cleaning up some Templavoila Plus FCE, I created a new FCE template that will replace several others. To do so, I created some new field names to replace the old ones. (I noticed you can't change the name of a field after creating it).
For example, I had field_title_A for FCE A, field_title_B for FCE B, etc… Now I just have field_title in my new FCE template.
The problem is that if I change the FCE / Template Object for an existing content, the title field is now empty. It doesn't understand that field_title_A is now field_title.
I seriously doubt that there is a solution, but I still hope there is one.
Is there something I can do to tell TV to move the content of field_title_A to field_title or to tell it field_title_A is now field_title? Is there another way to achieve that?
If I'm not using some terms properly, please, feel free to edit.
no, there is no such support present yet. You could open a feature request for that, but I don't think I could work out a sollution in the next 2 years.

Can i add more colors in tx_gridelements

i want to add more backend colors in Typo3 Gridelements.
Under Typo3 -> List -> CE Backend Layout is an Option "Frame" with 4 colors and i want to add more colors.
Is there a way for it?
Best Regards
You probably want to use something like this in your pageTS:
TCEFORM.tx_gridelements_backend_layout{
frame{
addItems{
10 = unicorn-pink
}
}
}
You can change every field from every table with this method.
See https://docs.typo3.org/typo3cms/TSconfigReference/PageTsconfig/TCEform/Index.html for further information about this.
Just adding the value in TCEFORM might not be enough, since you will need to add CSS to get the colors assigned to those new classes.
So you will at least need to have a small extension providing the items, a basic folder structure as in the usual sitepackages and the CSS embedded via ext_tables.php and/or ext_localconf.php

Element Checkbox got its label always to the left and needs a link

How can I change the positions of checkbox and label and how to implement a link into the label?
$acceptGTC = new Element\Checkbox('AGBs');
$acceptGTC->setLabel('I Accept the GTC (show it).');
$this->add($acceptGTC);
regards
n00n
meanwhile:
I tried to overwrite the view helper for checkboxes.
copied
*/vendor/zendframework/zend-form/src/View/Helper/FormCheckbox.php
to
*/module/Application/src/Application/View/Helper/FormCheckbox.php
added to module.config.php
'viewhelpers' => array('checkbox'=>'Application\View\Helper'),
But it still uses the original one...
Do I have to tell zend to use my FormCheckbox?
I don't exactly know the way you are rendering your Zend_Form_Element, but in order to enhance the rendering as you want you should build a custom decorator, and add it to this element.
You should read the Zend documentation on Zend_Form_Decorators, everything is quite well explained and should lead you to a fancy solution.

CKEditor automatically strips classes from div

I am using CKEditor as a back end editor on my website. It is driving me round the bend though as it seems to want to change the code to how it sees fit whenever I press the source button. For example if I hit source and create a <div>...
<div class="myclass">some content</div>
It then for no apparent reason strips the class from the <div>, so when I hit source again it has been changed to...
<div>some content</div>
I presume this irritating behaviour can be turned off in the config.js, but I have been digging and cant find anything in documentation to turn it off.
Disabling content filtering
The easiest solution is going to the config.js and setting:
config.allowedContent = true;
(Remember to clear browser's cache). Then CKEditor stops filtering the inputted content at all. However, this will totally disable content filtering which is one of the most important CKEditor features.
Configuring content filtering
You can also configure CKEditor's content filter more precisely to allow only these element, classes, styles and attributes which you need. This solution is much better, because CKEditor will still remove a lot of crappy HTML which browsers produce when copying and pasting content, but it will not strip the content you want.
For example, you can extend the default CKEditor's configuration to accept all div classes:
config.extraAllowedContent = 'div(*)';
Or some Bootstrap stuff:
config.extraAllowedContent = 'div(col-md-*,container-fluid,row)';
Or you can allow description lists with optional dir attributes for dt and dd elements:
config.extraAllowedContent = 'dl; dt dd[dir]';
These were just very basic examples. You can write all kind of rules - requiring attributes, classes or styles, matching only special elements, matching all elements. You can also disallow stuff and totally redefine CKEditor's rules.
Read more about:
Content filtering in CKEditor – why do you need content filter.
Advanced Content Filter – in deep description of the filtering mechanism.
Allowed content rules – how to write allowed content rules.
I found a solution.
This turns off the filtering, it's working, but not a good idea...
config.allowedContent = true;
To play with a content string works fine for id, etc, but not for the class and style attributes, because you have () and {} for class and style filtering.
So my bet is for allowing any class in the editor is:
config.extraAllowedContent = '*(*)';
This allows any class and any inline style.
config.extraAllowedContent = '*(*);*{*}';
To allow only class="asdf1" and class="asdf2" for any tag:
config.extraAllowedContent = '*(asdf1,asdf2)';
(so you have to specify the classnames)
To allow only class="asdf" only for p tag:
config.extraAllowedContent = 'p(asdf)';
To allow id attribute for any tag:
config.extraAllowedContent = '*[id]';
etc etc
To allow style tag (<style type="text/css">...</style>):
config.extraAllowedContent = 'style';
To be a bit more complex:
config.extraAllowedContent = 'span;ul;li;table;td;style;*[id];*(*);*{*}';
Hope it's a better solution...
Edit: this answer is for those who use ckeditor module in drupal.
I found a solution which doesn't require modifying ckeditor js file.
this answer is copied from here. all credits should goes to original author.
Go to "Admin >> Configuration >> CKEditor"; under Profiles, choose your profile (e.g. Full).
Edit that profile, and on "Advanced Options >> Custom JavaScript configuration" add config.allowedContent = true;.
Don't forget to flush the cache under "Performance tab."
Since CKEditor v4.1, you can do this in config.js of CKEditor:
CKEDITOR.editorConfig = function( config ) {
config.extraAllowedContent = '*[id](*)'; // remove '[id]', if you don't want IDs for HTML tags
}
You can refer to the official documentation for the detailed syntax of Allowed Content Rules
if you're using ckeditor 4.x you can try
config.allowedContent = true;
if you're using ckeditor 3.x you may be having this issue.
try putting the following line in config.js
config.ignoreEmptyParagraph = false;
This is called ACF(Automatic Content Filter) in ckeditor.It remove all unnessary tag's What we are using in text content.Using this command in your config.js file should be turn off this ACK.
config.allowedContent = true;
Please refer to the official Advanced Content Filter guide and plugin integration tutorial.
You'll find much more than this about this powerful feature. Also see config.extraAllowedContent that seems suitable for your needs.
Following is the complete example for CKEDITOR 4.x :
HTML
<textarea name="post_content" id="post_content" class="form-control"></textarea>
SCRIPT
CKEDITOR.replace('post_content', {
allowedContent:true,
});
The above code will allow all tags in the editor.
For more Detail : CK EDITOR Allowed Content Rules
If you use Drupal AND the module called "WYSIWYG" with the CKEditor library, then the following workaround could be a solution. For me it works like a charm. I use CKEditor 4.4.5 and WYSIWYG 2.2 in Drupal 7.33. I found this workaround here: https://www.drupal.org/node/1956778.
Here it is:
I create a custom module and put the following code in the ".module" file:
<?php
/**
* Implements hook_wysiwyg_editor_settings_alter().
*/
function MYMODULE_wysiwyg_editor_settings_alter(&$settings, $context) {
if ($context['profile']->editor == 'ckeditor') {
$settings['allowedContent'] = TRUE;
}
}
?>
I hope this help other Drupal users.
I found that switching to use full html instead of filtered html (below the editor in the Text Format dropdown box) is what fixed this problem for me. Otherwise the style would disappear.
I would like to add this config.allowedContent = true; needs to be added to the ckeditor.config.js file not the config.js, config.js did nothing for me but adding it to the top area of ckeditor.config.js kept my div classes
Another option if using drupal is simply to add the css style that you want to use. that way it does not strip out the style or class name.
so in my case under the css tab in drupal 7 simply add something like
facebook=span.icon-facebook2
also check that font-styles button is enabled
I face same problem on chrome with ckeditor 4.7.1. Just disable pasteFilter on ckeditor instanceReady.This property disable all filter options of Advance Content Filter(ACF).
CKEDITOR.on('instanceReady', function (ev) {
ev.editor.pasteFilter.disabled = true;
});

How to fusion two content elements? / Does an all in one content element exist?

I need a content element that cointains apsects from the "Textpic" and the "Media" content elements.
Basically I need the whole palette of input masks of the textpic CE (headline, rte text, images) plus the media tab (swf, mp4, mov) from the media content element.
This special requirements for our project comes from the need that we can only use one content element for our specific javascript content slieder. So I can not use like a Textpic and underneath a media CE. No it really has to be just one CE which can handle the textpic + the media CE stuff.
Generally I ask you: Is there already a extension, trick, modification or a framework which I can/should be use to achive that i can "fusionate" content elements? Like an "all-in-one"-content element, a multi content element?
Ps: I do not use Templavoila. My Typo3 version is 4.5
I think this is the tutorial you're looking for:
http://castironcoding.com/resources/our-blog/sp/view/single/post/reason-6-for-choosing-typo3-custom-content-elements-and-extbase-again-part-23.html
Follow step 2 and 3.
You'll also need to add a specific rendering config in Typoscript ie: tt_content._your-ce_
But it can be copied from out of tt_content.textpic and tt_content.media. You can find the expample typoscript of before mentioned CE's in: typo3/sysext/css_styled_content/static/setup.txt. Just don't alter it there, but make a copy and alter in your own file.
As you seem to only talk about reusing already exisiting fields, you really only need to change the backend interface (big keyword: "showitem"). You'll need the database names of the fields (peek into the tt_content table of some records where you know the contents), alternatively visit the module Admin Tools / Configuration, select TCA in top dropdown menu, open tt_content and columns.
Try http://blog.chandanweb.com/typo3/adding-new-fields-to-existing-typo3-tables-at-desired-location, you'll of course have to substitue tt_content for tt_news etc.
You might also want to make a new type (the above recipe is for changing a preexisitent), but I'm sorry, I'm currently out of time for explaining that. It's not very hard, though, and the castiron link by Koopa will help you on your way.
Perhaps you can wrap the content column in another div? You can use that outer div for your content slider. Now you actually use all content elements seperately, but combine then for usage.