Pizpalue template

Extension key: pizpalue
Package name: buepro/typo3-pizpalue
Version: main
Language: en
Author: Roman Büchler
Email: rb@buechler.pro
License: This document is published under the Open Content License available from https://www.openhub.net/licenses/opl.
Rendered: Sat, 25 Oct 2025 18:16:33 +0000

The extension builds on Benjamin Kott's Bootstrap Package and serves as a template for creating complete TYPO3 websites and distributions that use the Twitter Bootstrap library.

The extension configures TYPO3 and extends it with selected extensions to provide better structured and appealing content while optimizing speed and SEO performance.

Visit pizpalue.buechler.pro to see it in action or log in to the demo site and discover how easy it is to setup a site and create attractive content.

To install the demo site you might try our site generator, the site package or the pizpalue distribution using the distribution base package.

Credits

This extension can be provided thanks to outstanding work from TYPO3 community members and generous support from partners. A big thanks goes to:

Benjamin Kott, extension bootstrap_package
B13 GmbH, extension container
Georg Ringer, extensions news, eventnews
tt_address Development Team, extension tt_address
PopNet Informatik AG

Table of Contents

Introduction

What does it do?

The extension builds upon the extension bootstrap_package from Benjamin Kott and serves as a base template for the creation of websites or distributions using the bootstrap framework. It extends and configures TYPO3 and selected extensions to provide better structured and attracting content while maintaining or improving speed and seo performance.

It provides the following main features:

Easy website setup

The extension easyconf has been configured to provide an easy way for non technical website owners to setup their website. The following is taken care of automatically:

Domain related settings used in the content and site configuration
SEO related settings in the site configuration for "page not found", robots.txt and sitemap.xml
News related configurations in site configuration
Logo and app icon configurations
Google font configurations

Flexible page design

Page layouts allowing to add content inside columns with a menu
Background image to cover the entire page
CSS field to easily fine tune individual page styles

Page settings with additional fields from pizpalue

Attractive structure elements

Support for structure elements provided by container_elements. Example structure elements are: columns, grid, accordion, tabs, card, tile unit and randomizer. For better search engine ranking all images are optimized to each structure element (see templating).

Structure elements for attractive content arrangements

Versatile content elements

Fields to optimize image scaling dependent on the screen size
Layouts to create tiles
Fields to further adjust vertical spacing
Fields to assign custom classes, styles and attributes
Fields to create a scroll menu
Animation effects provided by animate.css
Scroll animation effects provided by Twikito/onscroll-effect, or Josh.js

Fields to further define content element attributes

Additional content elements

Image with overlay
Emphasize media
Card
Modal dialogs
List of categorized content elements
Structured data (JSON-LD data, see Schema)

Supporting popular extensions

The following extensions are supported:

Various

A feature to reveal the footer
A menu to be fixed on the side (fastmenu)

Discover more regarding the features on the demo site.

Screenshots

The following screen shots were taken from a website created with the distribution pizpalue_distribution.

Demo site

Administration

Installation

Refer to TYPO3 documentation for further details on installing extensions.

Supported extensions

Extension	Version tested
container_elements	5.1.0
easyconf	2.1.0
eventnews	6.0.2
news	11.3.0
tt_address	8.0.1

Static templates

In an installation using container_elements and user_pizpalue the following static extension templates would be included:

Note

The order in which the extension templates are included matters: Pizpalue related templates are inserted after 3rd party extensions and the site package Customization (user_pizpalue) comes at the end.

Update

After updating this extension the data base structure should be analysed in the maintenance module and the upgrade wizards from the upgrade module should be checked for new wizard steps.

Upgrade

Note

Upgrade tasks are only needed to be carried out in case breaking changes were introduced between the old and new release. Breaking changes are marked with [!!!] in the commit messages. When upgrading please make sure to understand all the breaking changes and carry out the wizards from the upgrade module.

The following upgrade descriptions are available:

Extensions

For some extensions additional packages are available:

Development / Maintenance

During development or maintenance phase two actions might be of interest:

Show under construction page
Enable code debugging

To temporarily show an under construction page an url redirection might be created and the code debugging might be enabled by setting the site mode in the "PIZPALUE: AGENCY" category from the constant editor. The following site modes are available:

Site mode	Description
Production	Used when the site is ready.
Maintenance	Used to temporarily debug code when site is in production.
Develop	Used during site development to debug the code. SEO is limited. Used only when site has not been in production.
Review	Used to review the site with the customer. SEO is limited. Used only when site has not been in production.

Note

A blinking dot might be shown on the left top side from the website indicating the site not being ready for production. The dot disappears when the site mode is set to production and the current domain corresponds to the domain defined in the site configuration.

Upgrade to version 16.0

Breaking changes

Make main navigation more accessible (04.10.2023, 7bdb001d)

Description

The adaption to a more accessible main menu might lead to visual changes.

The main menu height depends on the rows used. For a correct height calculatiuon the variable --pp-mainnavigation-row-count has been added.

Corrective action

Fine tune the visual appearance in the site package. When working with more then one main menu row use the variable --pp-mainnavigation-row-count for the height to be calculated correctly.

Related: bk2k/bootstrap_package#2775146d

Move main tag to contain all relevant content (02.10.2023, 46e68455)

Related: bk2k/bootstrap_package#2bceb149

Migrate heading classes (02.10.2023, 1dc06af7)

Description

The bootstrap package now provides as well fields to alter the headings classes making the pizpalue fields obsolete.

Corrective action

Use the provided upgrade wizard to migrate the heading settings to the bootstrap package domain. ATTENTION: Each time you run the wizard the field values in the bootstrap package domain are overridden. Use this wizard with care, usually just once.

Related: bk2k/bootstrap_package#c37afe30

Upgrade to version 15.0

Breaking changes

Drop extension news date localization

Corrective action

Add the necessary configuration to the site package.

Replace bootstrap scroll spy js

Description

Since the bootstrap scroll spy is buggy a replacement has been introduced, dropping the typoscript configuration constant pizpalue.menu.scroll.offset in favor of pizpalue.menu.scroll.rootMargin.

Corrective action

Review the typoscript scroll configuration.

Use easyconf constants substitution

Description

Since TYPO3 v12 typoscript constants are not substituted anymore. The substitution is now carried out by the extension easyconf by moving the related constants to the typoscript path easyconf.substitutions. Further the following typoscript constants have been dropped:

pizpalue.agency.reference
pizpalue.cutomer.copyright

Corrective action

In case the extension easyconf is present save the configurations through the easyconf form.

In case easyconf is not present define the various constants manually.

Where the above-mentioned dropped constants are used the following replacements should be used:

pizpalue.agency.reference -> no replacement
pizpalue.cutomer.copyright ->

page.theme.copyright.text

Drop bootstrap 4

Corrective action

Adapt site package accordingly.

Drop deprecated view helpers

Description

The deprecated view helpers BootstrapPackageFrameViewHelper and PizpalueFrameViewHelper have been dropped.

Corrective action

Use the following replacements:

BootstrapPackageFrameViewHelper ->

\Buepro\Pizpalue\ViewHelpers\FrameViewHelper

PizpalueFrameViewHelper ->

\Buepro\Pizpalue\ViewHelpers\FrameDataViewHelper

Change google fonts url

Description

To use a different google fonts for headings the typoscript constant pizpalue.style.googleFontsUrl has been adapted. This constant itself referenced other constants to specify the font families and the font weights. Since the TYPO3 version 12.1 constants in constants aren't substituted anymore hence the google url is faulty. The issue has been addressed by dropping the constant pizpalue.style.googleFontsUrl and adding the constant pizpalue.style.googleFontsUrlHeadingsSegment defining the url segment specifying the headings font.

Corrective action

In case you used the constant pizpalue.style.googleFontsUrl you need to extract the additional font segment part and assign it to the constant pizpalue.style.googleFontsUrlHeadingsSegment. Please Note that the leading pipe character needs to be available.

Before:

pizpalue.style.googleFontsUrl = https://fonts .googleapis.com/css?display=swap&family= {$page.theme.googleFont.font}:{$page.theme. googleFont.weight}|Lobster:400

Now:

pizpalue.style.googleFontsUrlHeadingsSegment = |Lobster:400

Mind the leading | character.

Bump TYPO3 to v12.1

Description

By supporting the main branch 12 support for the main branch 10 has been dropped.

Upgrade to version 14.0

Breaking changes

Correct background size in tiles (03.10.2022, 61ce0c8)

Description

An upgrade wizard step has been altered to move background color defining classes to the background color field. This might lead to a less dominant css definition which in turn could result in background colors not being overwritten anymore.

Corrective action

Review the content element backgrounds and correct them in the site package. Focus on content elements that used bootstrap classes like bg-primary.

Add content element inner class field (23.09.2022, a0beac5)

Description

The new content element field allows to assign css classes to the inner container enabling more diverse styling. Remember the inner container is only available when the content element contains a frame.

As a result css classes acting on the inner content element container became obsolete and have been dropped. This includes the following classes:

pp-inner-margin, pp-inner-padding, pp-inner-bgwhite70, pp-inner-bggrey70, pp-inner-bgblack70.

Corrective actions

Carry out the update wizards to rename or move dropped css classes.
If still needed add the dropped classes to the site package.

Enable background color in frameless ce (23.09.2022, 635b755)

Description

The background color selector is now as well available for frameless content elements. In this context the classes pp-space-before-none and pp-space-after-none have been dropped.

Corrective action

Adapt your site package to the absent space classes pp-space-before-none and pp-space-after-none.

Drop frameless content css class (23.09.2022, 2b38309)

Description

The class pp-content was initially used in content elements to indicate that no frame is used. For clarity reasons a more descriptive class pp-frameless-content has been introduced some time ago leading to have two classes serving the same purpose. This redundancy has now been resolved.

Corrective action

Replace references to the css class pp-content with pp-frameless-content.

Drop 3rd party extension css (23.09.2022, fb97486)

Description

Small css adjustments from several extensions have been dropped.

Corrective action

If needed they should be added to the site package.

Drop scss link and background mixins (23.09.2022, 36b7278)

Description

The scss mixins pp-make-link and pp-make-background have been dropped.

Corrective action

If needed the mixins should be added to the site package.

Drop css card classes (23.09.2022, d9bb148)

Description

The classes pp-card-[color-key] have been dropped.

Corrective action

Use the upgrade wizard to replace the card with the respective panel classes in the content element attributes field.
Replace pp-card-[color-key] with pp-inner-panel pp-inner-panel-[color-key] else where. Replace [color-key] with one of the brand colors.

Add scss frame background variables (23.09.2022, a08abdc)

Description

To simplify frame background adjustments scss variables pp-frame-background-[color-key] have been added where [color-key] has to be substituted with one of the brand colors (primary, secondary, etc.).

To adjust a frame with a background color a typoscript declaration can be added to the site package as following:

plugin.bootstrap_package.settings.scss {
   pp-frame-background-primary = ('color': 'red')
}

With this change the link styling has been simplified by dropping the extended styling when link-color: inherit has been in place. In case a site package makes use of it the link styling will be altered.

Corrective actions

Redefine the link styling in the site package.

Drop redundant css color classes (23.09.2022, 914f040)

Description

The following classes defining the background color have been dropped:

pp-bg-primary, pp-bg-secondary, pp-bg-complementary, pp-bg-light, pp-bg-dark

The background can already be defined with the bootstrap classes.

Corrective actions

Run the upgrade wizard to replace the custom classes with their bootstrap counterpart.
Replace the dropped classes manually by removing the "pp-" prefix from the class.

Rename headings color scss variable (23.09.2022, 90f9c92)

Description

The scss variable --pp-frame-heading-color has been renamed to --pp-frame-headings-color.

Corrective action

Rename the variable where it has been used or add the compatibility declaration --pp-frame-heading-color = var (--pp-frame-heading-color) to the site package.

Remove obsolete margin from carousel (23.09.2022, fcc3ab3)

Description

For the carousel item type "Text and image" the left margin definition from the text block has been dropped.

Corrective action

If still required the style definition should be added to the site package.

Drop AOS animation support (23.09.2022, e119e43)

Description

The package michalsnik/aos didn't get any update for a long time and has a lot of issues. This is why the support for it has been dropped.

