WCAG-compliant TYPO3 site package for Italian public administrations

BIT3
WCAG-compliant TYPO3
site package for
Italian public administrations
@abramoteso
Abramo Tesoro
tesoro@archicoop.it
github.com/Nostrabramus
www.linkedin.com/in/abramotesoro/

A BIT ABOUT ME
07/24/2023 T3DD23
Abramo Tesoro
Frontend Developer and TYPO3 Developer
at Archimede Informatica
Work with TYPO3 since 2007
Work with Bootstrap since 2015
Work with Bootstrap Italia since 2018

BOOTSTRAP ITALIA
07/24/2023 T3DD23
It’s completely open source, built on Bootstrap 5.2.3, from which it inherits all
features, components, grids and classes.
It is a specialization of Bootstrap according to the design, usability and
accessibility guidelines defined in the new 'Design Guidelines for Public
Administration Websites and Digital Services'.
Bootstrap Italia is a library developed by the
Dipartimento per la Transizione Digitale
(Department for Digital Transition) and AGID
(Agenzia per l'Italia Digitale - Agency for Digital
Italy) for building websites of municipalities and
public administrations.
www.agid.gov.it
The introduction of Bootstrap Italia was an important step forward achieved by listening to the feedback from the developer community,
the first library released (Web Toolkit) was completely self-contained and therefore made it necessary to familiarise oneself with and use
a complex specific library to realise sites for public administration.

BIT3
07/24/2023 T3DD23
BIT3 is a TYPO3 extension which implements
the Bootstrap Italia framework

GOALS
07/24/2023 T3DD23
Develop a ready-to-use TYPO3 extension that implements
the Bootstrap Italia templates, css and js libraries
A Backend Module that allows editors without integrator skills
to fully configure the website
Override templates and configurations of some core and third-party
extensions to implement layouts and features provided by Bootstrap Italia
Adding functionality and developing custom CTypes that implements
components designed by Bootstrap Italia
Publish the site package in the Reuse Catalogue,
a repository dedicated to host software developed for PA

NEXT GENERATION EU
07/24/2023 T3DD23
the site package is developed
for the new websites
of municipalities using
Next Generation EU funds
in order to obtain funding, it is necessary to pass the
accessibility tests using the apps issued by AGID
https://github.com/italia/pa-website-validator/releases

NEXT GENERATION EU
07/24/2023 T3DD23
the site package is developed
for the new websites
of municipalities using
Next Generation EU funds
in addition, the site package will have to be released
in the reuse catalogue so that it will be available to
other municipalities that wish to adopt it
https://developers.italia.it/it/search.html

Header and Colors
SITE PACKAGE - MODULE
07/24/2023 T3DD23

Contacts and Credits
07/24/2023 T3DD23

Pages and Containers
07/24/2023 T3DD23

Services
07/24/2023 T3DD23

Socials
07/24/2023 T3DD23

07/24/2023 T3DD23
Analytics (Matomo)
Google Analytics is not GDPR compliant, so AGID released
Web Analytics Italia (webanalytics.italia.it)
a specific analytics service dedicated to
public administrations powered by Matomo

SITE PACKAGE - BACKEND LAYOUTS
07/24/2023 T3DD23
We've added 8 different Backend Layouts
Home, 1 Column, 2 Column with Aside on Left,
2 Column with Aside on Right, 3 Columns
some of these are the classical page types:

07/24/2023 T3DD23
We've added 8 different Backend Layouts
News Detail, News List, Services
others are Bootstrap Italia specific page templates:

Home is the most structured Backend Layout
07/24/2023 T3DD23
in the typoscript the footer sections (colpos 11-14) are
configured with slide = -1 so that the editor can freely modify
and compose those sections of the footer in home page, so that
all pages can inherit them.
lib.content.footer.left = COA
lib.content.footer.left {
10 < styles.content.get
10 {
select.where = colPos=11
slide = -1
}
}
lib.content.footer.center = COA
lib.content.footer.center {
10 {
slide = -1
}
}
lib.content.footer.right = COA
lib.content.footer.right {
10 {
slide = -1
}
}
/Configuration/Typoscript/Library/lib.footer.setupts
Bootstrap Italia did not allow the possibility of having different footers in different
pages and therefore it was not possible to modify that section in the subpages

[page["backend_layout"] == "pagets__NewsDetail"]
temp.newsTitle = RECORDS
temp.newsTitle {
dontCheckPid = 1
tables = tx_news_domain_model_news
source.data = GP:tx_news_pi1|news
source.intval = 1
conf.tx_news_domain_model_news = TEXT
conf.tx_news_domain_model_news {
field = title
htmlSpecialChars = 1
}
wrap = |
}
temp.newsTeaser < temp.newsTitle
temp.newsTeaser {
field = teaser
htmlSpecialChars = 1
}
wrap = |
}
temp.newsDate < temp.newsTitle
temp.newsDate {
field = datetime
}
wrap = |
}
config.pageTitle.stdWrap.override.cObject < temp.newsTitle
page.10.variables {
pageTitle >
pageTitle < temp.newsTitle
teaserNews = TEXT
teaserNews < temp.newsTeaser
newsDate = TEXT
newsDate < temp.newsDate
}
[global]
/Configuration/Typoscript/Library/lib.newsdetail.setupts
07/24/2023 T3DD23
News Detail is the most complex sophisticated from the frontend point of view
Once the page with News Detail as Backend Layout has been
configured, its metadata will be modified accordingly to extract
them from the news instead of from the page…

