TYPO3 news extension “news” by Georg Ringer how to show preview images in list mode

The new News extension by Georg Ringer by default doesn’t show images in list mode.
Here how to show images in list mode by default:

  1. copy templates from typo3conf/ext/news/Resources/Private/Partials/    into fileadmin/template/ext/news/Partials/
  2. edit your TS to set the new path
  3. edit your fileadmin/template/ext/news/Partials/List/Item.html to insert nonMediaPreviews elements

1) here the folders:

2) edit typoscript to set the new paths:

plugin.tx_news.view.layoutRootPath = fileadmin/template/ext/news/Layouts/
plugin.tx_news.view.partialRootPath = fileadmin/template/ext/news/Partials/
plugin.tx_news.view.templateRootPath = fileadmin/template/ext/news/Templates/

3) insert nonMediaPreviews elements in your new template fileadmin/template/ext/news/Partials/List/Item.html

edit the <f:else> in line 47 to generate the nonMediaPreviews elements in the same way of the mediaPreviews elements

from

<f:else>
	<f:if condition="{settings.displayDummyIfNoMedia}">
	<span class="no-media-element">
			<f:image
				src="typo3conf/ext/news/Resources/Public/Images/dummy-preview-image.png"
				title=""
				alt=""
				maxWidth="{settings.list.media.image.maxWidth}"
				maxHeight="{settings.list.media.image.maxHeight}"
				/>
	</span>
	</f:if>
</f:else>

to

<f:else>
	<f:alias map="{mediaElement: newsItem.nonMediaPreviews.0}">
		<f:if condition="{mediaElement.type} == 0">
			<f:image
				src="uploads/tx_news/{mediaElement.image}"
				title="{mediaElement.title}"
				alt="{mediaElement.alt}"
				maxWidth="{settings.list.media.image.maxWidth}"
				maxHeight="{settings.list.media.image.maxHeight}"
				/>
		</f:if>
		<f:if condition="{mediaElement.type} == 1">
			<f:render partial="Detail/MediaVideo" arguments="{mediaElement: mediaElement}" />
		</f:if>
		<f:if condition="{mediaElement.type} == 2">
			<f:render partial="Detail/MediaHtml" arguments="{mediaElement: mediaElement}" />
		</f:if>
		<f:if condition="{mediaElement.type} == 3">
			<n:format.dam as="dam" uid="{mediaElement.uid}">
				<f:image src="{dam.file_path}{dam.file_name}" title="{dam.title}" alt="{dam.alt_text}" maxWidth="{settings.detail.media.image.maxWidth}" />
			</n:format.dam>
		</f:if>
	</f:alias>
</f:else>

Leave a Reply