Corrective action

Use josh or twikito animation instead.

Remove deprecated `google-webfontfamily` (23.09.2022, 9431dab)

Description

The deprecated typoscript constant pizpalue.style.google-webfontfamily has been dropped.

Corrective actions

If needed the constant should be added to the site package.

Remove josh attribute substitution (23.09.2022, a648acf)

Description

The josh animation attribute name has been changed from data-josh-delay to data-josh-anim-delay in pizpalue version 12. The substitution method that renamed the attribute has been dropped. As a result animations still using the old attribute name do not work anymore.

Corrective actions

Carry out the upgrade wizard step named [Pizpalue] Migrate the "Additional attributes" field.

Drop deprecated EmailFinisher (23.09.2022, 606ba8e)

Description

The EmailFinisher has been moved.

Corrective actions

Use \Buepro\Pizpalue\Form\Finishers\EmailFinisher instead.

Drop deprecated css classes (23.09.2022, 8d15166)

Description

The deprecated css classes pp-bg-centercover and pp-bg-fixed have been dropped.

Corrective actions

The needed class be added to the site package.

Drop css class `pp-ce-overlaycard` (23.09.2022, ae93ec0)

Description

The deprecated css class pp-ce-overlaycard has been dropped.

Corrective actions

In case the class has still been in use the related content element could be changed to "Picture with overlay" or the class could be added to the site package.

Remove custom theme (23.09.2022, 295a93f)

Description

Pizpalue provided css styles that rather should be part of a site package. This included content element frame and structure element customizations. In order to better separate concerns these styles have been dropped.

Corrective actions

Check the styles needed for the site and add them to the site package. See as well commit 983127cd from extension user_pizpalue

Upgrade to version 13.0

Breaking changes

Add name space prefix to content element templates (07.07.2022, e305b7d)

Description

Content elements share rendering definitions from lib.contentElement. Extensions might take advantage from settings defined by pizpalue by referencing the lib object (e.g.lib.containerContentElement =< lib.contentElement). As a result the template and partial root paths contain definitions from various extensions. To prevent conflicts templates from pizpalue content elements and folders with related partials have been prefixed with 'Pp'.

Corrective action

Templates or partials overriding pizpalue content element rendering need to be adapted. In most cases the template name and the related partial folder has to be prefixed with Pp.

Upgrade to version 12.0

Version 12 adapts to version 12 from the bootstrap package hence provides compatibility with TYPO3 version 11 and bootstrap framework version 5.

Using bootstrap 4

Bootstrap 5 is enabled by default. To use bootstrap 4 the related static templates need to be loaded as following:

"Bootstrap Package: Bootstrap 4.x (SCSS)" after "Bootstrap Package: Full Package"
"Pizpalue - Bootstrap 4.x" after "Pizpalue - Main"

Breaking changes

Drop classes for vertical alignment (07.12.2021, eb20e89)

Description

The classes pp-parentheight, pp-parent-height, pp-row-height and pp-row-child-height have been removed.

Corrective action

Add the functionality with flexbox or js to the site package.

Migrate layout "Emphasize media" to ce (26.11.2021, f1cf626)

Description

The layout option "Emphasize media" has been removed in favor of an own content element. As a result the frame class frame-layout-pp-emphasize-media isn't used anymore.

Corrective action

Review the site package for possible references to the class frame-layout-pp-emphasize-media and correct them accordingly.

Reduce supported extensions (16.11.2021, b5d9464)

Description

Support for extensions not being available for TYPO3 v11 has been dropped.

Correct content element css classes (12.11.2021, 6770c61)

Description

The bootstrap package introduced the field frame_layout. To distinguish classes related to the layout field the prefix has been changed from frame-layout to layout-. The prefix layout- is not added to tile layouts.

ATTENTION: Classes related to the field frame_layout are now prefixed with frame-layout.

Corrective action

Adapt the style definitions in the site package if the class frame-layout-pp-emphasize-media has been used.

Remove rarely used animation (12.11.2021, 5ffdfb4)

Description

The content animation "Zoom background, show text" has been removed.

Corrective action

To further use the animation add it to your site package

Remove app icon meta tags (06.11.2021, f65cb3a)

Description

When defining page.favicon.file = appIcon additional meta tags related to the app icon could be embedded to the page. This has rarely been used.

Corrective action

In case the app icon meta tags are needed define them in the site package.

Remove deprecated backend layouts (24.09.2021, d076e08)

Description

The deprecated backend layouts Full width clean and Full width default are removed.

Corrective action

If needed add the layouts to the site package.

Remove figcaption alignment for image ce's (03.09.2021, d34c8e7)

No further details available.

Refactor typoscript (02.09.2021, 0ddbc3e)

Description

Configurations for the extension sr_language_menu have been moved to a static template.

Corrective action

Add the static template to the template record if the language menu is rendered with the extension sr_language_menu.

Add support for Bootstrap v5 (28.08.2021, 4b9b1aa)

Description

The default SCSS variables changed which impacts rendering.

Corrective action

Review rendering and adapt the site package as needed.

Related: benjaminkott/bootstrap_package 8c63fd58

Adapt to "Drop webfontloader" (24.08.2021, 91189c0)

Corrective action

See bootstrap package wiki pages

Related: benjaminkott/bootstrap_package e4c07088

Adapt to feature "embedded frame introduction" (24.08.2021, b9976c6)

Description

New css variables and html wrapping containers are introduced. This might impact the design.

Corrective action

Style definitions and fluid layouts, templates and partials should be reviewed.

Remove deprecated theme (23.08.2021, 52c4407)

Description

The following css classes are removed:

pp-ce-margin, pp-ce-padding, pp-ce-bgwhite70, pp-ce-bggrey70, pp-ce-bgblack70, pp-ce-background, pp-ce-bgfixed, pp-content-margin, pp-content-padding, pp-content-bgwhite70, pp-content-bggrey70, pp-content-bgblack70, pp-cf

Corrective action

Define the needed classes in the site package.

Move TS constants for tt_address display modes (23.08.2021, 171a7bd)

Description

The TS constants are moved from:

pizpalue.plugin.tx_ttaddress.googleMap to plugin.tx_ttaddress.displayMode.ppGoogleMap
pizpalue.plugin.tx_ttaddress.teaser to plugin.tx_ttaddress.displayMode.ppTeaser

Corrective action

Update the related constant definitions in the site package.

Move tt_address display modes (23.08.2021, 7444801)

Description

The display modes "Google Map View" and "Teaser" are moved to the directory Extensions/tt_address/DisplayMode.

Corrective action

Update all template records where the static templates for the display modes are used.
Update all paths to the static templates in the site package.

Streamline TSconfig files from extensions (23.08.2021, aa0715f)

Description

Page TSconfig for supported extensions is now available in Extensions/[extkey]/Configuration/TsConfig/Page.tsconfig

Corrective action

In case a site package references page TSconfig files from pizpalue the pathes need to be updated.

Remove ts property noFrameVariants (23.08.2021, a670f47)

Description

The typoscript path lib.contentElement.settings. responsiveimages.noFrameVariants has been removed.

Corrective action

Use lib.contentElement.settings.responsiveimages .pageVariants instead.

Remove deprecated frame classes (23.08.2021, 2dbfc00)

Description

The following content element frames were removed: pp-animation1, pp-animation2, pp-animation3, ppCefScrollAnimation1, pp-scrollanimation2, pp-scrollanimation3

Corrective action

Define the required frame classes in the site package as needed.
Update the fluid layout/template to render the attributes.

Remove deprecated js (23.08.2021, 61d5fee)

Description

Removes the js module pizpalue as well as the function getUrlParameter.

Corrective action

JS scripts referring to the module pizpalue should use pp instead and the function call getUrlParameter should be replaced with pp.getUrlParameter.

Remove content element inline background image (23.08.2021, d3e9340)

Description

Pizpalue provided the possibility to define a background image for a content element. Since the bootstrap package provides the same functionality it can be removed here.

Corrective action

Use the background image provided by the bootstrap package.

Remove view helper structure.multiplier.getFromText (23.08.2021, e288484)

Corrective action

Use pp:data.imageVariantsTextToArray view helper instead.

Streamline support for tt_address (23.08.2021, b1b2484)

Description

Support for older versions of tt_address has been dropped and adjustments have been moved from Extensions/tt_address/4.3.0 to Extensions/tt_address. The static template has been renamed.

Corrective action

Update the extension tt_address to version 4.3.0 or higher.
Update all template records where the static template for tt_address is used.
Update all paths to the static template in the site package.

Remove support for less (23.08.2021, 05b39e0)

Corrective action

Installation using less files from pizpalue need to define their own less files.

Remove support for bootstrap3 (21.08.2021, 55bd57b)

Description

The bootstrap3 framework has been removed.

Corrective action

Site packages making use from the bootstrap3 framework provided by pizpalue need to embed bootstrap3 by them self.

Streamline prefixes in TS (21.08.2021, 25c4c93)

Description

The prefixes used to add css/scss and js has been changed to pp.

Corrective action

Site packages overriding typoscript configuration from pizpalue for css/scss and js should be updated.

Extension `form`

Data consent

Currently there isn't a form element available providing a checkbox with a label linking to an other page. To customize such a label the data attribute data-pizpalue="form-field-dataprotection" can be used.

How to use it:

Create a content element with the text to be assigned to the checkbox and assign the class pp-label-dataprotection to it.

In the form definition assign the attribute data-pizpalue="form-field-dataprotection" to the checkbox:

type: Checkbox
identifier: privacy
label: Datenschutzvereinbarung
properties:
   fluidAdditionalAttributes:
      data:
         pizpalue: form-field-dataprotection

Note

You might have a look at the distribution pizpalue_distribution to see how it can be used. Have a look to the contact form yaml definition as well as the page where the form is used.

Email finisher

The email finisher from the form extension has been extended to provide data from the finisher to the fluid template. As a result the array "finisherOptions" holds the elements senderName, senderAddress, recipientName, recipientAddress and subject. To add the sender name to the fluid template use {finisherOptions.senderName}.

Mail to system form finisher

A form finisher has been added allowing to send an email to a system for further processing the user data. A use case might be to send plaintext emails from the web site to a system processing the data for a CRM.

To customize the content being sent a template can be created and referenced to as following:

finishers:
   ...
   -
   options:
      subject: Subject for CRM
      recipientAddress: info@domain.com
      recipientName: 'CRM Admin'
      senderAddress: sender@domain.com
      senderName: 'Web Admin'
      replyToAddress: ''
      carbonCopyAddress: ''
      blindCarbonCopyAddress: ''
      format: plaintext
      attachUploads: false
      templateRootPaths:
         30: 'EXT:user_customer/Resources/Private/Templates/Form/Finishers/MailToSystem/'
   -
   ...

Note

The customized template might be started off by using the template found under "typo3conf/ext/pizpalue/Resources/Private/Templates/Form/Finishers/MailToSystem/Plaintext.html"

Extension `news`

Static templates

This extension provides more flexibility by adding a dummy asset field, a layout with an image on top and optimized image rendering. To get these features the static template (from extension) Pizpalue - news twb5 (pizpalue) needs to be added. The resulting template hierarchy would be as following:

News (news)
News Styles Twitter Bootstrap V5 (news)
Pizpalue - news twb5 (pizpalue)

Note

In case the extension eventnews is installed the template hierarchy would be as following:

News (news)
News Styles Twitter Bootstrap V5 (news)
Eventnews (eventnews)
Pizpalue - news twb5 (pizpalue)
Pizpalue - eventnews (eventnews)

Note

To show news in modal dialog content elements the template hierarchy needs to be as following:

News (news)
News Styles Twitter Bootstrap V5 (news)
Pizpalue - news twb5 (pizpalue)
Pizpalue - Main (pizpalue)

RSS Feed

To provide an RSS feed the following steps could be followed:

Create an extension template on a page where the feed should be available
Include static template (from extension) "Pizpalue - news RSS feed (pizpalue)"
Configure the behaviour using the constant editor (category "PIZPALUE: NEWS RSS")
Add "?type=9818&no_cache=1" to the page link to get the feed link

Note

