[TYPO3-german] RTE-Bilder mit Bildunterschrift aus title

Jochen Overwien jochen.overwien at gmx.de
Sat Feb 15 22:50:35 CET 2014


Hallo,

und nun hier meine Lösung mit der Custom transformation API - 
Inspiration war 
http://www.typo3.net/forum/thematik/zeige/thema/19909/seite/2/.


1. Schritt
Eine Datei "custom_transformation.inc" in fileadmin/ erstellen. Inhalt:


<?php
/*
Custom RTE transformation
*/

class user_transformation {
var $pObj;
var $transformationKey = 'tx_mytransform';
var $conf;

function initConfig() {
$this->conf = 
$this->pObj->procOptions['usertrans.'][$this->transformationKey.'.'];
}

function transform_db($value) {
$this->initConfig();
if ($this->conf['extractImageTitle']){
	$value = preg_replace('#<img.+?title="([^"]*)".*?/?>#i', '<img $0<div 
class="bu">$1</div>', $value);

}
return $value;
}

function transform_rte($value) {
$this->initConfig();

if ($this->conf['extractImageTitle']){
	$value = preg_replace('#<div.+?class="bu">.*?/?>#i', '', $value);
}
return $value;
}
}
?>




2. transformation key in der localconf.php registrieren

$TYPO3_CONF_VARS['SC_OPTIONS']['t3lib/class.t3lib_parsehtml_proc.php']['transformation']['tx_mytransform'] 
= 'fileadmin/custom_transformation.inc:user_transformation';




3. TSconfig

RTE.config.tt_content.bodytext.proc.overruleMode = ts_css,tx_mytransform
RTE.config.tt_content.bodytext.types.text.proc.overruleMode = 
ts_css,tx_mytransform
RTE.config.tt_content.bodytext.types.textpic.proc.overruleMode = 
ts_css,tx_mytransform

RTE.config.tt_news.bodytext < RTE.config.tt_content.bodytext

RTE.default.proc.usertrans.tx_mytransform = 1
RTE.default.proc.usertrans.tx_mytransform.extractImageTitle= 1


4. CSS
.bu {float: left}




Was passiert bei der obigen Transformation?
Die function transform_db sucht alle img-tags und ließt den jeweiligen 
title-Attributwert (der in meinem Fall aus DAM kommt) aus. Dieser wird 
in einem <div class=bu">...</div> ausgegeben. Durch das Speichern in der 
Datenbank erfolgt die Ausgabe gestylt durch das CSS auf der Website.
Damit im RTE dieser Untertitel jedoch nicht ausgegeben wird, löscht die 
function transform_rte wieder das komplette <div class=bu">...</div> 
wieder. Der Redakteur sieht also im RTE nur das Bild und seinen normalen 
Text.
Durch
RTE.config.tt_news.bodytext < RTE.config.tt_content.bodytext
wird die Transformation auch für tt_news übernommen.


Zunächst erfüllt diese Transformation meine Anforderungen.
Schön wäre noch eine Checkbox im RTE 'title als Bildunterschrift 
rendern?'. Mal schauen.


Jochen






-------- Original-Nachricht --------
Betreff: Re: [TYPO3-german] RTE-Bilder mit Bildunterschrift aus title
Von: derSven <kreativ at dersven.de>
An: German TYPO3 Userlist <typo3-german at lists.typo3.org>
Datum: 12.02.2014 10:37

> Hallo.
>
> ich verwende tx_news und habe ebenfalls die Projektanforderung innerhalb
> des RTE Bilder einfügen zu können.
> Und auch die Option das man das Title Feld als Bildunterschrift anhängt.
>
> Ich habe eine "schmutzige" Javascript-Lösung gebastelt. Weil mir keine
> TS Lösung zur Hand lag. Es ist wohl nihct ganz trival.
>
> Und es nervt wenn dann immer erzählt wird das es vom Redakteur doch
> einfacher sei, mit IRRE und CEs das zu machen. Es sind halt emens mehr
> klicks und fenster mit Feldern nötig um eben ein Text in den Text zu
> setzen.
>
> Es funktioniert schon ganz gut. wenn man dem Redakteur so einschränken
> will das er nur Bilder im Text einbringen darf, die nur linksbündig
> sind. Also gefragt ist oft weniger als mehr.
>
>
> $('.news-text-wrap img').wrap('<figure
> class="csc-textpic-image"></figure>');
> $('.news-text-wrap img').after('<figcaption></figcaption>');
> $('.news-text-wrap .csc-rtetextpic-image').wrap('<div
> class="csc-rtetextpic-imagewrap"></div>')
>
> /// -- --- ///
>
> var anzahlBilder = $('.csc-textpic-text img').length;
> var altArray = [];
>
>       for(var i=0; i < anzahlBilder; i++) {
>       altArray[i] = $('.csc-textpic-text img:eq('+ i +')').attr('alt');
>          $('.csc-textpic-text figcaption:eq('+ i +')').text(altArray[i]);
>          }
>
> Grüße Sven
> _______________________________________________
> TYPO3-german mailing list
> TYPO3-german at lists.typo3.org
> http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-german


More information about the TYPO3-german mailing list