07/24/2023 T3DD23
News Detail is the most complex sophisticated from the frontend point of view
Once the page with News Detail as Backend Layout has been
configured, its metadata will be modified accordingly to extract
them from the news instead of from the page…
…and the news plugin that renders the detail will automatically be
loaded in its content lib.newsdetail = USER
lib.newsdetail {
userFunc = TYPO3CMSExtbaseCoreBootstrap->run
extensionName = News
pluginName = Pi1
vendorName = GeorgRinger
switchableControllerActions {
News {
1 = detail
}
}
settings =< plugin.tx_news.settings
settings {
singleNews.field = uid
useStdWrap = singleNews
insertRecord = 1
listPid = {$id_archivio_news}
backPid = {$id_archivio_news}
templateLayout = 99
}
view =< plugin.tx_news.view
}
/Configuration/Typoscript/Library/lib.newsdetail.setupts

page.includeCSS {
fontawesome = EXT:bit3/Resources/Public/css/fontawesome.min.css
fontawesome {
excludeFromConcatenation = 1
disableCompression = 1
}
bootstrap = EXT:bit3/Resources/Public/css/bootstrap-italia.min.css
bootstrap {
}
style = EXT:bit3/Resources/Public/css/style.css
fonts = EXT:bit3/Resources/Public/css/fonts.css
bit3 = EXT:bit3/Resources/Public/css/bit3.css
}
/Configuration/Typoscript/Library/page.includeCSS.setupts
page.includeJS {
boostrapitaliabundle = EXT:bit3/Resources/Public/js/bootstrap-italia.bundle.min.js
boostrapitaliabundle{
defer = 1
}
}
/Configuration/Typoscript/Library/page.includeJS.setupts
SITE PACKAGE - LIBRARIES
07/24/2023 T3DD23
The site package includes the Bootstrap Italia libraries: css, js, icons, fonts…

07/24/2023 T3DD23
@charset "UTF-8";
@font-face {
font-family: 'Lora';
font-style: normal;
font-weight: 400;
src: url(../fonts/Lora/lora-v20-latin-ext_latin-regular.woff2) format('woff2'),
url(../fonts/Lora/lora-v20-latin-ext_latin-regular.woff) format('woff'),
url(../fonts/Lora/lora-v20-latin-ext_latin-regular.ttf) format('ttf'),
url(../fonts/Lora/lora-v20-latin-ext_latin-regular.svg) format('svg'),
url(../fonts/Lora/lora-v20-latin-ext_latin-regular.eot) format('eot');
}
@font-face {
font-style: italic;
font-weight: 400;
src: url(../fonts/Lora/lora-v20-latin-ext_latin-italic.woff2) format('woff2'),
url(../fonts/Lora/lora-v20-latin-ext_latin-italic.woff) format('woff'),
url(../fonts/Lora/lora-v20-latin-ext_latin-italic.ttf) format('ttf'),
url(../fonts/Lora/lora-v20-latin-ext_latin-italic.svg) format('svg'),
url(../fonts/Lora/lora-v20-latin-ext_latin-italic.eot) format('eot');
}
@font-face {
font-style: normal;
font-weight: 700;
src: url(../fonts/Lora/lora-v20-latin-ext_latin-700.woff2) format('woff2'),
url(../fonts/Lora/lora-v20-latin-ext_latin-700.woff) format('woff'),
url(../fonts/Lora/lora-v20-latin-ext_latin-700.ttf) format('ttf'),
url(../fonts/Lora/lora-v20-latin-ext_latin-700.svg) format('svg'),
url(../fonts/Lora/lora-v20-latin-ext_latin-700.eot) format('eot');
}
/Resources/Public/css/fonts.css

SITE PACKAGE - TCA STANDARD CTYPE
07/24/2023 T3DD23
Small customizations have been made in the TCAs of the default CTypes
The columns in the Bootstrap Italia image galleries is based on the Bootstrap grids, so the
number of columns that can be configured are only 1, 2, 3, 4 and 6

$GLOBALS['TCA']['tt_content']['columns']['imagecols']['config']['items'] = array (
['1',1,],
['2',2,],
['3',3,],
['4',4,],
['6',6,],
);
Configuration/TCA/Overrides/tt_content.php
07/24/2023 T3DD23
The columns in the Bootstrap Italia image galleries is based on the Bootstrap grids, so the
number of columns that can be configured are only 1, 2, 3, 4 and 6

07/24/2023 T3DD23
Added the field Layout to sys_file_reference table
to allow choosing the “thumbnail” layout for images

$customSysFileReferenceColumns = [
'layout' => [
'exclude' => true,
'label' => 'LLL:EXT:bit3/Resources/Private/Language/locallang_db.xlf:image.layout',
'config' => [
'type' => 'select',
'renderType' => 'selectSingle',
'items' => [
['LLL:EXT:bit3/Resources/Private/Language/locallang_db.xlf:image.layout.default', 0, ‘'],
['LLL:EXT:bit3/Resources/Private/Language/locallang_db.xlf:image.layout.thumbnail', 1, ''],
],
'default' => 0,
],
],
];
TYPO3CMSCoreUtilityExtensionManagementUtility::addTCAcolumns('sys_file_reference', $customSysFileReferenceColumns);
TYPO3CMSCoreUtilityExtensionManagementUtility::addFieldsToPalette('sys_file_reference', 'imageoverlayPalette', ‘layout');
Configuration/TCA/Overrides/sys_file_reference.php
07/24/2023 T3DD23

07/24/2023 T3DD23
CREATE TABLE sys_file_reference (
layout tinyint(4) DEFAULT '0' NOT NULL
);
ext_table.sql

07/24/2023 T3DD23
Added Masonry Layout to
image, textpic and textmedia CTypes

07/24/2023 T3DD23
Added Masonry Layout to
image, textpic and textmedia CTypes
Configuration/TSconfig/tt_content.pagets
TCEFORM.tt_content {
layout {
types {
image {
addItems {
201 = Masonry
}
}
textpic {
addItems {
201 = Masonry
}
}
textmedia {
addItems {
201 = Masonry
}
}
}
}
}

SITE PACKAGE - CUSTOM CTYPE
07/24/2023 T3DD23
We have added the custom CTypes provided by Bootstrap Italia

07/24/2023 T3DD23
mod.wizards.newContentElement.wizardItems.custom {
elements {
bit3_accordion {
iconIdentifier = accordion
title = LLL:EXT:bit3/Resources/Private/Language/locallang_db.xlf:accordion
description = LLL:EXT:bit3/Resources/Private/Language/locallang_db.xlf:accordion.description
tt_content_defValues {
CType = bit3_accordion
}
}
}
show := addToList(bit3_accordion)
}
/Configuration/TSconfig/Contents/Accordion.pagets
elements {
bit3_callout {
iconIdentifier = callout
title = LLL:EXT:bit3/Resources/Private/Language/locallang_db.xlf:callout
description = LLL:EXT:bit3/Resources/Private/Language/locallang_db.xlf:callout.description
CType = bit3_callout
}
}
}
show := addToList(bit3_callout)
}
/Configuration/TSconfig/Contents/Callout.pagets

07/24/2023 T3DD23
elements {
bit3_card {
iconIdentifier = card
title = LLL:EXT:bit3/Resources/Private/Language/locallang_db.xlf:card
description = LLL:EXT:bit3/Resources/Private/Language/locallang_db.xlf:card.description
CType = bit3_card
}
}
}
show := addToList(bit3_card)
}
/Configuration/TSconfig/Contents/Card.pagets
elements {
bit3_tab {
iconIdentifier = tab
title = LLL:EXT:bit3/Resources/Private/Language/locallang_db.xlf:tab
description = LLL:EXT:bit3/Resources/Private/Language/locallang_db.xlf:tab.description
CType = bit3_tab
}
}
}
show := addToList(bit3_tab)
}
/Configuration/TSconfig/Contents/Tab.pagets

07/24/2023 T3DD23
elements {
bit3_timeline {
iconIdentifier = timeline
title = LLL:EXT:bit3/Resources/Private/Language/locallang_db.xlf:timeline
description = LLL:EXT:bit3/Resources/Private/Language/locallang_db.xlf:timeline.description
CType = bit3_timeline
}
}
}
show := addToList(bit3_timeline)
}
/Configuration/TSconfig/Contents/Timeline.pagets

SITE PACKAGE - CUSTOM CTYPE - CALLOUT
07/24/2023 T3DD23
Callout

07/24/2023 T3DD23
Callout
TYPO3CMSCoreUtilityExtensionManagementUtility::addTcaSelectItem(
'tt_content',
'CType',
[
$ll .'callout',
'bit3_callout',
'callout',
'custom'
],
'accordion',
'after'
);
Configuration/TCA/Overrides/tt_content_callout.php

$GLOBALS['TCA']['tt_content']['types']['bit3_callout'] = array(
'showitem' => '
--div--;LLL:EXT:core/Resources/Private/Language/Form/locallang_tabs.xlf:general,
--palette--;;general,
--palette--;;,header;LLL:EXT:bit3/Resources/Private/Language/locallang_db.xlf:callout.titolo,
--palette--;;,bodytext;LLL:EXT:bit3/Resources/Private/Language/locallang_db.xlf:callout.bodytext,
--div--;LLL:EXT:frontend/Resources/Private/Language/locallang_ttc.xlf:tabs.appearance,
--palette--;;frames,
--palette--;;appearanceLinks,
--div--;LLL:EXT:core/Resources/Private/Language/Form/locallang_tabs.xlf:language,
--palette--;;language,
--div--;LLL:EXT:core/Resources/Private/Language/Form/locallang_tabs.xlf:access,
--palette--;;hidden,
--palette--;;access,
',
'columnsOverrides' => [
'bodytext' => [
'config' => [
'enableRichtext' => true,
]
]
]
);
07/24/2023 T3DD23
Callout
Configuration/TCA/Overrides/tt_content_callout.php

layout {
types {
bit3_callout {
addItems {
101 = Success
102 = Warning
103 = Danger
104 = Important
105 = Note
}
}
}
}
}
07/24/2023 T3DD23
Callout

$GLOBALS['TCA']['tt_content']['types']['bit3_card'] = array(
'showitem' => '
--palette--;;,header;LLL:EXT:bit3/Resources/Private/Language/locallang_db.xlf:card.titolo,
--palette--;;,subheader;LLL:EXT:bit3/Resources/Private/Language/locallang_db.xlf:card.ruolo,
--palette--;;,bodytext;LLL:EXT:bit3/Resources/Private/Language/locallang_db.xlf:card.bodytext,
--palette--;;,image;LLL:EXT:bit3/Resources/Private/Language/locallang_db.xlf:card.immagine,
--palette--;;,header_link;LLL:EXT:bit3/Resources/Private/Language/locallang_db.xlf:card.link,
‘,
'image' => [
'config' => [
'maxitems' => 1,
'autoSizeMax' => true,
SITE PACKAGE - CUSTOM CTYPE - CARD
07/24/2023 T3DD23
Card
Configuration/TCA/Overrides/tt_content_card.php

'image' => [
'config' => [
'maxitems' => 1,
'autoSizeMax' => true,
'overrideChildTca' => [
'types' => [
TYPO3CMSCoreResourceFile::FILETYPE_IMAGE => [
'showitem' => '
--palette--;LLL:EXT:core/Resources/Private/Language/
locallang_tca.xlf:sys_file_reference.imageoverlayPalette;imageTramePalette,
--palette--;;imageoverlayPalette,
--palette--;;filePalette'
],
],
],
]
],
'bodytext' => [
'config' => [
'enableRichtext' => true,
]
],
]
);
07/24/2023 T3DD23
Card
Configuration/TCA/Overrides/tt_content_card.php

07/24/2023 T3DD23
Card

layout {
types {
bit3_card{
addItems {
101 = Sindaco
102 = Assessore
103 = Consigliere
104 = Dirigente
}
}
}
}
}
07/24/2023 T3DD23
Card

SITE PACKAGE - CUSTOM CTYPE - TAB
07/24/2023 T3DD23
Tab

07/24/2023 T3DD23
Tab
Configuration/TCA/Overrides/tt_content_tab.php
'tt_content',
'CType',
[
$ll .'tab',
'bit3_tab',
'tab',
'custom'
],
'callout',
'after'
);

07/24/2023 T3DD23
Tab
$GLOBALS['TCA']['tt_content']['palettes']['tabheader'] = array(
'label' => 'LLL:EXT:bit3/Resources/Private/Language/locallang_db.xlf:tab.palette.header',
'showitem' => '
header;LLL:EXT:bit3/Resources/Private/Language/locallang_db.xlf:tab.titolo,
layout;LLL:EXT:frontend/Resources/Private/Language/locallang_ttc.xlf:layout_formlabel,
',
);
$GLOBALS['TCA']['tt_content']['palettes']['tabframes'] = array(
'label' => 'LLL:EXT:frontend/Resources/Private/Language/locallang_ttc.xlf:palette.frames',
'showitem' => '
frame_class;LLL:EXT:frontend/Resources/Private/Language/locallang_ttc.xlf:frame_class_formlabel,
space_before_class;LLL:EXT:frontend/Resources/Private/Language/locallang_ttc.xlf:space_before_class_formlabel,
space_after_class;LLL:EXT:frontend/Resources/Private/Language/locallang_ttc.xlf:space_after_class_formlabel,
',
);

07/24/2023 T3DD23
Tab
$GLOBALS['TCA']['tt_content']['types']['bit3_tab'] = array(
'showitem' => '
--palette--;;tabheader,
--palette--;;,child_item;LLL:EXT:bit3/Resources/Private/Language/locallang_db.xlf:accordion.elementi,
--palette--;;tabframes,
',
);

07/24/2023 T3DD23
Tab
layout {
types {
bit3_tab {
addItems {
101 = Orizzontale
102 = Verticale Sinistra
103 = Verticale Destra
}
}
}
}
}

SITE PACKAGE - CUSTOM CTYPE -ACCORDION
07/24/2023 T3DD23
Accordion

07/24/2023 T3DD23
Accordion
Configuration/TCA/Overrides/tt_content_accordion.php
'tt_content',
'CType',
[
$ll .'accordion',
'bit3_accordion',
'accordion',
'custom'
],
'default',
'after'
);

07/24/2023 T3DD23
Accordion
Configuration/TCA/Overrides/tt_content_accordion.php
$GLOBALS['TCA']['tt_content']['types']['bit3_accordion'] = array(
'showitem' => '
--palette--;;,header;LLL:EXT:bit3/Resources/Private/Language/locallang_db.xlf:accordion.titolo,
',
);

07/24/2023 T3DD23
Accordion - Tab
Configuration/TCA/tx_bit3_child_item.php
return [
'ctrl' => [
'title' => 'LLL:EXT:bit3/Resources/Private/Language/locallang_db.xlf:childItem.header',
'label' => 'header',
'label_alt' => 'bodytext',
'sortby' => 'sorting',
'tstamp' => 'tstamp',
'crdate' => 'crdate',
'cruser_id' => 'cruser_id',
'delete' => 'deleted',
'versioningWS' => true,
'origUid' => 't3_origuid',
'hideTable' => true,
'hideAtCopy' => true,
'prependAtCopy' => 'LLL:' . $generalLanguageFile . ':LGL.prependAtCopy',
'transOrigPointerField' => 'l10n_parent',
'transOrigDiffSourceField' => 'l10n_diffsource',
'languageField' => 'sys_language_uid',
'enablecolumns' => [
'disabled' => 'hidden',
'starttime' => 'starttime',
'endtime' => 'endtime',
],
'typeicon_classes' => [
'default' => 'child-item'
],
'searchFields' => 'header,bodytext',
],

07/24/2023 T3DD23
Accordion - Tab
'interface' => [
'showRecordFieldList' => '
hidden,
header,
bodytext
',
],
'types' => [
'0' => [
'showitem' => '
--palette--;;,header;LLL:EXT:bit3/Resources/Private/Language/locallang_db.xlf:childItem.header,
--palette--;;,bodytext;LLL:EXT:bit3/Resources/Private/Language/locallang_db.xlf:childItem.bodytext,
',
],
],
'columns' => [
'tt_content' => [
'exclude' => true,
'label' => $ll . 'childItem',
'config' => [
'type' => 'select',
'foreign_table' => 'tt_content',
'foreign_table_where' => 'AND tt_content.pid=###CURRENT_PID### AND tt_content.{#CType}='bit3_child'',
'maxitems' => 1,
'default' => 0,
],
],

07/24/2023 T3DD23
Accordion - Tab
'header' => [
'exclude' => true,
'label' => $ll . 'childItem.header',
'config' => [
'type' => 'input',
'size' => 50,
'eval' => 'trim,required'
],
],
'bodytext' => [
'label' => $ll . 'childItem.bodytext',
'l10n_mode' => 'prefixLangTitle',
'l10n_cat' => 'text',
'config' => [
'type' => 'text',
'cols' => '80',
'rows' => '15',
'softref' => 'typolink_tag,email[subst],url',
'enableRichtext' => true
],
],
],
];

07/24/2023 T3DD23
Accordion - JS Filter
Bootstrap Italia provides a specific FAQ page that municipalities must make
available to citizens
https://italia.github.io/design-comuni-pagine-statiche/sito/domande-frequenti.html
We also have added a specific layout to the CType Accordion to show the filter at
the top of the accordion elements
layout {
types {
bit3_accordion {
addItems {
101 = Top Filter
}
}
}
}
}

07/24/2023 T3DD23
Accordion - JS Filter
Bootstrap Italia provides a specific FAQ page that municipalities must make
available to citizens
https://italia.github.io/design-comuni-pagine-statiche/sito/domande-frequenti.html
We also have added a specific layout to the CType Accordion to show the filter at
the top of the accordion elements
layout {
types {
bit3_accordion {
addItems {
101 = Top Filter
}
}
}
}
}
When the Accordion content is set up with Top Filter layout the
widget for filtering the FAQs is shown on top of the accordion
elements

SITE PACKAGE - CUSTOM CTYPE - TIMELINE
07/24/2023 T3DD23
Timeline

07/24/2023 T3DD23
Configuration/TCA/Overrides/tt_content_timeline.php
'tt_content',
'CType',
[
$ll .'accordion',
'bit3_accordion',
'accordion',
'custom'
],
'default',
'after'
);
Timeline

07/24/2023 T3DD23
Configuration/TCA/Overrides/tt_content_timeline.php
$GLOBALS['TCA']['tt_content']['types']['bit3_accordion'] = array(
'showitem' => '
--palette--;;,header;LLL:EXT:bit3/Resources/Private/Language/locallang_db.xlf:accordion.titolo,
',
);
Timeline