To embed external feeds the extension rss_display might be used. At the time of writing the extension didn't provide a view helper to get the url from enclosed images. The branch enclosure-view-helper from fork chesio/rss_display provides one.

Extension `eventnews`

The extension eventnews adds additional fields to the news extension allowing to define events and provides a view to show them in a month based calendar. This extension alters the standard calendar view by removing the filter panel and showing event information within the calendar by means of popup dialogs (see example).

To use the calendar view provided by this extension the static Pizpalue - eventnews (pizpalue) needs to be added to Include static (from extensions) from the template record. The resulting template hierarchy would be as following:

News (news)
News Styles Twitter Bootstrap V5 (news)
Eventnews (eventnews)
Pizpalue - news (pizpalue)
Pizpalue - eventnews (eventnews)

Note

Currently there is an issue in showing the month view ( see issue 132). This might be corrected by adding the following dependency injection configuration to the site package (EXT:my_site/Configuration/Services.yaml):

GeorgRinger\News\Controller\NewsController: '@GeorgRinger\Eventnews\Controller\NewsController'

Extension `tt_address`

Common setup steps

The below mentioned packages are available through the "Display mode" available in the plugin content element.

The setup steps are similar:

Add static template "Pizpalue - tt_address [package name]"
Add TypoScript Configuration to resources from page property
Configure the package in the constant editor (category "PIZPALUE: PLUGINS", section "Addresses (tt_address)")
Add the address plugin to a page and select the corresponding view (Plugin options - Display tab - Select display mode)

Google map

This package adds a Google map showing the selected addresses.

Map showing addresses from table tt_address

Setup

Carry out the common setup steps.

"Google Map View" in the "Display mode" from the plugin content element

Note

This package adds its Fluid templates and partials to index 20 (see TS setup "plugin.tx_ttaddress.view.templateRootPaths"). To overrule these files add own resources under a higher index.

Customization

The markers info window might be customized by overriding the templates partial (file "typo3conf/ext/pizpalue/ Extensions/tt_address/GoogleMap/Resources/Private/Partials/GoogleMap.html"). The content is defined in the tag with id "pp-ttaddress-maptemplate":

<div class="pp-ttaddress-maptemplate" data-pp-amt-markertitle="company">
   <div class="pp-amt-wrap" data-pp-amt-uid="uid">
      <div class="pp-amt-imagewrap">
         <img class="pp-amt-image" src="" data-pp-amt="image" />
      </div>
      <div class="pp-amt-text">
         <h6><span data-pp-amt="company"></span>&nbsp;(<span data-pp-amt="title"></span>)</h6>
         <p data-pp-amt="description"></p>
         <p>
            <b data-pp-amt="name"></b><br />
            Tel: <span data-pp-amt="phone"></span>&nbsp;|&nbsp;
            <a href="#" data-pp-amt="email">Email</a>&nbsp;|&nbsp;
            <a href="#" target="_blank" data-pp-amt="www">Web</a>
         </p>
      </div>
   </div>
</div>

Since the data for each address is assigned to a marker through JS some data attributes and class names serve a special need.

Template attributes

Template attribute	Function
data-pp-amt-markertitle	Defines the address field used for the markers title shown when hovering over the marker
data-pp-amt-uid	The uid from the address the content is derived from
data-pp-amt	The value indicates the field used for replacing the tags content

Data attributes

Data attribute	Function
data-pp-amd-uid	Specifies the address record uid holding the data for the infowindow
data-pp-amd-imageuri	The uri from the image to be shown in the infowindow
data-pp-amd-uri	The uri to show the address details

Classes

Class	Function
pp-ttaddress-maptemplate	Identifies the template for the marker info window (is sibling from pp-ttaddress-map)
pp-amt-image	Identifies the image

Teaser

This package provides a teaser showing random address item as overlay images.

Setup

Carry out the common setup steps.

"Teaser View" in the "Display mode" from the plugin content element

Note

This package adds its Fluid templates and partials to index 22 (see TS setup "plugin.tx_ttaddress.view.templateRootPaths"). To overrule these files add own resources under a higher index.

Customization

The package provides several configuration constants allowing to define the view for different screen sizes. For further customizations the template might be overruled.

Extension `felogin`

For the extension felogin a static template is available. The template provides a slightly different rendering and some german and french translations.

Configuration

Easyconf

The extension easyconf provides a module to easily configure main aspects from the website. It allows to configure typoscript as well as site configurations. Additionally css snippets can be defined too. Thanks to these features the constant editor isn't needed much any more.

Constant editor

Many aspects from the web site can be configured through the constant editor.

To ease configuration parameters were grouped. The following main categories are available:

Category	Description
PIZPALUE: ADMINISTRATION	Everything related to the site administration
PIZPALUE: CUSTOMER BASE	Main customer related parameters
PIZPALUE: CUSTOMER STYLE	More detailed customer style related parameters
PIZPALUE: CUSTOMER SOCIAL	More detailed customer social network related parameters
PIZPALUE: CUSTOMER EXTENDED	More detailed customer related parameters
PIZPALUE: CUSTOMER PLUGINS	More detailed plugin related parameters

Note

Most extensions provide their own configurations. For more detailed configurations consult the related manual.

Scaffold

Scroll animation

This feature is using one of the libraries Twikito/scroll-effect or Josh.js. They allow to animate content elements while the page is being scrolled.

Four preconfigured animations are available in the animation dropdown menu from the appearance tab in the content element properties dialog. Those animations might be configured as well in the constant editor (category "PIZPALUE: CUSTOMER EXTENDED - Animation").

Hint

Embedding from scroll animation js-libraries is triggered by the presence from the strings data-scroll or data-josh in a content element attribute field.

App icons

In case just a simple favicon is required it can be specified in the category "PIZPALUE - CUSTOMER BASE" from the constants editor.

To get an app icon set for all major platforms the resources might be generated at the "Favicon generator" website. The resulting resources need to be copied to the server web directory and the header data assigned to the related field in the app icon section in the category "PIZPALUE - CUSTOMER BASE" from the constants editor. Remove any line breaks.

Fastmenu

By enabling the fastmenu an icon menu is shown on the right page border.

The menu items can be associated with a page or a content. In case a content is referenced it will be shown beside the menu.

The following configurations are available:

Category	Purpose
PIZPALUE:CUSTOMER BASE	To enable and disable the menu
PIZPALUE:CUSTOMER EXTENDED	To define the icon and referenced content/page
PIZPALUE:CUSTOMER STYLE	To define colors

Note

The amount of menu items can be adjusted through TS. To add a new item the following code might be used.

pizpalue.menu.fast.items {
   newItem {
      iconClass = ppicon ppicon-log-in
      contentUid =
      pageUid =
   }
}

Note

Embed new icons by generating your own icon font.

Extensions

For some extensions additional configurations are available:

SEO

Review content (focus on user experience)
Review seo tags like title-tag and description meta-tag
Create a sitemap
Create a site

Hint

In the site configuration specify a robots.txt as static route containing a sitemap. This helps search engines to crawl the site and further registrations at search engines might not be needed. An example robots.txt might look as following:

User-agent: *
Disallow: /typo3/
Disallow: /typo3_src/
Allow: /typo3/sysext/frontend/Resources/Public/*

Sitemap: https://www.domain.ch/sitemap.xml

Google

If needed follow these steps to setup and register the site at google:

Register domain as new property at search console
Verify ownership by adding google-site-verification code to the related seo constant (see figure below)
Register sitemap at google search console
Register domain in google analytics
Add google analytics code to the related seo constant (see figure below)

SEO related constants in "PIZPALUE CUSTOMER" category

Extension `news`

Layout

For the news system a template "Image on top" is provided. It might be used to render the image on top of the text (see example).

Extension `eventnews`

The following description refers to the plugin content element.

Layout

Per default the calendar view shows a calendar from the month and a list from events taking place in the selected month.

In case just the calendar should be shown the field Template Layout (register Template) can be set to Compact (month). To extend the view with a filter panel the layout Extended (month) can be selected.

Titles

The default title can be overridden by the subheader field in case the header field is empty. It is only rendered if the field ´header type is not hidden`. The header type is taken into account.

Various

Tip

In case no event is shown review the setting for the field Event Restriction under the register Eventnews.

Tip

To only show upcoming events the field Time limit (LOW) can be set to now in the plugin content element.

Tip

To show events in search results add the following TS to the setup where the plugin is located: plugin.tx_news.settings.overrideFlexformSettingsIfEmpty:= removeFromList(eventRestriction)

Tip

To change the label for the location detail link the following TS can be used: plugin.tx_pizpalue._LOCAL_LANG.default.tx-eventnews-locationDetailLink = Show location

Extension `easyconf`

A TypoScript constant to define the storage location for SCSS files has been added to the constants from easyconf.

Note

The configuration form provides an admin tab where the automatic adjustments for the site configuration can be further fine tuned.

Users manual

The content appearance consists of design and animation aspects where design is mainly concerned about structuring the content and animation about drawing the visitors attention to certain areas. Both aspects are detailed in separate sections.

Content elements introduced by this extension are rather self explanatory. Exceptions are further described in the content element section.

A scroll menu can easily be created by activating the scroll navigation in content elements. The related manual details how to create scroll menu entries and outlines the different use cases including one pager websites.

Consult the various section to learn more regarding enhancements to extensions, content gathering and available classes.

User manual sections:

Design

The arrangement and appearance from content elements can be defined on different areas. The coarse structure is defined with the page layout where structure elements like container elements might further organize the content in columns, registers, and the like. Fine tuning can be done on a content element basis by altering the frame, attributes and background.

Page layout

With a page layout the coarse page structure is defined. They can be selected in the page properties dialog under the appearance tab. See as well demo site.

Note

The page layouts with a navigation menu on the side allow to add content too.

Structure elements

With structure elements the content area might be further organized. Typical elements are containers, columns, grid, accordions and tabs. See as well demo site.

This extension mainly supports the extension container_elements powered by the extension container.

For further information refer to the extension manual.

Content element

Images tab

Image cropping

To faster crop images to be used in tiles the side ratios 2:1, 3:4, 9:16 and 1:2 were added.

Note

When defining an image crop area with the same side ratio (e.g. 2:1) as used for the content element layout the image might not fill the entire tile area. This is due to the fact that the tile area is having the exact side ratio where the images side ratio deviates from that due to the tile border. After approximating the image area with the exact tile ratio select the free side ratio to fine adjust the area.

Image variants

Usually the images are used in a content element using the content width. To optimize page loading time and reducing the data bandwidth the image sizes are adapted to the content width. This works fine for most cases.

In case one likes to use images in a content element spanning a different width (e.g. the full page width) the resolution might result to be too small resulting in not sharp images. For this situation the image variant selector has been introduced allowing to adapt the image rendering to different sizes (e.g. "Full page width").

Image scaling

The image sizes for the different screen sizes are defined by the selected image variants as well as the image column count.

Some times an editor adds additional elements for structuring the content area resulting in a smaller available space for images. To deliver the optimal image size under such conditions a scaling can be defined.

As an example consider adding a two column structure element with the first column being 33% and the second column 67% from the content width. Let's assume the two columns to be next to each other for screen sizes bigger than md. Now when adding an image to the first column (33% width) the rendered image would be two times bigger than needed (due to the system not knowing how much space is available in the column). To deliver optimal sized images the following scaling definition could be used:

xl: 0.33,
lg: 0.33,
md: 0.33,
sm: 1.0,
xs: 1.0

Important

Before adjusting the image scaling manually make sure the images aren't yet created with the correct sizes. The extension pizpalue supports image scaling for structure elements by providing view helpers (see view helpers Render/Bootstrap/Column, Structure/Wrap/Column and Structure/Multiplier/GetForColumn) and adjusting the content element template. Extensions like pp_gridelements might already make use of them and deliver correct image sizes. See as well Integration-Templating.

Appearance tab

Tile layouts

Three tile layouts and a Layout screen breakpoint selector were added.

By selecting a Layout screen breakpoint a css class is added to the content element allowing to adjust the layout depending on the screen width. This is currently used in conjunction with tile layouts but might be used in other contexts as well.

Content element layouts and layout breakpoints

Note

Tile views

Tile views can be created by arranging tiles in columns. For this the classes pp-tile-row and no-gutters are assigned to the row and pp-tile-col to the column tag. The extension pp_gridelements provides the structure element tile unit that assigns the mentioned classes directly.

The tile border width can be adjusted in the constant editor (PIZPALUE: CLIENT STYLE - Tile gutter).

In case a tile content needs to be vertically scrolled the class pp-tile-scroll-y might be assigned to the tile.

Background variants

As for the images a variants selector has been introduced for the background images allowing to adapt the background image size to the container width. In case a content element isn't embedded into a structure element it is likely that it should be displayed on the entire display width hence Full page width should be selected.

Background

The bootstrap package offers a possibility to add a background image to the content element.

Its configuration has been adapted to enable the background image as well when no frame is used for the content element. In this case just a wrapping div is added.

Attributes

Sometimes it would be handy to directly alter attributes from a content element. For example to assign additional classes, some inline style or new attributes.

This functionality has been added by introducing additional fields to the content element table and adapting the rendering accordingly. The new fields are available under the appearance tab in the "Attributes" section.

Customizing attributes for a content element

Some predefined classes and attributes can be assigned by help of the adjacent selector box. The selector box for the "Additional attributes" field shows data attributes related to the scroll animation.

Note

For security reasons all attributes are filtered. Currently just data attributes are allowed in the "Additional attributes" field.

Note

Style definitions will be included to the header when curly brackets are used. Otherwise they will be added inline.

Note

When defining styles the key #self can be used to refer to the content elements id attribute. Example: #self .frame-inner { border: red 1px dashed; }

Animation and effects

Animation

Content elements can easily be animated by adding animation classes to the field Additional classes found in the Appearance register. Animations are provided by animate.css and the available animation classes can be obtained from the demo site.

Example: To apply a bouncing effect the following classes could be used: animate__bounce.

Note

The classanimate__animated will be automatically added as soon as an animation class is present.

Scroll animation

The scroll animation feature allows to call further attention to content elements while the user is scrolling on the page. Typically content elements are moved in from the side of the page, faded up, zoomed in or flipped.

A scroll animation can be assigned to a content element by either selecting one of the predefined animations found in the "Behaviour" section or by assigning data attributes to the "Additional attributes" field in the "Appearance" tab from the content element properties dialog.

They can be further customized by help of the constant editor.

Currently the libraries Twikito/onscroll-effect, and Josh.js are supported.

Hint

For performance reasons it is suggested to use just one scroll animation library at a time.

Twikito/onscroll-effect

With the js library Twikito/onscroll-effect any number of css classes can be added to an element hence any third party animation classes can be used. To use with Animate.css just add the animation class a data-scroll attribute:

data-scroll="animate__pulse"

Hint

The class animate__animated will be automatically added upon detecting an Animate.css animation class.

The library supports other options to further define the behaviour. The details can be found on its documentation page.

Josh.js

The js library Josh.js can be used to animate content elements with the css library Animate.css. To add a scroll animation the related attributes can be added to the field Additional attributes. The available data attributes can be looked up at github.

Example:

data-josh-anim-name="pulse" data-josh-duration="1500ms" data-josh-delay="3.5s"
data-josh-iteration="5"

Content elements

Schema

Placeholders

The schema content element is used to insert structured data in JSON-LD format into the body tag by means of a script tag. It allows to use placeholders in the JSON-LD code for TS constants, getText data types and the processedData array. The following table shows some placeholder examples:

Placeholder example	Type	Description
`{$pizpalue.customer.contactName}`	TS Constant	Used as for TS setup: `{$constantName}`
`{data:field:teaser}`	getText	Wrap getText definition with `{data:\|}`. When using the key `field` data from the current content record (`tt_content`) is obtained.
`{parentData:field:teaser}`	getText	Wrap getText definition with `{data:\|}`. When using the key `field` data from the parent record is obtained. Option split can be used. Example: `{parentData:field:seo_title // field:title}`
`{processedData:schemaImages.0}` `{processedData:breadcrumb}`	processedData array	Wrap the processedData array path with `{processedData:\|}` In case the value from the `processedData` array is an instance of `FileReference` the url to the file is obtained. In case the path is `breadcrumb` a breadcrumb json markup is obtained, assuming the breadcrumb data has been created with the `MenuProcessor`.

Functions

Additionally the obtained data can be passed to a function. The following functions are available:

Function	Example usage	Description
`entityEncodeChars`	`{func:entityEncodeChars:info@domain.ch}`	Each character from `info@domain.ch` will be converted to its entity. For example `i` will be converted to `i`
`entityEncodeChars`	`{func:entityEncodeChars:{$cust.email}}`
`newLineToRn`	`{func:newLineToRn:{data:field:teaser}}`	Converts line breaks to the character sequence `\r\n`.
`stripTags`	`{func:stripTags:{data:field:teaser}}`	Applies the php function `strip_tags` to the content.

Content

In the content element an image and a text can be defined. They might be used in the JSON-LD data with the following placeholders:

Content	Placeholder
Text	`{data:field:teaser}`
Image	`{processedData:schemaImages.0}`

Attention

Double quotes can't be used in the teaser text field since they identify the json attribute values. Use single quotes instead or escape them (\").

Example

For this example an image as well as a text have been added to the content element. The image will be used for the logo and the text for the description property.

JSON-LD-code in content element:

{
  "@context" : "http://schema.org",
  "@type" : "Organization",
  "name": "{$pizpalue.customer.company}",
  "email": "{func:entityEncodeChars:{$pizpalue.customer.contactEmail}}",
  "telephone": "{$pizpalue.customer.contactPhone}",
  "faxNumber": "{$pizpalue.customer.contactFax}",
  "url" : "https://www.{$pizpalue.customer.domain}",
  "logo": "{processedData:schemaImages.0}",
  "description": "{func:newLineToRn:{data:field:teaser}}",
  "address": {
    "@type": "PostalAddress",
    "addressLocality": "{$pizpalue.customer.contactCity}, Switzerland",
    "postalCode": "CH-{$pizpalue.customer.contactZip}",
    "streetAddress": "{$pizpalue.customer.contactAddress}"
  },
  "contactPoint" : [
    { "@type" : "ContactPoint",
      "telephone" : "{$pizpalue.customer.contactPhone}",
      "contactType" : "customer service"
    }
  ]
}

JSON-LD-code embedded into body tag:

{
  "@context" : "http://schema.org",
  "@type" : "Organization",
  "name": "Company GmbH",
  "email": "&#99;&#111;&#110;&#116;&#97;&#99;&#116;&#64;&#100;&#111;&#109;&#97;&#105;&#110;&#46;&#99;&#104;",
  "telephone": "111 111 11 11",
  "faxNumber": "111 111 11 12",
  "url" : "https://www.domain.ch",
  "logo": "http://pp10.buechler.pro/fileadmin/_processed_/3/9/csm_geran-de-klerk-136351_2571a74988.jpg",
  "description": "Development of mobile phones powered by proprietary OS to guarantee privacy.",
  "address": {
    "@type": "PostalAddress",
    "addressLocality": "Ort, Switzerland",
    "postalCode": "CH-1111",
    "streetAddress": "Strasse 1"
  },
  "contactPoint" : [
    { "@type" : "ContactPoint",
      "telephone" : "111 111 11 11",
      "contactType" : "customer service"
    }
  ]
}

Scroll menu

Creation

Scroll navigation properties from a content element

The scroll menu is created by activating the scroll navigation property from content elements. The title field can be used to overwrite the default text used for the menu entry by the headings field where the position field allows to further define the order from the item in the menu.

Usage

A scroll menu can be created when content elements have the scroll navigation activated. By default just content elements for the active page are considered resulting in a local scroll menu for that particular page. By help of the easyconf form as well a global scroll menu used in one pager websites can be set up.

Global menu

A global scroll menu shows the same menu items on all pages. This is typically used in one pager websites. Usually these sites consist of a main page with all the essential business content and some side pages (e.g. a page with content regarding the user data protection). For showing the same scroll menu on all pages a page has to be assigned to the property Page in the easyconf form and the properties Data key and Menu ID have to be set to "mainnavigation".

Note

When assigning a page to the property Page using the easyconf form the properties Data key and Menu ID might be changed to "mainnavigation" upon saving the form.

Various

Popover

Popovers show additional information in a small window. Mainly they are associated with a link (see popovers component from bootstrap framework).

Adjust a popover

To adjust a popovers behaviour related attributes might be added to the link tag. The following link results in a popover showing up when hovering over the link text where clicking on it loads the TYPO3 home page.

<a class="pp-popover" data-trigger="hover" href="t3://pppopover?href=https://typo3.org&amp;content=A+text" title="A title">item</a>

Note

The popover content is parsed the same way as the RTE text by using the configuration from lib.parseFunc_RTE hence TYPO3 specific links can be used (e.g. t3://page?uid=6).

Data from type getText

The getText data type can be enabled for the RTE editor. It allows to get various data from a web site. As an example a translated text might be retrieved depending on the currently selected page language. For this users might reference data by using curly brackets within the editor (see example):

Tip

You might reference other content as defined by the "getText" data type.

The feature can be enabled through the constant editor selecting the category PIZPALUE: CUSTOMER EXTENDED (constant: pizpalue.features.content.insertData).

Warning

Enabling this feature allows editors to output sensitive data. Enable it only if security isn't compromised.

Pizpalue classes

General

Class	Description
pp-margin	Applies a margin to the container
pp-margin-sm	Applies a small margin to the container
pp-padding	Applies a padding to the container
pp-padding-sm	Applies a small padding to the container
pp-panel pp-panel-[key]	Sets the background and text for the container. Replace [key] with one of the branding colors (e.g. primary).
pp-bg-gray-[value]	Applies a gray background. Replace [value] with a number from 100 to 900.

Content element

These classes act on content element wrappers.

Class	Description
pp-frame-collapsible	Applies a negative top margin to compensate the top padding

Gallery / Image

These classes are used in conjunction with galleries (images, text & images)

Class	Description
pp-gallery-item-center	Center align gallery items (e.g. images) and don't scale images
pp-gallery-item-left	Left aligns gallery items and don't scale images
pp-gallery-item-right	Right aligns gallery items and don't scale images
pp-gallery-item-join	Joins the gallery items by removing any margin and padding
pp-gallery-item-shadow	Adds a shadow to the gallery items
pp-image-overlay	Overlays the heading to the image. Used with image content element

Utility

These classes are used in templating or together with JS.

Class	Description
pp-label-dataprotection	Used in content element to define a replacement text for a data protection notice check box (see contact page).
pp-row-height	Elements in a row using this class will have the same height (wrapping containers).
pp-below-header	Used to shift a content element below the page header by applying a negative top margin.
pp-extend-link	Assign this class to a link to make the closest ancestor container with class `frame-container` linked to the same url. Alternatively the ancestor container can be defined by the class `ppc-el-[ancestorclass name]`.
ppc-el-[ancestor class name]	Used in conjunction with the class `pp-extend-link`. Overwrites the default link ancestor. Replace `[ancestor class name]` with the class used in the ancestor container. As an example when assigning the classes `pp-extend-link ppc-el-up-my-container` to an a-tag the closest ancestor from the link having the class `up-my-container` assigned to will be linked to the same url as defined in the a-tag.

RTE

The following classes are used in the context of the real text editor.

Class	Description
pp-popover	Used to control the behaviour from popovers. Popovers that were triggered from elements having this class close when the user clicks outside the popover.

Various

Class	Description
pp-panel pp-panel-[key]	Sets the background and text as for frames. Replace [key] with one of the branding colors (e.g. primary). Handy to be used with cards to define the card background by assigning the classes to the card body.

Integration

Templating

Image variants

Image variants are used to define the image rendering taking into account different screen width. The available space might be further modified by templates, layouts, partials and content elements. The resulting variants when rendering a content element can be obtained with the pp:structure.variants view helper:

{pp:structure.variants(as: 'variants')}

Hint

The pp:structure.variants view helper can be used with the attribute initialVariants to define the base variants to apply the variantsModifiers upon. For more details have a look to the StructureVariantsUtility class.

For debugging purposes the pp:structure.modificationStack view helper might be used:

<f:if condition="{data.uid} === 6">
   {pp:structure.modificationStack(as: '_stack')}
   <f:debug>{_stack}</f:debug>
</f:if>

Structure view helpers

When creating templates structures dividing the available width might be defined (e.g. columns). By providing the system with information regarding the available space within the structures the content rendering can be optimized. A typical scenario is to render images in columns.

The main properties used by the structure view helpers are:

Property	Description
class	Classes used by the column or grid element. Example: `col col-xxl-4`
rowClass	Classes used by the wrapping row. Example: `row row-cols-md-3`
count	Number of columns rendered within the wrapping row. Is only used in case the column count per breakpoint can't be resolved by `class` and `rowClass`.

The following view helpers are available:

pp:render.bootstrap.column
pp:structure.wrap.column
pp:structure.multiplier.getForColumn

Following some examples are given to demonstrate the usage from the view helpers:

pp:render.bootstrap.column

<pp:render.bootstrap.column class="col col-md-8 col-xl-6" rowClass="row row-cols-2" gutter="40" correction="2">
   <div class="content-from-column">
      <f:cObject typoscriptObjectPath="lib.pizpalue.renderContent" data="{uid: item.data.uid}" />
   </div>
</pp:render.bootstrap.column>

The above code results in:

<div class="col col-md-8 col-xl-6">
   <div class="content-from-column">
      <f:cObject typoscriptObjectPath="lib.pizpalue.renderContent" data="{uid: item.data.uid}" />
   </div>
</div>

pp:structure.wrap.column

<pp:structure.wrap.column class="col col-md-8 col-xl-6" count="2" gutter="40" correction="2">
   <div class="col col-md-8 col-xl-6">
      <div class="content-from-column">
         <f:cObject typoscriptObjectPath="lib.pizpalue.renderContent" data="{uid: item.data.uid}" />
      </div>
   </div>
</pp:structure.wrap.column>

The above code results in:

<div class="col col-md-8 col-xl-6">
   <div class="content-from-column">
      <f:cObject typoscriptObjectPath="lib.pizpalue.renderContent" data="{uid: item.data.uid}" />
   </div>
</div>

pp:structure.multiplier.getForColumn

<div class="pp-tile-col col-xl-4"><a id="c348"></a>
   {pp:structure.multiplier.getForColumn(class: 'col-xl-4', count: 2, as: '_colMultiplier')}
   <div class="pp-tile-row row no-gutters">
      {pp:structure.multiplier.getForColumn(multiplier: _colMultiplier, class: 'col-md-6 col-xl-12', count: 2, as: '_colMultiplier')}
      {bk2k:data.imageVariants(as:'_colVariants', variants: variants, multiplier: _colMultiplier)}
      <div class="pp-tile-col col-md-6 col-xl-12">
         <f:render partial="Media/Rendering/Image" arguments="{
            file: _secondaryMedia.files.0,
            data: _secondaryMedia.data,
            settings: settings,
            variants: _colVariants}" />
      </div>
   </div>
</div>

SCSS-Mixins

The extensions provides mixins to assist in customizing a web site. Following the most used ones are listed.

Mixin	Description
`pp-make-rainbow-background($start_color, $end_color, $count: 10)`	Used to create a background with two overlapping rainbows starting from each bottom corner.
`pp-make-spaces($properties, $value, $valueBreakpoint: xl, $scaling: $pp-space-scaling)`	Used to create any kind of responsive space (padding or margin). Usage: `pp-make-spaces(margin-top, 1.5rem)`
`pp-make-frame-spaces($value, $valueBreakpoint: xl, $sibling: '.frame', $scaling: $pp-space-scaling)`	Used to create responsive frame spaces with a space of @value at $valueBreakpoint. The space is controlled by the padding and collapsing is taken into account.
`pp-make-text-shadow-outline($thickness: 3px, $color: black, $blur-radius: 5px)`	Used to create text with a shadowed outline

Changelog

The project changes can as well be looked up at Github.

Releases

Changelog for release v16.2.0

Features

[FEATURE] Add support for eventnews (08.08.2024, e268973a by Roman Büchler)
[FEATURE] Add poster to media in content elements (15.05.2024, d4cdb773 by Roman Büchler)
[FEATURE] Remove media ce restriction (10.05.2024, 082cd839 by Roman Büchler)
[FEATURE] Use bootstrap structure vh in news (28.03.2024, 5869af6b by Roman Büchler)
[FEATURE] Add slider container element (28.03.2024, e86eff3b by Roman Büchler)
[FEATURE] External grid element rendering (28.03.2024, 56c4598a by Roman Büchler)
[FEATURE] Add image variants to advanced news config (26.03.2024, 3accb4ed by Roman Büchler)
[FEATURE] Add advanced news configuration (26.03.2024, 32a296db by Roman Büchler)

Bugfixes

[BUGFIX] Bump ddev to v1.23.0 (15.05.2024, e3c611fc by Roman Büchler)
[BUGFIX] Correct indexed_search pagination (02.05.2024, 12c8086e by Roman Büchler)
[BUGFIX] Use relative file path in text replacement (24.04.2024, 98e7a789 by Roman Büchler)
[BUGFIX] Check link target sibling (02.04.2024, 81e80572 by Roman Büchler)
[BUGFIX] Enable news dummy image and variants (31.03.2024, 93816f04 by Roman Büchler)
[BUGFIX] Strictify bootstrap structure vh (28.03.2024, 3aa4bb53 by Roman Büchler)
[BUGFIX] Collapse rows in column structure elements (28.03.2024, 182a4d1c by Roman Büchler)

Breaking changes

Reference

Generated by:

git log v16.1.0..HEAD --pretty="* %s (%cd, %h by %an)" --date=format:%d.%m.%Y --abbrev-commit --grep

Note: The above list contains just commits marked with [FEATURE], [BUGFIX] and [!!!]. Complementary commits are available at Github.

Changelog for release v16.1.0

Features

[FEATURE] Add Italian translation for cookie dialog (14.03.2024, 7dd4b596 by Roman Büchler)
[FEATURE] Add fast menu svg-file support (18.01.2024, baf17f7e by Roman Büchler)
[FEATURE] Use heading for fastmenu title attribute (18.01.2024, 8312e806 by Roman Büchler)
[FEATURE] Use typolink for fast menu page link (18.01.2024, e109f3c0 by Roman Büchler)
[FEATURE] Add address, map to icon font (18.01.2024, 848aa3fd by Roman Büchler)

Bugfixes

[BUGFIX] Make column elements always collapsable (28.02.2024, 9d086f69 by Roman Büchler)
[BUGFIX] Strictify plugin rendering (14.02.2024, f9d70a06 by Roman Büchler)
[BUGFIX] Remove page header scrol flickering (19.01.2024, 8acfa199 by Roman Büchler)
[BUGFIX] Replace fastmenu content link (18.01.2024, ccce570c by Roman Büchler)

Breaking changes

Reference

Generated by:

git log v16.0.0..7dd4b596 --pretty="* %s (%cd, %h by %an)" --date=format:%d.%m.%Y --abbrev-commit --grep

Note: The above list contains just commits marked with [FEATURE], [BUGFIX] and [!!!]. Complementary commits are available at Github.

Changelog for release v16.0.0

Features

[FEATURE] Add css contrast variables (28.12.2023, b71f98fe by Roman Büchler)
[FEATURE] Add page header drop-in elements (14.11.2023, 1b814e2f by Roman Büchler)
[FEATURE] Add mastodon to social networks (04.10.2023, acf2a817 by Roman Büchler)
[FEATURE] Add search, drop google+ font icon (08.08.2023, 4a110d04 by Roman Büchler)
[FEATURE] Add conditional image reload url segment (18.07.2023, eb985652 by Roman Büchler)

Bugfixes

[BUGFIX] Resolve scss variables for news (27.12.2023, 99618744 by Roman Büchler)
[BUGFIX] Replace dropped header class field (27.11.2023, 8d26aa4b by Roman Büchler)
[BUGFIX] Use ext-syntax to import scss presets (14.11.2023, 6a8f187e by Roman Büchler)
[BUGFIX] allow classes and data attributes in RTE (14.11.2023, b9dfb4a3 by Roman Büchler)
[BUGFIX] Replace form data protection label (14.11.2023, 091c6f1f by Roman Büchler)
[BUGFIX] Use TS variants width in tests (04.10.2023, 6b337951 by Roman Büchler)
[BUGFIX] Conditionally add skip footer link (04.10.2023, 3d60bf83 by Roman Büchler)
[BUGFIX] Improve visibility of skip to content link (02.10.2023, 92d76507 by Roman Büchler)
[BUGFIX] Update cookie consent styling (28.09.2023, 17affb75 by Roman Büchler)
[BUGFIX] Fallback to render images with width property (07.09.2023, 71119504 by Roman Büchler)
[BUGFIX] Prevent overriding pagination color in frames (21.08.2023, 48a8d475 by Roman Büchler)

Breaking changes

[!!!][TASK] Make main navigation more accessible (04.10.2023, 7bdb001d by Roman Büchler)
[!!!][TASK] Move main tag to contain all relevant content (02.10.2023, 46e68455 by Roman Büchler)
[!!!][TASK] Migrate heading classes (02.10.2023, 1dc06af7 by Roman Büchler)

Reference

Generated by:

git log v15.2.0..2db789b5 --pretty="* %s (%cd, %h by %an)" --date=format:%d.%m.%Y --abbrev-commit --grep

Note: The above list contains just commits marked with [FEATURE], [BUGFIX] and [!!!]. Complementary commits are available at Github.

Changelog for release v15.2.0

Features

[FEATURE] Support tt_address (05.07.2023, 363c262e by Roman Büchler)
[FEATURE] Add frame rgb css variables (05.07.2023, 45189598 by Roman Büchler)
[FEATURE] Support touch devices in thumbnail menus (08.06.2023, 66183c82 by Roman Büchler)

Bugfixes

[BUGFIX] Reveal footer (06.07.2023, 1f2b7733 by Roman Büchler)
[BUGFIX] Use element in categorized content list (05.07.2023, 04996cc7 by Roman Büchler)
[BUGFIX] Inherit headings color from parent container (05.07.2023, 1bf7f15b by Roman Büchler)
[BUGFIX] Correct scroll position and prevent click if target exists on sit (05.07.2023, bec7866f by Roman Büchler)
[BUGFIX] Fix missing spaces in the output of content elements (05.07.2023, c72d4076 by Roman Büchler)
[BUGFIX] Correct headings contrast color condition (23.06.2023, bd61abfe by Roman Büchler)
[BUGFIX] Allow text columns in RTE (20.06.2023, f5f90037 by Roman Büchler)
[BUGFIX] Use customized eventnews view directories (20.06.2023, 935dd21c by Roman Büchler)
[BUGFIX] Render embedded frame (09.06.2023, bb52f108 by Roman Büchler)
[BUGFIX] Render standalone scroll menu (07.06.2023, f6f58fb6 by Roman Büchler)
[BUGFIX] Correct title markup in collapsible ce (30.05.2023, 86e5c1da by Roman Büchler)
[BUGFIX] Correct image variants in footer columns (18.05.2023, 7f1253e4 by Roman Büchler)

Reference

Generated by:

git log v15.1.0..HEAD --pretty="* %s (%cd, %h by %an)" --date=format:%d.%m.%Y --abbrev-commit --grep

Note: The above list contains just commits marked with [FEATURE], [BUGFIX] and [!!!]. Complementary commits are available at Github.

Changelog for release v15.1.0

Features

[FEATURE] Support additionalAttributes for content elements (08.05.2023, d3be8b92 by Roman Büchler)
[FEATURE] Add earth icons to iconfont (03.05.2023, 82955d8d by Roman Büchler)

Bugfixes

[BUGFIX] Show flags in language menu (08.05.2023, 6d2dd42e by Roman Büchler)
[BUGFIX] Strictify TCA frames modification (25.04.2023, c2a1f1a8 by Roman Büchler)
[BUGFIX] Show photo swipe icons (19.04.2023, 21907813 by Roman Büchler)
[BUGFIX] Process query params in email link handler (06.04.2023, a57ef8e2 by Roman Büchler)

Reference

Generated by:

git log v15.0.0..HEAD --pretty="* %s (%cd, %h by %an)" --date=format:%d.%m.%Y --abbrev-commit --grep

Note: The above list contains just commits marked with [FEATURE], [BUGFIX] and [!!!]. Complementary commits are available at Github.

Changelog for release v15.0.0

Features

[FEATURE] Make news button colors configurable (15.03.2023, 7f53518c by Roman Büchler)
[FEATURE] Add animate libraries configuration (03.02.2023, 09fbbcd7 by Roman Büchler)
[FEATURE] Trick link handler email verification (21.01.2023, ded697a3 by Roman Büchler)

Bugfixes

[BUGFIX] Show news detail in modal dialog (04.04.2023, 61f690cf by Roman Büchler)
[BUGFIX] Make news dummy image public (04.04.2023, 636297c3 by Roman Büchler)
[BUGFIX] Allow ts constants in email link (03.04.2023, 282ba0c5 by Roman Büchler)
[BUGFIX] Maintain nav style inside frame (15.03.2023, 4cdb0605 by Roman Büchler)
[BUGFIX] Edit logo easyconf substitution property (14.03.2023, fe912f78 by Roman Büchler)
[BUGFIX] Use standard input for color fields (08.03.2023, eef0e448 by Roman Büchler)
[BUGFIX] Use EXT-syntax to import news ts (06.03.2023, 1a6d1083 by Roman Büchler)
[BUGFIX] Prevent error related to news installation (06.03.2023, 3dc43b49 by Roman Büchler)
[BUGFIX] Complement easyconf ctrl config (28.02.2023, 2fd32313 by Roman Büchler)
[BUGFIX] Use deprecated backend partials (27.02.2023, 1047a7c7 by Roman Büchler)
[BUGFIX] Respect embedded frame background (03.02.2023, b7aeb1fc by Roman Büchler)
[BUGFIX] Adapt to new core icons (31.01.2023, 1bd20ba7 by Roman Büchler)
[BUGFIX] Use lib.contentElement for container element (14.01.2023, d286dc2c by Roman Büchler)
[BUGFIX] Remove unused jQuery reference in showscroll (13.01.2023, 248b42d9 by Roman Büchler)
[BUGFIX] Access container_elements utility class (21.12.2022, 990d4bc3 by Roman Büchler)
[BUGFIX] Configure dependency injection (15.12.2022, 4a538bcf by Roman Büchler)
[BUGFIX] Change typoscript comment token (15.12.2022, 4bd923c0 by Roman Büchler)
[BUGFIX] Initialize variable passed by reference (14.12.2022, aef52ad9 by Roman Büchler)

Breaking changes

[!!!][TASK] Drop extension news date localization (01.04.2023, c40026e4 by Roman Büchler)
[!!!][TASK] Replace bootstrap scroll spy js (26.01.2023, 64cf35d8 by Roman Büchler)
[!!!][TASK] Use easyconf constants substitution (20.01.2023, fffbaaf8 by Roman Büchler)
[!!!][TASK] Drop bootstrap 4 (14.01.2023, 171b1779 by Roman Büchler)
[!!!][TASK] Drop deprecated view helpers (13.01.2023, 2d33cae9 by Roman Büchler)
[!!!][TASK] Change google fonts url (07.01.2023, 5f17fa4b by Roman Büchler)
[!!!][TASK] Bump TYPO3 to v12.1 (12.12.2022, bbc3e16e by Roman Büchler)

Reference

Generated by:

git log v14.2.1..HEAD --pretty="* %s (%cd, %h by %an)" --date=format:%d.%m.%Y --abbrev-commit --grep

Note: The above list contains just commits marked with [FEATURE], [BUGFIX] and [!!!]. Complementary commits are available at Github.

Changelog for release v14.2.1

Bugfixes

[BUGFIX] PHPStan return types (08.12.2022, 67bcb36 by Roman Büchler)
[BUGFIX] Correct card headings color (05.12.2022, bcab389 by Roman Büchler)
[BUGFIX] Respect header link in pic overlay ce (05.12.2022, ec71076 by Roman Büchler)

Reference

Generated by:

git log v14.2.0..4b174f52 --pretty="* %s (%cd, %h by %an)" --date=format:%d.%m.%Y --abbrev-commit --grep

Note: The above list contains just commits marked with [FEATURE], [BUGFIX] and [!!!]. Complementary commits are available at Github.

Changelog for release v14.2.0

Features

[FEATURE] Add google ga4 and tag manager (18.11.2022, 7009a98 by Roman Büchler)

Bugfixes

[BUGFIX] Eliminate fastmenu interference (29.11.2022, 9642751 by Roman Büchler)
[BUGFIX] Calculate image aspect ratios smaller 1 (28.11.2022, b6a45f0 by Roman Büchler)
[BUGFIX] Cookie consent js error (18.11.2022, ab19d8e by Roman Büchler)
[BUGFIX] Main navigation js error (18.11.2022, e4b7a39 by Roman Büchler)
[BUGFIX] Rename google analytics tracking id (18.11.2022, ae602b4 by Roman Büchler)

Reference

Generated by:

git log v14.1.0..96427511 --pretty="* %s (%cd, %h by %an)" --date=format:%d.%m.%Y --abbrev-commit --grep

Note: The above list contains just commits marked with [FEATURE], [BUGFIX] and [!!!]. Complementary commits are available at Github.

Changelog for release v14.1.0

Features

[FEATURE] Load website in modal dialog (10.11.2022, d0c4b9a by Roman Büchler)
[FEATURE] Extend color selection for texticon ce (10.11.2022, dcf34e7 by Roman Büchler)
[FEATURE] Add color selector to icon group ce (09.11.2022, 14a2992 by Roman Büchler)

Bugfixes

[!][BUGFIX] Add missing easyconf pinterest field (27.10.2022, 2aaf525 by Roman Büchler)
[BUGFIX] Write main menu menu config always (22.10.2022, 5ea5e15 by Roman Büchler)
[BUGFIX] Strip link target in google map (19.10.2022, d65abfc by Roman Büchler)
[BUGFIX] Make user func TYPO3 v10 compatible (19.10.2022, 5ae81d3 by Roman Büchler)
[BUGFIX] Restore processed link text (19.10.2022, 9e10414 by Roman Büchler)
[BUGFIX] Show card with radius and background (07.10.2022, bda22dc by Roman Büchler)

Reference

Generated by:

git log v14.0.0..d0c4b9af --pretty="* %s (%cd, %h by %an)" --date=format:%d.%m.%Y --abbrev-commit --grep

Note: The above list contains just commits marked with [FEATURE], [BUGFIX] and [!!!]. Complementary commits are available at Github.

Changelog for release v14.0.0

Features

[FEATURE] Show ce inner class field for tiles (03.10.2022, 1e6400b by Roman Büchler)
[FEATURE] Add class to center align gallery item (03.10.2022, 59259a5 by Roman Büchler)
[FEATURE] Add frame inner spacing fields to ce (29.09.2022, cef6eea by Roman Büchler)
[FEATURE] Configure copyright with easyconf (26.09.2022, e2f787d by Roman Büchler)
[FEATURE] Add theme colors debug view (23.09.2022, 2c748c8 by Roman Büchler)
[FEATURE] Add back css class pp-row-height (23.09.2022, d86789e by Roman Büchler)
[!!!][FEATURE] Add content element inner class field (23.09.2022, a0beac5 by Roman Büchler)
[FEATURE] Define app icons with archive only (23.09.2022, c02504b by Roman Büchler)
[FEATURE] Add main navbar opacity (23.09.2022, 6ee5910 by Roman Büchler)
[!!!][FEATURE] Enable background color in frameless ce (23.09.2022, 635b755 by Roman Büchler)
[FEATURE] Add scss panel classes (23.09.2022, 54ce031 by Roman Büchler)
[!!!][FEATURE] Add scss frame background variables (23.09.2022, a08abdc by Roman Büchler)
[FEATURE] Add legal contact and uid to customer (23.09.2022, 35865b8 by Roman Büchler)

Bugfixes

[BUGFIX] Correct vh namespace in tt_address view (03.10.2022, 986f271 by Roman Büchler)
[BUGFIX] Correct js path in tt_address view (03.10.2022, 87bab00 by Roman Büchler)
[BUGFIX] Set card header color (03.10.2022, 8283f94 by Roman Büchler)
[BUGFIX] Set headings color in footer section (03.10.2022, b4f34a8 by Roman Büchler)
[!!!][BUGFIX] Correct background size in tiles (03.10.2022, 61ce0c8 by Roman Büchler)
[BUGFIX] Get default variants from typoscript (30.09.2022, e6ec7ef by Roman Büchler)
[BUGFIX] Correct TS constant name (23.09.2022, e65b80d by Roman Büchler)
[BUGFIX] Apply spaces for frameless ce (23.09.2022, 94f66ec by Roman Büchler)
[BUGFIX] Respect image variants in card ce (23.09.2022, 4fb4593 by Roman Büchler)
[BUGFIX] Set height for images in structure elements (23.09.2022, cda17bb by Roman Büchler)
[BUGFIX] Allow base variants with port (23.09.2022, 30a7fe3 by Roman Büchler)
[BUGFIX] Extract domain from customer provided url (23.09.2022, e4d4aa6 by Roman Büchler)
[BUGFIX] Set headings color in picoverlay ce (23.09.2022, b35de58 by Roman Büchler)

Breaking changes

[!!!][BUGFIX] Correct background size in tiles (03.10.2022, 61ce0c8 by Roman Büchler)
[!!!][FEATURE] Add content element inner class field (23.09.2022, a0beac5 by Roman Büchler)
[!!!][FEATURE] Enable background color in frameless ce (23.09.2022, 635b755 by Roman Büchler)
[!!!][TASK] Drop frameless content css class (23.09.2022, 2b38309 by Roman Büchler)
[!!!][TASK] Drop language menu css + refactor scss (23.09.2022, 217c899 by Roman Büchler)
[!!!][TASK] Drop 3rd party extension css (23.09.2022, fb97486 by Roman Büchler)
[!!!][TASK] Drop scss link and background mixins (23.09.2022, 36b7278 by Roman Büchler)
[!!!][TASK] Drop css card classes (23.09.2022, d9bb148 by Roman Büchler)
[!!!][FEATURE] Add scss frame background variables (23.09.2022, a08abdc by Roman Büchler)
[!!!][TASK] Drop redundant css color classes (23.09.2022, 914f040 by Roman Büchler)
[!!!][TASK] Rename headings color scss variable (23.09.2022, 90f9c92 by Roman Büchler)
[!!!][TASK] Remove obsolete margin from carousel (23.09.2022, fcc3ab3 by Roman Büchler)
[!!!][TASK] Drop AOS animation support (23.09.2022, e119e43 by Roman Büchler)
[!!!][TASK] Remove deprecated google-webfontfamily (23.09.2022, 9431dab by Roman Büchler)
[!!!][TASK] Remove josh attribute substitution (23.09.2022, a648acf by Roman Büchler)
[!!!][TASK] Drop deprecated EmailFinisher (23.09.2022, 606ba8e by Roman Büchler)
[!!!][TASK] Drop deprecated css classes (23.09.2022, 8d15166 by Roman Büchler)
[!!!][TASK] Drop css class pp-ce-overlaycard (23.09.2022, ae93ec0 by Roman Büchler)
[!!!][TASK] Remove custom theme (23.09.2022, 295a93f by Roman Büchler)
[!!!][TASK] Drop navbar scss properties (05.09.2022, 5bd12ee by Roman Büchler)

Reference

Generated by:

git log v13.2.0..986f271a --pretty="* %s (%cd, %h by %an)" --date=format:%d.%m.%Y --abbrev-commit --grep

Note: The above list contains just commits marked with [FEATURE], [BUGFIX] and [!!!]. Complementary commits are available at Github.

Changelog for release v13.2.0

Features

[FEATURE] Add main color to easyconf (31.08.2022, 3521eb4 by Roman Büchler)
[FEATURE] Bump josh.js to buepro/josh.js#defaa50c (27.08.2022, de07825 by Roman Büchler)

Bugfixes

[BUGFIX] Add missing scss space scaling breakpoint (05.09.2022, b140766 by Roman Büchler)
[BUGFIX] Test array in easyconf menu service (30.08.2022, e8fd4fd by Roman Büchler)
[BUGFIX] Respect variants in carousels (26.08.2022, 6c71e91 by Roman Büchler)
[BUGFIX] Apply cs rules (18.08.2022, f2e313c by Roman Büchler)
[BUGFIX] Correct warning from news in "insert record" ce (18.08.2022, 79aec06 by Roman Büchler)

Breaking changes

Reference

Generated by:

git log v13.1.0..bc2ae92e --pretty="* %s (%cd, %h by %an)" --date=format:%d.%m.%Y --abbrev-commit --grep

Note: The above list contains just commits marked with [FEATURE], [BUGFIX] and [!!!]. Complementary commits are available at Github.

Changelog for release v13.1.0

Features

[FEATURE] Add support for container_elements (15.08.2022, 56c55f7 by Roman Büchler)
[FEATURE] Support fluid style felogin (25.07.2022, faae245 by Roman Büchler)

Bugfixes

[BUGFIX] Define target for form translations (10.08.2022, 8f63a07 by Roman Büchler)
[BUGFIX] Respect bootstrap_package form translations (10.08.2022, 4b77949 by Roman Büchler)

Reference

Generated by:

git log v13.0.0..1b84c6e2 --pretty="* %s (%cd, %h by %an)" --date=format:%d.%m.%Y --abbrev-commit --grep

Note: The above list contains just commits marked with [FEATURE], [BUGFIX] and [!!!]. Complementary commits are available at Github.

Changelog for release v13.0.0

Features

[FEATURE] Add card content element (07.07.2022, ee4e608 by Roman Büchler)
[FEATURE] Make ce preview content collapsible (04.07.2022, 367c642 by Roman Büchler)
[FEATURE] Add frame indicator to content preview in be (04.07.2022, 0bc2f27 by Roman Büchler)
[FEATURE] Restrict some easyconf fields (30.06.2022, 97539fd by Roman Büchler)

Bugfixes

[BUGFIX] Set logo height to auto (05.07.2022, c1f0f7e by Roman Büchler)
[BUGFIX] Respect backend partial root paths in container (05.07.2022, 7d3da9d by Roman Büchler)
[BUGFIX] Consider type casting in EmphasizeMediaUpdate (29.06.2022, 2a7f5a7 by Roman Büchler)
[BUGFIX] Make value nullable in CssEval user function (23.06.2022, 0c6ff07 by Roman Büchler)
[BUGFIX] Use easyconf form field to obtain logo (23.06.2022, 074bd41 by Roman Büchler)

Breaking changes

[!!!][BUGFIX] Add name space prefix to content element templates (07.07.2022, e305b7d by Roman Büchler)

Reference

Generated by:

git log v12.6.0..c2c76250 --pretty="* %s (%cd, %h by %an)" --date=format:%d.%m.%Y --abbrev-commit --grep

Note: The above list contains just commits marked with [FEATURE], [BUGFIX] and [!!!]. Complementary commits are available at Github.

Changelog for release v12.6.0

Features

[FEATURE] Add css field to page record (20.06.2022, 3bda080 by Roman Büchler)
[FEATURE] Add scroll menu using bootstrap scrollspy (17.06.2022, 4a0ab36 by Roman Büchler)

Bugfixes

[BUGFIX] Test available field in PopoverLinkHandler (22.06.2022, 310d5a8 by Roman Büchler)
[BUGFIX] Test available fields in DataHandlerHook (21.06.2022, dd6b473 by Roman Büchler)
[BUGFIX] Correct image size from ce "Thumbnails of subpages" (20.06.2022, 960889d by Roman Büchler)
[BUGFIX] Remove excessive space from picture below text (17.06.2022, 66fabc0 by Roman Büchler)
[BUGFIX] Correct headings font in easyconf (14.06.2022, 5b92ace by Roman Büchler)
[BUGFIX] Limit background image in frameless content element (13.06.2022, c7f3bc9 by Roman Büchler)
[BUGFIX] Move public resources to extension directory (06.06.2022, 45c1160 by Roman Büchler)
[BUGFIX] Avoid exception in column multiplier calculation (13.05.2022, afcfca1 by Roman Büchler)
[BUGFIX] Make PizpalueFrame vh type safer (13.05.2022, c0d0f58 by Roman Büchler)
[BUGFIX] Make branding, l10n available in non composer context (12.05.2022, 032e6f6 by Roman Büchler)
[BUGFIX] Correct multiplier calculation for bootstrap classes (12.05.2022, 597186c by Roman Büchler)
[BUGFIX] Correct easyconf site map creation (04.05.2022, d493c79 by Roman Büchler)
[BUGFIX] Initialize table control fields for easyconf (04.05.2022, 70f5f54 by Roman Büchler)
[BUGFIX] Correct condition in overwriting easyconf base (02.05.2022, 8d8ffa9 by Roman Büchler)
[BUGFIX] Save empty easyconf scss declarations (02.05.2022, 176d8f0 by Roman Büchler)

Reference

Generated by:

git log v12.5.0..310d5a84 --pretty="* %s (%cd, %h by %an)" --date=format:%d.%m.%Y --abbrev-commit --grep

Note: The above list contains just commits marked with [FEATURE], [BUGFIX] and [!!!]. Complementary commits are available at Github.

Changelog for release v12.5.0

Features

[FEATURE] Add support for extension easyconf (30.04.2022, 351c6af by Roman Büchler)
[FEATURE] Add flags to language menu (25.04.2022, 23f9da9 by Roman Büchler)

Bugfixes

[BUGFIX] Add missing items for contact view (26.04.2022, b3ec528 by Roman Büchler)
[BUGFIX] Apply theme setting to frame embedded border radius (25.04.2022, bda9cac by Roman Büchler)
[BUGFIX] Add scss variable declarations to address map (25.04.2022, 2146c98 by Roman Büchler)
[BUGFIX] Remove superfluous margin from toggler (25.04.2022, f3a7d3d by Roman Büchler)
[BUGFIX] Add missing footer menu (25.04.2022, 0204ad2 by Roman Büchler)
[BUGFIX] Correct active menu state from page shortcuts (24.03.2022, a44cba5 by Roman Büchler)
[BUGFIX] Remove debug output for ce background image (23.03.2022, 88f5f58 by Roman Büchler)
[BUGFIX] Adapt to news TS constants change (23.03.2022, 09512b5 by Roman Büchler)
[BUGFIX] Make branding, l10n available in composer context (14.03.2022, 32b7939 by Roman Büchler)

Reference

Generated by:

git log v12.4.0..341630fe --pretty="* %s (%cd, %h by %an)" --date=format:%d.%m.%Y --abbrev-commit --grep

Note: The above list contains just commits marked with [FEATURE], [BUGFIX] and [!!!]. Complementary commits are available at Github.

Changelog for release v12.4.0

Features

[FEATURE] Add support for extension tt_address (11.03.2022, 253a564 by Roman Büchler)
[FEATURE] Add support for extension eventnews (11.03.2022, 2e12638 by Roman Büchler)
[FEATURE] Add role attribute to column view helper (05.03.2022, 64851af by Roman Büchler)

Bugfixes

[BUGFIX] Prevent title tag change with news in modal dialog (12.03.2022, 6926764 by Roman Büchler)
[BUGFIX] Extend content element support in frame vh (08.03.2022, 33a3640 by Roman Büchler)

Breaking changes

Reference

Generated by:

git log v12.3.0..6926764e --pretty="* %s (%cd, %h by %an)" --date=format:%d.%m.%Y --abbrev-commit --grep

Note: The above list contains just commits marked with [FEATURE], [BUGFIX] and [!!!]. Complementary commits are available at Github.

Changelog for release v12.3.0

Features

[!!!][FEATURE] Add background image to page (25.02.2022, 4bf5f18 by Roman Büchler)

Bugfixes

[BUGFIX] Add missing crop variant to background images (28.02.2022, 45e15f5 by Roman Büchler)

Breaking changes

[!!!][FEATURE] Add background image to page (25.02.2022, 4bf5f18 by Roman Büchler)

Reference

Generated by:

git log v12.2.0..8c2d3dac --pretty="* %s (%cd, %h by %an)" --date=format:%d.%m.%Y --abbrev-commit --grep

Note: The above list contains just commits marked with [FEATURE], [BUGFIX] and [!!!]. Complementary commits are available at Github.

Changelog for release v12.2.0

Features

[FEATURE] Add field to define modal dialog header (21.02.2022, 298c520 by Roman Büchler)

Bugfixes

[BUGFIX] Correct cropping TCA for news (23.02.2022, a525fcf by Roman Büchler)
[BUGFIX] Allow only available records in modal dialog (21.02.2022, e1529c1 by Roman Büchler)

Breaking changes

Reference

Generated by:

git log v12.1.0..495419d8 --pretty="* %s (%cd, %h by %an)" --date=format:%d.%m.%Y --abbrev-commit --grep

Note: The above list contains just commits marked with [FEATURE], [BUGFIX] and [!!!]. Complementary commits are available at Github.

Changelog for release v12.1.0

Features

[FEATURE] Make header fields more flexible (04.01.2022, 9f01e9f by Roman Büchler)
[FEATURE] Add type "image" to picoverlay content element (17.12.2021, c18787b by Roman Büchler)

Bugfixes

[BUGFIX] Add missing TCA config to news plugin dummy asset (13.01.2022, 0432d57 by Roman Büchler)
[BUGFIX] Correct gradient function (12.12.2021, d3d8c8f by Roman Büchler)
[BUGFIX] Style footer in picture with overlay ce (12.12.2021, 0e43246 by Roman Büchler)

Reference

Generated by:

git log v12.0.0..74484d12 --pretty="* %s (%cd, %h by %an)" --date=format:%d.%m.%Y --abbrev-commit --grep

Note: The above list contains just commits marked with [FEATURE], [BUGFIX] and [!!!]. Complementary commits are available at Github.

Changelog for release cf083d9b

Features

[FEATURE] Make structure vh's understand row classes (06.12.2021, 6360ce3 by Roman Büchler)
[FEATURE] Add maintenance site mode (05.10.2021, 4eb3a4a by Roman Büchler)
[FEATURE] Add optimize link target (04.10.2021, 2acc85c by Roman Büchler)
[FEATURE] Add upgrade wizard steps (04.09.2021, dcac749 by Roman Büchler)
[FEATURE] Add footer navigation and contact area (01.09.2021, 92ac95e by Roman Büchler)
[FEATURE] Add bootstrap package container support (01.09.2021, 1e6bcc1 by Roman Büchler)
[FEATURE] Add new DropIns to page before and after (24.08.2021, 843bef1 by Roman Büchler)

Bugfixes

[BUGFIX] Correct link color in picoverlay ce (08.12.2021, 5c8ec90 by Roman Büchler)
[BUGFIX] Test field in data handler hook (06.12.2021, 2718f3f by Roman Büchler)
[BUGFIX] Test text in ImageVariantsTextToArray vh (16.11.2021, efc6a36 by Roman Büchler)
[!!!][BUGFIX] Correct content element css classes (12.11.2021, 6770c61 by Roman Büchler)
[BUGFIX] Correct parameter signature from data handler hook (12.11.2021, 3e79803 by Roman Büchler)
[BUGFIX] Correct fastmenu script loading (04.10.2021, 57b1ccc by Roman Büchler)
[BUGFIX] Define cropping for xl screen (28.09.2021, b94cf97 by Roman Büchler)
[BUGFIX] Ensure spacing for frames is applied when set to none (24.09.2021, 973e136 by Roman Büchler)
[BUGFIX] Remove xxl breakpoint for bootstrap 4 (04.09.2021, e835ab5 by Roman Büchler)
[BUGFIX] Correct text alignment from form checkbox (03.09.2021, c161595 by Roman Büchler)
[BUGFIX] Correct deprecated css class pp-ce-overlaycard (03.09.2021, 1e0c64b by Roman Büchler)
[BUGFIX] Correct fastmenu appearance (02.09.2021, a0b1a76 by Roman Büchler)
[BUGFIX] Correct css class pp-frame-collapsible (02.09.2021, a62a983 by Roman Büchler)
[BUGFIX] Correct icon font height (02.09.2021, a528ad2 by Roman Büchler)
[BUGFIX] Array access warnings in PHP 8 (02.09.2021, d6eb14c by Roman Büchler)
[BUGFIX] Docs rendering (01.09.2021, a2de2de by Roman Büchler)
[BUGFIX] Add missing embed css to bootstrap 5 (01.09.2021, 63822bd by Roman Büchler)
[!!!][BUGFIX] Correct issues related to frame layout feature (25.08.2021, 104af36 by Roman Büchler)
[BUGFIX] Correct default image height calculation (24.08.2021, 3e70861 by Roman Büchler)
[BUGFIX] Respect gallery size settings instead of beeing smart (23.08.2021, 017905f by Roman Büchler)

Breaking changes

[!!!][TASK] Drop classes for vertical alignment (07.12.2021, eb20e89 by Roman Büchler)
[!!!][TASK] Migrate layout "Emphasize media" to ce (26.11.2021, f1cf626 by Roman Büchler)
[!!!][TASK] Reduce supported extensions (16.11.2021, b5d9464 by Roman Büchler)
[!!!][BUGFIX] Correct content element css classes (12.11.2021, 6770c61 by Roman Büchler)
[!!!][TASK] Remove rarely used animation (12.11.2021, 5ffdfb4 by Roman Büchler)
[!!!][TASK] Remove app icon meta tags (06.11.2021, f65cb3a by Roman Büchler)
[!!!][TASK] Remove deprecated backend layouts (24.09.2021, d076e08 by Roman Büchler)
[!!!][TASK] Remove figcaption alignment for image ce's (03.09.2021, d34c8e7 by Roman Büchler)
[!!!][TASK] Refactor typoscript (02.09.2021, 0ddbc3e by Roman Büchler)
[!!!][TASK] Add support for Bootstrap v5 (28.08.2021, 4b9b1aa by Roman Büchler)
[!!!][BUGFIX] Correct issues related to frame layout feature (25.08.2021, 104af36 by Roman Büchler)
[!!!][TASK] Adapt to "Drop webfontloader" (24.08.2021, 91189c0 by Roman Büchler)
[!!!][TASK] Adapt to feature "embedded frame introduction" (24.08.2021, b9976c6 by Roman Büchler)
[!!!][TASK] Remove deprecated theme (23.08.2021, 52c4407 by Roman Büchler)
[!!!][TASK] Move TS constants for tt_address display modes (23.08.2021, 171a7bd by Roman Büchler)
[!!!][TASK] Move tt_address display modes (23.08.2021, 7444801 by Roman Büchler)
[!!!][TASK] Streamline TSconfig files from extensions (23.08.2021, aa0715f by Roman Büchler)
[!!!][TASK] Remove ts property noFrameVariants (23.08.2021, a670f47 by Roman Büchler)
[!!!][TASK] Remove deprecated frame classes (23.08.2021, 2dbfc00 by Roman Büchler)
[!!!][TASK] Remove deprecated js (23.08.2021, 61d5fee by Roman Büchler)
[!!!][TASK] Remove content element inline background image (23.08.2021, d3e9340 by Roman Büchler)
[!!!][TASK] Remove view helper structure.multiplier.getFromText (23.08.2021, e288484 by Roman Büchler)
[!!!][TASK] Streamline support for tt_address (23.08.2021, b1b2484 by Roman Büchler)
[!!!][TASK] Remove support for less (23.08.2021, 05b39e0 by Roman Büchler)
[!!!][TASK] Remove support for bootstrap3 (21.08.2021, 55bd57b by Roman Büchler)
[!!!][TASK] Streamline prefixes in TS (21.08.2021, 25c4c93 by Roman Büchler)

Reference

Generated by:

git log v11.7.0..cf083d9b --pretty="* %s (%cd, %h by %an)" --date=format:%d.%m.%Y --abbrev-commit --grep

Note: The above list contains just commits marked with [FEATURE], [BUGFIX] and [!!!]. Complementary commits are available at Github.

FAQ

Administration

Installation

Q: How can the extension be installed or updated with the source code from Github?

A: Follow these steps:

Create a backup (data base as well as typo3conf folder)
Uninstall the extensions user_pizpalue and pizpalue in the extension manager
Update supported extensions (e.g. news, tt_address, timelog) as needed. If possible use tested versions.
Delete the folder typo3conf/ext/pizpalue
Download the source code from github
Upload the downloaded zip-file to typo3conf/ext
Extract the files
Rename the new folder from typo3-pizpalue-main to pizpalue
Install the extension pizpalue
Install the extension user_pizpalue

---

Q: I have to use gridelements and container together. After updating container to version 1.3.0 the container child elements aren't shown any more. How can this be fixed?

A: It might be related to the initial installation sequence from the structure extensions. You might try to order the package listing in typo3conf/PackageStates.php:

'pvh' => [
   'packagePath' => 'typo3conf/ext/pvh/',
],
'gridelements' => [
   'packagePath' => 'typo3conf/ext/gridelements/',
],
'pp_gridelements' => [
   'packagePath' => 'typo3conf/ext/pp_gridelements/',
],
'flux' => [
   'packagePath' => 'typo3conf/ext/flux/',
],
'flux_elements' => [
   'packagePath' => 'typo3conf/ext/flux_elements/',
],
'container' => [
   'packagePath' => 'typo3conf/ext/container/',
],
'container_elements' => [
   'packagePath' => 'typo3conf/ext/container_elements/',
],

Translation

Q: How can I translate strings to my language (e.g. for the cookie dialog)?

A: To contribute translating an extension consult the chapter Localization with Crowdin in the TYPO3 Explained documentation. The string to be translated most likely belongs to either the bootstrap_package or the pizpalue extension. Alternatively labels can be overridden with TS. For more details see _LOCAL_LANG.[lang-key].[label-key] from the plugin chapter in the TypoScript template reference manual.

Design

Q: The browser shows an error related to the favicon. What is wrong?

A: Most likely the fav- and appicon files aren't available or the icon header data isn' correct. To create and add the icons follow these steps:

Create the icons and the header code at realfavicongenerator.net.
Store the assets to the website root directory.
Merge the header code provided by realfavicongenerator.net to one line.
In the constant editor paste the one line header code to the Header data field, section App icon from the category PIZPALUE: CUSTOMER BASE.

Configuration

Layout/Design/Theme

Q: How can I change the design (colors, header, footer, etc.)?

A: The easiest way is to change TS constants through the constant editor. Watch out for categories starting with PIZPALUE:. Please note that changes are applied to the page where the constant is defined and all sub-pages.

---

Q: I have to adapt more aspects from the template for my project. As well it would be good to use Git in the work flow. What is the best way to do it?

A: For that purpose an extension should be used. An example extension is available at Github.

Header

Q: The start page uses a sticky header. How can I get a sticky header on all pages?

A: The extension user_pizpalue defines this behaviour (see typo3conf/ext/user_pizpalue/Configuration/TypoScript/constants.typoscript and typo3conf/ext/user_pizpalue/Configuration/TypoScript/Default/constants.typoscript) with a condition. The easiest way to overrule it is by changing the TS constant page.theme.navigation.type (found in PIZPALUE: CUSTOMER BASE, section Menu). Alternatively the extension user_pizpalue might be adapted.

---

Q: How can I get rid of the breadcrumb menu?

A: At this time PIZPALUE doesn't provide a constant for it. You might change it by selecting the constant category BOOTSTRAP PACKAGE: NAVIGATION (constant title "Breadcrumb").

---

Q: How can I use an other font in the main menu?

A: See bootstrap package wiki pages

Fastmenu

Q: I would like to use a SVG-Icon in the fastmenu. How can I do that?

A: You might define a class for the icon to be rendered and adapt scss/css as needed.

Example TS:

pizpalue.menu.fast.items {
   newItem {
      iconClass = uc-fastmenu-icon1
   }
}

Example CSS:

.uc-fastmenu-icon1 {
   background-image: url(path/to/icon.svg)
}

User

Develop

Work with site

Installation

Clone the repository

git clone https://github.com/buepro/typo3-pizpalue.git

Create site
```
composer ddev:install
```
Copied!

Development

Use local packages

To work at the same time on other packages (e.g. user_pizpalue) carry out the following steps:

Mount local directories to the container by adjusting and adding the following script to .ddev/docker-compose.mount.yaml:

services:
  web:
    volumes:
      # Mount local directory to the web containers path `/mnt/public/package`
      - "~/Projects/public:/mnt/public/package"

Add the package repository to the composer configuration:

{
   "repositories": {
      "user-pizpalue": {
         "type": "path",
         "url": "/mnt/public/package/typo3-user_pizpalue"
      }
   }
}

Create tests

Create test db with PhpMyAdmin

Clean up the db
Select tables pages, sys_template, tt_content
Set format specific options as following Enclose columns with `"` Escape columns with " * Replace NULL by \NULL

Add needed extensions

It might be needed to add the following extensions:

protected $coreExtensionsToLoad = [
   'impexp',
   'seo',
];

protected $testExtensionsToLoad = [
   'typo3conf/ext/pvh',
   'typo3conf/ext/container',
   'typo3conf/ext/container_elements',
   'typo3conf/ext/bootstrap_package',
   'typo3conf/ext/pizpalue',
];

Documentation

Create upgrade description

git log v13.2.0..7ab170cc --pretty="* %s (%cd, %h)%n+++%n%n%b%n" --date=format:%d.%m.%Y --abbrev-commit --grep "\!\!\!" > Upgrade.rst
Format headings

Notes

Bootstrap package sync status:
- Branch master: 21.08.2024 / commit 6325cbb8

Contribute

To keep the quality development respects the guidelines established by TYPO3 found in the Core API Reference.

Prefixes

The following prefixes are used:

Prefix	Meaning	Description
pp	Pizpalue	Base prefix
ppc	Pizpalue complement	Mainly used for classes complementing other classes.
ce	Content element	Used in conjunction with content elements

Examples

SCSS

.pp-demo-item {
   border: blue 1px solid;
   &.ppc-right {
      border-right: green 3px solid;
   }
}

In the above example the class ppc-right complements the class pp-demo-item. The complementing classes help to be more specific and less exhaustive (alternatively to ppc-right one might have used pp-demo-item-right). They should only be used in the context of other classes.

Pizpalue template

Introduction

What does it do?

Easy website setup

Flexible page design

Attractive structure elements

Versatile content elements

Additional content elements

Supporting popular extensions

Various

Screenshots

Structure elements

Scroll animation

Modal dialog

News

Demo site

Administration

Installation

Supported extensions

Static templates

Update

Upgrade

Extensions

Development / Maintenance

Upgrade to version 16.0

Breaking changes

Make main navigation more accessible (04.10.2023, 7bdb001d)

Description

Corrective action

Move main tag to contain all relevant content (02.10.2023, 46e68455)

Migrate heading classes (02.10.2023, 1dc06af7)

Description

Corrective action

Upgrade to version 15.0

Breaking changes

Drop extension news date localization

Corrective action

Replace bootstrap scroll spy js

Description

Corrective action

Use easyconf constants substitution

Description

Corrective action

Drop bootstrap 4

Corrective action

Drop deprecated view helpers

Description

Corrective action

Change google fonts url

Description

Corrective action

Bump TYPO3 to v12.1

Description

Upgrade to version 14.0

Breaking changes

Correct background size in tiles (03.10.2022, 61ce0c8)

Description

Corrective action

Add content element inner class field (23.09.2022, a0beac5)

Description

Corrective actions

Enable background color in frameless ce (23.09.2022, 635b755)

Description

Corrective action

Drop frameless content css class (23.09.2022, 2b38309)

Description

Corrective action

Drop language menu css + refactor scss (23.09.2022, 217c899)

Description

Corrective action

Drop 3rd party extension css (23.09.2022, fb97486)

Description

Corrective action

Drop scss link and background mixins (23.09.2022, 36b7278)

Description

Corrective action

Drop css card classes (23.09.2022, d9bb148)

Description

Corrective action

Add scss frame background variables (23.09.2022, a08abdc)

Remove deprecated `google-webfontfamily` (23.09.2022, 9431dab)

Drop css class `pp-ce-overlaycard` (23.09.2022, ae93ec0)