How to Create a Latest News Template in TYPO3 EXT:news

This approach keeps your implementation modular while providing a graceful fallback when no news records exist.

Step 6: Build the LatestNews.html Partialn

The LatestNews.html partial is responsible for the frontend markup of your custom Latest News block. It should contain only the HTML required for the custom layout, while all rendering decisions remain in the List template.

A well-designed partial typically includes:

• Article wrapper
• Semantic heading structure
• News title
• Publication date
• Teaser text
• Preview image
• Link to the detail page
• Optional category label
• "View all news" link
• Accessible link text
• Meaningful image alternative text
• Fallback when no preview image exists

Recommended HTML Structure

The following example provides a clean, accessible starting point.

<section class="latest-news">

   <f:for each="{news}" as="newsItem">

       <article class="latest-news__item">

           <f:if condition="{newsItem.falMedia}">
               <f:then>
                   <f:image
                       image="{newsItem.falMedia.0}"
                       alt="{newsItem.title}"
                       class="latest-news__image" />
               </f:then>

               <f:else>
                   <div class="latest-news__image-placeholder">
                       No preview image available
                   </div>
               </f:else>
           </f:if>

           <div class="latest-news__content">

               <f:if condition="{newsItem.categories}">
                   <span class="latest-news__category">
                       {newsItem.categories.0.title}
                   </span>
               </f:if>

               <h2 class="latest-news__title">
                   <f:link.action
                       action="detail"
                       arguments="{news: newsItem}"
                       title="Read more about {newsItem.title}">
                       {newsItem.title}
                   </f:link.action>
               </h2>

               <time datetime="{newsItem.datetime -> f:format.date(format:'Y-m-d')}">
                   <f:format.date format="F j, Y">
                       {newsItem.datetime}
                   </f:format.date>
               </time>

               <p class="latest-news__teaser">
                   {newsItem.teaser}
               </p>

           </div>

       </article>

   </f:for>

   <p class="latest-news__all">
       <a href="/news/" aria-label="View all news articles">
           View all news
       </a>
   </p>

</section>

Keep the Markup Accessible

When building a custom Latest News template, follow basic accessibility best practices:

• Use semantic elements such as <section> and <article>.
• Keep the heading hierarchy consistent with the surrounding page.
• Ensure every news link clearly describes its destination.
• Provide meaningful alt text for preview images.
• Display a fallback when no preview image is available.
• Make all interactive elements keyboard accessible.
• Use descriptive link text such as "View all news" instead of generic labels like "Click here."

Following these practices improves usability for all visitors while supporting better accessibility and SEO.

Step 7: Add Responsive Styling

After creating the LatestNews.html partial, add responsive styling to ensure the Latest News block displays consistently across desktops, tablets, and mobile devices.

A responsive layout improves readability while keeping the design flexible for different screen sizes.

Recommended CSS Structure

Organize your CSS using reusable class names that clearly separate the component and its elements.

.latest-news
.latest-news__grid
.latest-news__item
.latest-news__image
.latest-news__content
.latest-news__category
.latest-news__title
.latest-news__date
.latest-news__teaser
.latest-news__link

Grid Behaviour

Use CSS Grid or Flexbox to create a flexible layout.

• Display multiple news cards on larger screens.
• Reduce the number of columns as the viewport becomes smaller.
• Allow cards to grow naturally without fixed widths.

Image Aspect Ratio

Use a consistent aspect ratio for preview images to create a uniform layout.

For example:

• 16:9
• 4:3
• 1:1

Apply object-fit: cover so images fill the available space without distortion.

Mobile Stacking

On smaller screens:

• Display a single-column layout.
• Stack the image above the content.
• Increase spacing between news items for improved readability.
• Ensure text remains readable without horizontal scrolling.

Focus States

Interactive elements should remain accessible for keyboard users.

Provide visible focus styles for:

• News detail links
• "View all news" link
• Any interactive buttons

Avoid removing the browser's default focus outline unless it is replaced with an equally visible alternative.

Avoid Fixed Heights

Avoid assigning fixed heights to cards or content areas.

Instead, allow each news item to expand naturally according to:

• Title length
• Teaser length
• Image availability

This prevents content from being clipped.

Prevent Layout Shifts

To reduce layout shifts during page loading:

