Readspeaker

Folgende Skripts einbinden:

<script src="//f1-eu.readspeaker.com/script/[ID]/webReader/webReader.js?pids=wr" type="text/javascript" id="rs_req_Init" defer></script>
<script type="text/javascript">
	{literal}
		window.rsConf = { ui: { disableDetachment: true }};
	{/literal}
</script>

DIe [ID] ist die ID des Kontos bei Readspeaker. Bitte eintragen.

Folgenden Code dort einfügen, an dem der Readspeaker zu sehen sein soll:

{capture assign="this_url"}{page_url return_absolute=true}{/capture}
{if !$frontend_admin}
	<div id="readspeaker_button1" class="rs_skip rsbtn rs_preserve">
		<a rel="nofollow" class="rsbtn_play" accesskey="L"
		   title="{t}Um den Text anzuhören, verwenden Sie bitte ReadSpeaker webReader{/t}"
		   href="https://app-eu.readspeaker.com/cgi-bin/rsent?customerid=[ID]&lang=de_de&readid=readContent&url={$this_url|urldecode|urlencode}">
			<span class="rsbtn_left rsimg rspart"><span class="rsbtn_text"><span>{t}Vorlesen{/t}</span></span></span>
			<span class="rsbtn_right rsimg rsplay rspart"></span>
		</a>
	</div>
{/if}

Mit dem Parameter "readid" wird eine ID festgelegt, diese ID gibt an, welcher Bereich vorgelesen werden soll. Es ist außerdem möglich statt einer ID eine bestimmte Klasse auszulesen. Dazu "readid" einfach zu "readclass" abändern und die passende Klasse angeben.

Die "customerid" ist die ID des Kontos bei Readspeaker. Bitte eintragen.

Wichtig zu beachten: In dem Element, in den die "readid" angegeben wird, darf KEIN 'aria-label'-Tag stehen, sondern falls man ein aria-label braucht, erst ein Element tiefer.

Richtig:

<main data-edit-template="layout" id="readContent" role="main">
	<div aria-label="{t}Inhaltsbereich{/t}">
		{capture assign="template"}{include file=$typeTemplate}{/capture}
		{$template|glossary}
	</div>
</main>

Falsch:

<main data-edit-template="layout" id="readContent" role="main" aria-label="{t}Inhaltsbereich{/t}">
	{capture assign="template"}{include file=$typeTemplate}{/capture}
	{$template|glossary}
</main>