07/24/2023 T3DD23
Timeline Child Item
Configuration/TCA/tx_bit3_timeline_item.php
return [
'ctrl' => [
'title' => 'LLL:EXT:bit3/Resources/Private/Language/locallang_db.xlf:childItem.header',
'label' => 'header',
'label_alt' => 'date,bodytext',
'sortby' => 'sorting',
'tstamp' => 'tstamp',
'crdate' => 'crdate',
'cruser_id' => 'cruser_id',
'delete' => 'deleted',
'versioningWS' => true,
'origUid' => 't3_origuid',
'hideTable' => true,
'hideAtCopy' => true,
'prependAtCopy' => 'LLL:' . $generalLanguageFile . ':LGL.prependAtCopy',
'transOrigPointerField' => 'l10n_parent',
'transOrigDiffSourceField' => 'l10n_diffsource',
'languageField' => 'sys_language_uid',
'enablecolumns' => [
'disabled' => 'hidden',
'starttime' => 'starttime',
'endtime' => 'endtime',
],
'typeicon_classes' => [
'default' => 'timeline-item'
],

07/24/2023 T3DD23
Timeline Child Item
'searchFields' => 'header,bodytext',
],
'interface' => [
'showRecordFieldList' => '
hidden,
header,
bodytext
',
],
'types' => [
'0' => [
'showitem' => '
--palette--;;,date;LLL:EXT:bit3/Resources/Private/Language/locallang_db.xlf:timeline.data,
--palette--;;,header;LLL:EXT:bit3/Resources/Private/Language/locallang_db.xlf:timeline.titolo,
--palette--;;,bodytext;LLL:EXT:bit3/Resources/Private/Language/locallang_db.xlf:childItem.bodytext,
--palette--;;,link;LLL:EXT:frontend/Resources/Private/Language/locallang_ttc.xlf:header_link_formlabel
--palette--;;,categories;LLL:EXT:core/Resources/Private/Language/Form/locallang_tabs.xlf:categories,
',
],
],
'columns' => [
'tt_content' => [
'exclude' => true,
'config' => [
'type' => 'select',

07/24/2023 T3DD23
Timeline Child Item
'tt_content' => [
'exclude' => true,
'config' => [
'type' => 'select',
'foreign_table' => 'tt_content',
'foreign_table_where' => 'AND tt_content.pid=###CURRENT_PID### AND tt_content.{#CType}='bit3_timeline'',
'maxitems' => 1,
'default' => 0,
],
],
'header' => [
'exclude' => true,
'label' => $ll . 'childItem.header',
'config' => [
'type' => 'input',
'size' => 50,
'eval' => 'trim,required'
],
],
'bodytext' => [
'config' => [

07/24/2023 T3DD23
Timeline Child Item
'bodytext' => [
'config' => [
'type' => 'text',
'cols' => '80',
'rows' => '15',
'softref' => 'typolink_tag,email[subst],url',
'enableRichtext' => true
],
],
'date' => [
'exclude' => true,
'label' => 'LLL:EXT:frontend/Resources/Private/Language/locallang_ttc.xlf:date',
'config' => [
'type' => 'input',
'renderType' => 'inputDateTime',
'eval' => 'date,int',
'default' => 0
]
],
'link' => [
'exclude' => true,
'label' => 'LLL:EXT:frontend/Resources/Private/Language/locallang_ttc.xlf:header_link',
'config' => [

07/24/2023 T3DD23
Timeline Child Item
'link' => [
'exclude' => true,
'label' => 'LLL:EXT:frontend/Resources/Private/Language/locallang_ttc.xlf:header_link',
'config' => [
'type' => 'input',
'renderType' => 'inputLink',
'size' => 50,
'max' => 1024,
'eval' => 'trim',
'fieldControl' => [
'linkPopup' => [
'options' => [
'title' => 'LLL:EXT:frontend/Resources/Private/Language/
locallang_ttc.xlf:header_link_formlabel',
],
],
],
'softref' => 'typolink'
]
],
'categories' => [
'config' => [
'type' => 'category'
]
],
],
];

07/24/2023 T3DD23

SITE PACKAGE - TSCONFIG - LAYOUTS
07/24/2023 T3DD23
More layouts added to different CTypes Configuration/TSconfig/tt_content.pagets
layout {
types {
menu_categorized_content {
addItems {
101 = List Box
102 = Bottoni
103 = Footer Menu
}
}
menu_categorized_pages {
addItems {
101 = List Box
102 = Bottoni
103 = Footer Menu
}
}
menu_pages {
addItems {
101 = List Box
102 = Bottoni
103 = Footer Menu
}
}
menu_recently_updated {
addItems {
101 = List Box
102 = Bottoni
103 = Footer Menu
}
}
menu_related_pages {
addItems {
101 = List Box
102 = Bottoni
Menus

07/24/2023 T3DD23
More layouts added to different CTypes
Sitemap
layout {
types {
menu_sitemap {
addItems {
104 = Site Map
105 = Site Map Orizzontale
}
}
}
}
}

07/24/2023 T3DD23
More layouts added to different CTypes
Uploads (File Links)
layout {
types {
uploads {
addItems {
101 = Card
}
}
}
}
}

SITE PACKAGE - COREAND THIRD PARTY EXTENSIONS
07/24/2023 T3DD23
To implement the Bootstrap Italia design we have also overwritten the templates of the extensions used
lib.contentElement {
templateRootPaths {
100 = EXT:bit3/Resources/Private/CoreExtensions/fluid_styled_content/Templates/
}
partialRootPaths {
100 = EXT:bit3/Resources/Private/CoreExtensions/fluid_styled_content/Partials/
}
layoutRootPaths {
100 = EXT:bit3/Resources/Private/CoreExtensions/fluid_styled_content/Layouts/
}
}
/Configuration/Typoscript/Library/CoreExtensions/fluidstyledcontent.setupts

07/24/2023 T3DD23
page.config.index_enable = 1
plugin.tx_indexedsearch {
settings {
displayRules = 0
displayAdvancedSearchLink = 0
targetPid = {$pages.id_search_page}
}
view {
templateRootPaths {
100 = EXT:bit3/Resources/Private/CoreExtensions/indexed_search/Templates/
}
partialRootPaths {
100 = EXT:bit3/Resources/Private/CoreExtensions/indexed_search/Partials/
}
layoutRootPaths {
100 = EXT:bit3/Resources/Private/CoreExtensions/indexed_search/Layouts/
}
}
}
/Configuration/Typoscript/Library/CoreExtensions/indexedsearch.setupts

07/24/2023 T3DD23
plugin.tx_news {
settings {
detail.media.image.maxWidth = 400
list.media {
dummyImage = EXT:bit3/Resources/Public/Images/news-no-img.jpg
image.maxWidth = 443
image.maxHeight = 245
}
listPid = {$pages.id_archivio_news}
startingpoint = {$containers.id_folder_news}
}
view {
templateRootPaths {
100 = EXT:bit3/Resources/Private/Extensions/news/Templates/
}
partialRootPaths {
100 = EXT:bit3/Resources/Private/Extensions/news/Partials/
}
layoutRootPaths {
100 = EXT:bit3/Resources/Private/Extensions/news/Layouts/
}
}
}
/Configuration/Typoscript/Library/Extensions/news.setupts

/Configuration/RTE/Default.yaml
ext_localconf.php
$GLOBALS['TYPO3_CONF_VARS']['RTE']['Presets']['bit3'] = 'EXT:bit3/Configuration/RTE/Default.yaml';
SITE PACKAGE - CKEDITOR
07/24/2023 T3DD23
We have configured CKEditor to use the styles provided by Bootstrap Italia
imports:
- { resource: "EXT:rte_ckeditor/Configuration/RTE/Processing.yaml" }
- { resource: "EXT:rte_ckeditor/Configuration/RTE/Editor/Base.yaml" }
- { resource: "EXT:rte_ckeditor/Configuration/RTE/Editor/Plugins.yaml" }
editor:
config:
contentsCss: ["EXT:bit3/Resources/Public/css/backend/ckeditor.css"]
stylesSet:
- { name: "Lead", element: "p", attributes: { 'class': 'lead' } }
- { name: "Citation", element: "p", attributes: { 'class': 'blockquote' } }
- { name: "Small", element: "small" }
- { name: "Monospace", element: "code" }
- { name: "Table", element: "table", attributes: { 'class': 'table' } }
- { name: "Table Primary", element: "table", attributes: { 'class': 'table-primary' } }
- { name: "Table Secondary", element: "table", attributes: { 'class': 'table-secondary' } }
- { name: "Table Success", element: "table", attributes: { 'class': 'table-success' } }
- { name: "Table Danger", element: "table", attributes: { 'class': 'table-danger' } }
- { name: "Table Warning", element: "table", attributes: { 'class': 'table-warning' } }
- { name: "Table Info", element: "table", attributes: { 'class': 'table-info' } }
- { name: "Table Light", element: "table", attributes: { 'class': 'table-light' } }
- { name: "Table Dark", element: "table", attributes: { 'class': 'table-dark' } }
- { name: "Table Striped", element: "table", attributes: { 'class': 'table table-striped' } }

ext_localconf.php
07/24/2023 T3DD23
- { name: "Tabella con Bordi", element: "table", attributes: { 'class': 'table table-bordered' } }
- { name: "Tabella senza Bordi", element: "table", attributes: { 'class': 'table table-borderless' } }
- { name: "Tabella Compatta", element: "table", attributes: { 'class': 'table table-sm' } }
- { name: "Riga Primary", element: "tr", attributes: { 'class': 'table-primary' } }
- { name: "Riga Secondary", element: "tr", attributes: { 'class': 'table-secondary' } }
- { name: "Riga Success", element: "tr", attributes: { 'class': 'table-success' } }
- { name: "Riga Danger", element: "tr", attributes: { 'class': 'table-danger' } }
- { name: "Riga Warning", element: "tr", attributes: { 'class': 'table-warning' } }
- { name: "Riga Info", element: "tr", attributes: { 'class': 'table-info' } }
- { name: "Riga Light", element: "tr", attributes: { 'class': 'table-light' } }
- { name: "Riga Dark", element: "tr", attributes: { 'class': 'table-dark' } }
- { name: "Row Active", element: "tr", attributes: { 'class': 'table-active' } }
- { name: "Row Success", element: "tr", attributes: { 'class': 'table-success' } }
- { name: "Row Info", element: "tr", attributes: { 'class': 'table-info' } }
- { name: "Row Warning", element: "tr", attributes: { 'class': 'table-warning' } }
- { name: "Row Danger", element: "tr", attributes: { 'class': 'table-danger' } }
- { name: "Cell Active", element: "td", attributes: { 'class': 'table-active' } }
- { name: "Cell Success", element: "td", attributes: { 'class': 'table-success' } }
- { name: "Cell Info", element: "td", attributes: { 'class': 'table-info' } }

ext_localconf.php
07/24/2023 T3DD23
- { name: "Cell Warning", element: "td", attributes: { 'class': 'table-warning' } }
- { name: "Cell Danger", element: "td", attributes: { 'class': 'table-danger' } }
- { name: "Button Default", element: "a", attributes: { 'class': 'btn btn-default' } }
- { name: "Button Primary", element: "a", attributes: { 'class': 'btn btn-primary' } }
- { name: "Button Secondary", element: "a", attributes: { 'class': 'btn btn-secondary' } }
- { name: "Button Success", element: "a", attributes: { 'class': 'btn btn-success' } }
- { name: "Button Info", element: "a", attributes: { 'class': 'btn btn-info' } }
- { name: "Button Warning", element: "a", attributes: { 'class': 'btn btn-warning' } }
- { name: "Button Danger", element: "a", attributes: { 'class': 'btn btn-danger' } }
- { name: "Button Outline Default", element: "a", attributes: { 'class': 'btn btn-outline-default' } }
- { name: "Button Outline Primary", element: "a", attributes: { 'class': 'btn btn-outline-primary' } }
- { name: "Button Outline Secondary", element: "a", attributes: { 'class': 'btn btn-outline-secondary' } }
- { name: "Button Outline Success", element: "a", attributes: { 'class': 'btn btn-outline-success' } }
- { name: "Button Outline Info", element: "a", attributes: { 'class': 'btn btn-outline-info' } }
- { name: "Button Outline Warning", element: "a", attributes: { 'class': 'btn btn-outline-warning' } }
- { name: "Button Outline Danger", element: "a", attributes: { 'class': 'btn btn-outline-danger' } }
- { name: "Mark", element: "span", attributes: { 'class': 'mark' } }
format_tags: "p;h1;h2;h3;h4;h5;h6;pre"
toolbarGroups:
- { name: styles, groups: [ format, styles ] }
- { name: basicstyles, groups: [ basicstyles, align, cleanup ] }
- { name: paragraph, groups: [ list, indent, blocks, align ] }

ext_localconf.php
07/24/2023 T3DD23
- { name: links, groups: [ links ] }
- { name: clipboard, groups: [clipboard, cleanup, undo] }
- "/"
- { name: insert }
- { name: table }
- { name: tabletools }
- { name: editing, groups: [ find, selection, spellchecker ] }
- { name: document, groups: [ mode, document, doctools ] }
- { name: tools }
- { name: others }
justifyClasses:
- text-left
- text-center
- text-right
- text-justify
extraPlugins:
- justify
- find
- bidi
- selectall
- autolink
- wordcount

ext_localconf.php
07/24/2023 T3DD23
- editorplaceholder
removePlugins:
- image
removeButtons:
processing:
allowTags:
- u
- mark
- blockquote
- em
- strong
- small
- s
- code

Configuration/Typoscript/Library/rte.setupts
lib.parseFunc_RTE {
externalBlocks {
table{
stdWrap{
HTMLparser.tags.table.fixAttrib.class.list := addToList(table, table-primary,
table-secondary, table-success, table-danger, table-warning, table-info, table-light, table-dark,
table-striped, table-bordered, table-borderless, table-sm)
wrap = <div class="table-responsive">|</div>
}
}
}
}
Bootstrap and consequently Bootstrap Italia make tables responsive by
wrapping them in a div with class table-responsive. We then added
typoscript to the lib.parseFunc_RTE object to add this feature.
07/24/2023 T3DD23

SITE PACKAGE - FORMS
07/24/2023 T3DD23
Bootstrap Italia provides an accessibility evaluation form on each page to receive feedback from users

07/24/2023 T3DD23
BIT3 implements a preconfigured form, the editor only needs to add the emails of the feedback recipients
/Resources/Private/Form/formFeedbackAccessibilita.form.yaml
renderingOptions:
submitButtonLabel: 'Invia la valutazione'
type: Form
identifier: feedbackForm
label: FeedbackForm
prototypeName: standard
finishers:
-
options:
subject: 'Feedback Accessibilità'
recipients:
abramotesoro@gmail.com: ''
senderAddress: metsmtpsender@archicoop.it
senderName: 'Feedback dal sito'
addHtmlPart: true
attachUploads: true
useFluidEmail: false
title: ''
identifier: EmailToSender
-
options:
message: 'Grazie, il tuo parere ci aiuterà a migliorare il servizio!'
contentElementUid: ''
identifier: Confirmation
renderables:
-
renderingOptions:
previousButtonLabel: ''

07/24/2023 T3DD23
previousButtonLabel: ''
nextButtonLabel: ''
type: Page
identifier: page-1
label: ''
renderables:
-
properties:
options:
1: '1'
2: '2'
3: '3'
4: '4'
5: '5'
type: RadioButton
identifier: radiobutton-1
label: 'Quanto sono chiare le informazioni su questa pagina?'
-
properties:
options:
'A volte le indicazioni non erano chiare': 'A volte le indicazioni non erano chiare'
'A volte le indicazioni non erano complete': 'A volte le indicazioni non erano complete'
'A volte non capivo se stavo procedendo correttamente': 'A volte non capivo se stavo
procedendo correttamente'
'Ho avuto problemi tecnici': 'Ho avuto problemi tecnici'
Altro: Altro
type: RadioButton

07/24/2023 T3DD23
type: RadioButton
label: 'Dove hai incontrato maggiori difficoltà?'
-
properties:
options:
'Le indicazioni erano chiare': 'Le indicazioni erano chiare'
'Le indicazioni erano complete': 'Le indicazioni erano complete'
'Capivo sempre che stavo procedendo correttamente': 'Capivo sempre che stavo procedendo
correttamente'
'Non ho avuto problemi tecnici': 'Non ho avuto problemi tecnici'
Altro: Altro
type: RadioButton
label: 'Quali sono stati gli aspetti che hai preferito? '
-
defaultValue: ''
type: Text
identifier: text-1
label: 'Vuoi aggiungere altri dettagli?'

FUTURE DEVELOPMENTS
07/24/2023 T3DD23
Publication on Reuse Catalogue, TER, Github
Module development to improve usability and add
features (contrast check, ability to add services
dynamically…)
Form Segnala Disservizio
(report service disruption)
SCSS implementation
…
Listen Page Button

THANK YOU!
BIT3
WCAG-compliant TYPO3
site package for
Italian public administrations
@abramoteso
Abramo Tesoro
tesoro@archicoop.it
github.com/Nostrabramus
www.linkedin.com/in/abramotesoro/

WCAG-compliant TYPO3 site package for Italian public administrations

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie WCAG-compliant TYPO3 site package for Italian public administrations

Ähnlich wie WCAG-compliant TYPO3 site package for Italian public administrations (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

WCAG-compliant TYPO3 site package for Italian public administrations