• Reserve space for preview images using a fixed aspect ratio.
• Define image dimensions whenever possible.
• Keep consistent spacing between elements.
• Load images responsively.

These practices contribute to a smoother user experience and improve Core Web Vitals.

Expected Desktop Result

Insert a screenshot of the completed Latest News block displayed in a multi-column desktop layout.

Suggested caption:
Desktop view of the custom Latest News layout showing responsive cards, preview images, publication dates, and links to the full news articles.

Expected Mobile Result

Insert a screenshot of the Latest News block displayed on a mobile device with stacked news cards.

Suggested caption:
Mobile view of the Latest News layout with vertically stacked articles, responsive images, and touch-friendly navigation.

Note: Keep important explanations, captions, and implementation details as HTML text rather than embedding them only inside screenshots. This ensures search engines and AI-powered search systems can crawl and understand the content.

Step 8: Clear Caches and Test the Result

Before publishing your implementation, verify that every part of the custom Latest News layout is working as expected.

Use the following checklist during testing:

• Clear all TYPO3 caches.
• Reload the TYPO3 backend.
• Confirm that the Latest News Layout appears in the Template Layout selector.
• Verify that news articles are sorted from newest to oldest.
• Confirm the configured maximum number of news items is displayed.
• Verify that the custom LatestNews.html partial is rendered.
• Test that every news item links to the correct detail page.
• Verify the empty-state message appears when no news records are available.
• Test the layout on desktop, tablet, and mobile devices.
• Confirm that the default News List layout still works correctly when the custom template layout is not selected.

Completing these checks helps ensure your custom EXT:news template functions correctly, remains upgrade-safe, and provides a consistent experience across different devices and content scenarios.

Common EXT:news Template Problems

Even with a correct implementation, small configuration issues can prevent your custom Latest News template from working as expected. The following troubleshooting guide covers the most common problems and their solutions.

Template Layout Is Not Visible

Direct fix: Verify that the Page TSConfig is loaded for the current page tree, then clear all TYPO3 caches and reload the backend.

If the custom template layout does not appear in the Template Layout dropdown:

• Confirm that the Page TSConfig containing tx_news.templateLayouts is assigned to the correct page or site package.
• Check for syntax errors in your TSConfig.
• Clear all TYPO3 caches.
• Reload the TYPO3 backend and reopen the News content element.

Why this happens:
Template layouts are registered through Page TSConfig, not TypoScript Setup. If the TSConfig is not loaded, TYPO3 cannot display the layout option in the backend.

The Default News Partial Still Appears

Direct fix: Verify that the selected template layout identifier matches the Fluid condition and that TYPO3 is loading your template override.

Check the following:

• The registered numeric layout identifier (for example, 10) matches the selected value in the News plugin.
• Your Fluid condition compares the same numeric identifier.
• Template, Partial, and Layout root paths point to your site package.
• TYPO3 caches have been cleared after making changes.

Why this happens:
If TYPO3 cannot find your custom template or the layout identifier does not match, it automatically renders the default Item.html partial.

The Latest News List Is Empty

Direct fix: Verify that the News plugin is configured to retrieve the correct records.

Review the following settings:

• Storage PID (Starting Point)
• Hidden or deleted records
• Start and end time restrictions
• Language overlays
• Category filters
• Recursive storage depth
• Access permissions

Why this happens:
If no records match the configured filters or the storage folder is incorrect, the News plugin returns an empty result.

News Is Not Ordered Newest First

Direct fix: Configure the News plugin to sort by the news date in descending order.

Verify that:

• The Date (datetime) field is used for sorting.
• orderBy is configured correctly.
• The sorting direction is Descending (desc).
• Plugin settings are not overriding the expected order.

Why this happens:
An incorrect sort field or ascending order causes older news articles to appear before newer ones.

Detail Links Open the Wrong Page

Direct fix: Check the configured Detail Page and detailPid.

Verify that:

• The News Detail page exists.
• The News Detail plugin is placed on that page.
• detailPid references the correct page.
• Site routing and Route Enhancers are configured correctly.

Why this happens:
If TYPO3 cannot resolve the correct detail page, generated links may point to the wrong location or produce 404 errors.

Changes Disappear After an EXT:news Update

Direct fix: Store all custom templates inside your site package.

Never modify files inside: