v11.0.0

This is the first release to support TYPO3 10.x and will extend its support until the upcoming TYPO3 LTS version in April 2020. That also means we are dropping support for TYPO3 8.7 and older for upcoming releases.

Announcement

Bootstrap 3 support and the Less Parser will be dropped with the next major version (12.x).
Please plan your upgrades to Bootstrap 4 and SCSS.

Supported TYPO3 Versions for the 11.x Release-cycle of the Bootstrap Package:

• TYPO3 9.5
• TYPO3 10.x

Logo Handling

Logos in the Bootstrap Package were traditionally handled as plain src strings that were passed into the fluid image view helper.

Example:

<img class="navbar-brand-logo-normal" src="{f:uri.image(src: settings.logo.file)}" alt="{logoAlt}" height="{settings.logo.height}" width="{settings.logo.width}">

This had several drawbacks since we are lacking the full capabilities of a file object. For this, a new processor was introduced to convert static strings into file objects. These objects are now used for the logos displayed in the header.

Processing Configuration:

page {
    10 {
        dataProcessing {
            1553883874 = BK2K\BootstrapPackage\DataProcessing\StaticFilesProcessor
            1553883874 {
                files {
                    normal = {$page.logo.file}
                    inverted = {$page.logo.fileInverted}
                }
                as = logo
            }
        }
    }
}

New Usage:

<img class="navbar-brand-logo-normal" src="{f:uri.image(image: logo.normal)}" alt="{logoAlt}" height="{settings.logo.height}" width="{settings.logo.width}">

Migrate Customizations

If you have customized the usages of the navbar, for example, you need to adapt your template to make use of the new file objects logo.normal and logo.inverted. The setting settings.logo.file and settings.logo.fileInverted is not set anymore and will throw an exception if still passed to the image uri view helper.

Replace the following:

<f:if condition="{settings.logo.file}"> > <f:if condition="{logo.normal}">
<f:if condition="{settings.logo.fileInverted}"> > <f:if condition="{logo.inverted}">
{f:uri.image(src: settings.logo.file)} > {f:uri.image(image: logo.normal)}
{f:uri.image(src: settings.logo.fileInverted)} > {f:uri.image(image: logo.inverted)}

High Resolution Images

By popular request, we are now adding high-resolution options to the existing responsive image rendering. The Bootstrap Package does not activate them by default, but it can be added relatively easily by configuration.

Example configuration to enable high-resolution support for the default variant for devices with a minimum device pixel ration from 1.5 and 2.

lib.contentElement.settings.responsiveimages.variants {
    default {
        sizes {
            1\.5x {
                multiplier = 1.5
            }
            2x {
                multiplier = 2
            }
        }
    }
}

The data for image rendering is now extended with a sub-set for high-resolution variants. If you did not overwrite the default templates, it will just work as soon as you add the configuration. If you have overwritten the default templates, it will still work as before but you need to add the new support for high-resolution images yourself.

Please check the new updated templates and adjust your code if you want this support.

There is now a new key called sizes in every variant that should be rendered. This data-set consists of several entries each with a default key for a normal rendering (1x). This key will be added automatically and is always available. It is not possible to store sizes smaller than 1. Each size contains a multiplier, which is calculated with the base size.

Example:
Base: 1000px

Minimum Device Pixel Ratio = 1.5
Multiplier = 1.25
Result: 1250px

Minimum Device Pixel Ratio = 2
Multiplier = 1.5
Result: 1500px

See: #678

Timeline Content Element

You are now able to also set the time of an event in the timeline 😂. This is enabled by default.

If you do not want to show the time as before you can simply change the date format back to the original configuration.

plugin.bootstrap_package_contentelements {
    timeline.date.format = %B %e, %Y
}

The timeline also got more easy to customize, we added some new options. You will figure out ;)

$timeline-item-spacing: 1.5rem !default;
$timeline-item-padding: 1.5rem !default;
$timeline-item-border: 1px solid currentColor !default;
$timeline-item-border-radius: 0 !default;
$timeline-item-shadow: 0 1px 0 0 rgba(0, 0, 0, .15) !default;
$timeline-item-headline-color: $primary !default;
$timeline-item-headline-size: 1.5rem !default;
$timeline-item-date-size: .8rem !default;
$timeline-item-color: $body-color !default;
$timeline-item-bg: #ffffff !default;
$timeline-item-caption-bg: #f2f2f2 !default;

$timeline-icon-color: $body-color !default;
$timeline-icon-bg: #ffffff !default;
$timeline-icon-size: 46px !default;
$timeline-icon-space: 10px !default;
$timeline-icon-border: 3px solid currentColor !default;
$timeline-icon-border-radius: 50% !default;
$timeline-icon-border-opacity: .25 !default;

$timeline-marker-size: 16px !default;
$timeline-marker-bg: $timeline-icon-bg !default;
$timeline-marker-border: $timeline-icon-border !default;
$timeline-marker-border-radius: $timeline-icon-border-radius !default;
$timeline-marker-border-opacity: $timeline-icon-border-opacity !default;

$timeline-path-border: 2px dashed currentColor !default;
$timeline-path-opacity: .25 !default;

Example:

plugin.bootstrap_package.settings.scss {
    timeline-item-headline-size = 2rem
    timeline-item-date-size = 1rem
    timeline-item-border = 2px solid currentColor
    timeline-item-border-radius = 50% 2%/2% 50%
    timeline-icon-color = #ffffff;
    timeline-icon-bg = $primary
    timeline-icon-border-radius = 50% 40%/40% 50%
    timeline-icon-border-opacity = 1
    timeline-marker-bg = #fafafa
}

Image Preview of PDFs now enabled

OK, that one needs explanation. To deliver the best results possible, the bootstrap package has a strict type checking before passing assets to the correct renderings. Even if your system was capable of rendering images from PDFs it was not allowed by default through those type checkings, since a PDF is in the mimetype group application. That means we were not able to simply allow these application group since that would also mean that the system would try to generate a image from a zip file, like in fluid styled content.

Examples:

• <img src="/fileadmin/my.pdf" />
• <img src="/fileadmin/my.zip" />

Since there is still a huge demand for PDF previews, we made the decision to extend the current typechecks. TYPO3 allows you to configure imagefile_ext and mediafile_ext in its configuration. We are now also allowing the processing of files with extensions configured in the according lists.

See: 77549d3

Icon Group Content Element

The element had more potential than it was made use of, so it got a spec upgrade and is now much more versatile and useful and reduces the necessity for custom adjustments. You can now add links, add more text through the RTE, select the number of columns and choose the icon position.

Examples:
https://typo3.com/about-typo3/why-typo3-cms#c6282

SVG ViewHelper

The Inline SVG-Viewhelper now also can add a css class to the svg tag. Yupp - thats it.

<bk2k:inlineSvg 
    class="my-css-class"
    image="{item.icon}"
    width="32"
    height="32" />

<svg class="my-css-class" height="32" width="32">...</svg>

EXT:seo

The Bootstrap Package also cared about meta-data in the past, since we have dropped 8.7 support and TYPO3 now ships its own implementation we added a requirement to the new SEO extension.

Changelog

BREAKING

• [!!!][TASK] Drop seo related meta tag settings 1dc73ff
• [!!!][TASK] Section Menu hides single page header and empty entries (#707) b47e848
• [!!!][FEATURE] Make timeline more flexible e4a6434
• [!!!][FEATURE] Enable time settings for timeline 0f44976
• [!!!][TASK] Drop jquery dependency from cookie consent wrapper 207de1c
• [!!!][TASK] Drop data relation viewhelper a18c46d
• [!!!][TASK] Remove fallback for extension configuration d3fcd7d
• [!!!][TASK] Drop automatic language menu polyfill 6989ed6

FEATURE

• [FEATURE] Introduce text carousel item 2a7e529
• [FEATURE] Enable rich text editor for call to action carousel item 3049b34
• [FEATURE] Make media renderer options configurable 76d883a
• [FEATURE] Make header display date format configurable 04225dc
• [FEATURE] Add make icon position in icongroup configurable d05ca34
• [FEATURE] Allow processing of configured file types (#709) 77549d3
• [!!!][FEATURE] Make timeline more flexible e4a6434
• [FEATURE] Make icon spacing configurable in timeline 57c71dd
• [FEATURE] Add variables to configure timeline headline and date size 0039dc6
• [!!!][FEATURE] Enable time settings for timeline 0f44976
• [FEATURE] Add support for highres images (#678) b8f7d91
• [FEATURE] Support class attribute in inline svg viewhelper 13f7071
• [FEATURE] Add rss social media icon - fixes #629 eb1508d
• [FEATURE] Add vk social media icon - fixes #651 9fcf8de
• [FEATURE] Allow content slide configuration for all layouts and colPos 159dda4
• [FEATURE] Make icongroup more usable by allowing to change visual behaviour f7672c3
• [FEATURE] Enable links in icon group a530ee9
• [FEATURE] Collapsible in accordion should scroll to the top of its contents (#589) 4a12836

TASK

• [TASK] Add linter configuration for less files ff143de
• [!!!][TASK] Drop seo related meta tag settings 1dc73ff
• [TASK] Remove obsolete useCacheHash option for pagebrowser a7da4e2
• [TASK] Add stylelint for scss linting (#711) 14b7e8d
• [TASK] Mark TYPO3 v10.0.0 as compatible ab93487
• [TASK] Add dependency to scssphp/scssphp and update bundled code 7fb656d
• [TASK] Configure app-dir e7a0b2b
• [TASK] Set loading attribute to lazy for images 4d196f0
• [TASK] Optimize cardgroup and menus 6c69d81
• [TASK] Bump stringstream from 0.0.5 to 0.0.6 (#713) 1a51d24
• [TASK] Bump lodash.mergewith from 4.6.1 to 4.6.2 (#730) d786efc
• [TASK] Add FUNDING.yml 41dc8da
• [TASK] Bumb bootstrap3 to 3.4.1 48b881a
• [TASK] Bumb popperjs to 1.15.0 cefce3a
• [TASK] Update slack register link (#722) eb3ce17
• [TASK] Bumb cookieconsent to 3.1.1 e1ec2e4
• [TASK] Bumb jQuery to 3.4.1 8b073ba
• [TASK] Update ddev to 1.9.1 f84b1a3
• [!!!][TASK] Section Menu hides single page header and empty entries (#707) b47e848
• [TASK] Update ddev to 1.8.0 08a4487
• [TASK] Bump tar from 2.2.1 to 2.2.2 (#694) 5c4ed23
• [TASK] Bump fstream from 1.0.11 to 1.0.12 (#700) c063b54
• [TASK] Bump sshpk from 1.13.1 to 1.16.1 (#702) 97d9da8
• [TASK] Update ddev to 1.7.1 1b81159
• [TASK] Disable deploy stage on forks aa76461
• [TASK] Extract cookie consent from main setup and constants 292a489
• [TASK] Add watch task to package.json f4f6815
• [!!!][TASK] Drop jquery dependency from cookie consent wrapper 207de1c
• [TASK] Use file objects for logo 5c881c9
• [TASK] Cleanup svg viewhelper 386ca14
• [TASK] Add cgl command to composer.json e632786
• [TASK] Change build order e46a2ba
• [TASK] Optimize all SVGs 7594180
• [TASK] Update build dependencies d252cb0
• [TASK] Remove unused image lazyload css df9f64f
• [TASK] Expose grunt build tasks to yarn 8c0b16d
• [TASK] Remove changelog from documentation and refer to release notes on github 625902b
• [TASK] Use bk2k/extension-helper for release support 9fe8288
• [TASK] Enable xdebug for development setup 991f2d4
• [TASK] Require seo extension a8f1548
• [TASK] Update modernizr to 3.7.0 0e4f443
• [TASK] Update photoswipe to 4.1.3 292ef67
• [TASK] Require supported core extensions in development mode 7ab2610
• [TASK] Update to bootstrap 4.3.1 849b941
• [TASK] Update scssphp and use fork to apply patches. 1595760
• [TASK] Ensure scss and lf files are checked out with lf c1f4cb8
• [TASK] Add ddev development configuration c382b4f
• [TASK] Strip pagets_ from pagelayout variable and set default if empty fbc40d0
• [TASK] Remove typolinkEnableLinksAcrossDomains since its obsolete with siteconfiguration 95a30c7
• [TASK] Enable css und js compression by default 1411558
• [TASK] Remove obsolete realurl setting c1a5d22
• [!!!][TASK] Drop data relation viewhelper a18c46d
• [TASK] Cleanup extension configuration f980445
• [TASK] Include seo extension by default if installed 3267945
• [TASK] Use symfony expression language for typoscript conditions fd28722
• [TASK] Remove legacy config settings from documentation 962a84c
• [TASK] Remove deprecated TCA options - fixes #543 a788f76
• [TASK] Use UpgradeWizardInterface in upgrade wizards 68d7bb1
• [TASK] Drop usage of PATH_site b33103f
• [!!!][TASK] Remove fallback for extension configuration d3fcd7d
• [!!!][TASK] Drop automatic language menu polyfill 6989ed6
• [TASK] Adjust to use Core's FlexFormService directly 6c8395e
• [TASK] Adjust to use Fluid's AbstractViewHelper directly 9ea0cb1
• [TASK] Adjust for removed code in TemplateService ba8dbc3
• [TASK] Remove PHP 7.3 from travis until php-cs-fixer is compatible 9f55be4
• [TASK] Update travis configuration 9abfd3b
• [TASK] Adjust version constraints for TYPO3 v10 6ee8af6
• [TASK] Add config directory to demo site deployment 94b5e1b
• [TASK] Update bootstrap to 4.2.1 - fixes #627 ac6541a
• [TASK] Add vscode to gitignore e50ea55
• [TASK] Update npm dependencies 3ed67ce
• [TASK] Update Bootstrap 3.x to 3.4.0 030e972
• [TASK] Update leafo/scssphp to v0.7.7 - fixes #612 270616e
• [TASK] Name hooks and always register them, regardless of context 1707256
• [TASK] Add option to disable the web font loader b3bfa57
• [TASK] Mention site introduction repository in readme a9890dc
• [TASK] Cleanup issue templates 88492bc
• [TASK] Update issue template (#599) 6983c7a
• [TASK] Include TYPO3 v9.5 in pull request template 93731a7
• [TASK] Include TYPO3 v9.5 in issue template 579da24
• [TASK] Add minimum scale to viewport configuration 078950e
• [TASK] Use ip instead of url for deployment travis ssh known hosts f69e964
• [TASK] Remove install notification for unsupported webservers - fixes #562 67ab683
• [TASK] Add forgotten textpic and textmedia alignment 7f0ba94

BUGFIX

• [BUGFIX] Make UpgradeWizards repeatable (#720) bcf69eb
• [BUGFIX] Add missing aria-label translations for breadcrumb and nav toggle f348098
• [BUGFIX] Add missing space correction for icongroup in scss 76e8add
• [BUGFIX] Correct false typoscript default for 'custom-select-indicator' (#724) c37061e
• [BUGFIX] Avoid spooky random fluid compilation errors ba633fa
• [BUGFIX] Avoid card-header link color inheritance 867b292
• [BUGFIX] Remove travis deploy stage for pull requests (#710) c9d4862
• [BUGFIX] Add remove obsolete comma 538d3a7
• [BUGFIX] Add missing default parameter for icongroup 0fffbbd
• [BUGFIX] Add fontloader css and js only to header if content exists - fixes #703 d0efeeb
• [BUGFIX] Make cookieconsent variables overwriteable - fixes #704 24da893
• [BUGFIX] Add missing description field to timeline images 9280a6d
• [BUGFIX] Correct icon placement in navbar eaf0c40
• [BUGFIX] Correct variable spelling error and set variables of timeline to default 201969b
• [BUGFIX] Use full datetime format for timeline items 961ebcc
• [BUGFIX] $_EXTKEY is not available anymore in v10 e4b9f5b
• [BUGFIX] Respect target option for title link in card-group 7f2225c
• [BUGFIX] Respect target option for links in card-group 132a5d3
• [BUGFIX] Restore IE11 compatibility for cookie consent 95d45cf
• [BUGFIX] Prevent collapsing of frames - fixes #618 82e8fd1
• [BUGFIX] Add missing crop variants to carousel image - fixes #665 571dbf8
• [BUGFIX] Disable rendering of footer-section-meta if all containing elements are disabled - fixes #657 55a6eb9
• [BUGFIX] Remove obsolete/invalid replacements in composer.json 716f807
• [BUGFIX] Correct comment formatting 0f4a263
• [BUGFIX] Use lf instead of crlf in tab svg 24e38e1
• [BUGFIX] htaccess does not allow pages that end with "rc" - fixes #652 25af394
• [BUGFIX] Use error object in form field template (#641) 26b2fa9
• [BUGFIX] Ensure type safety for ViewHelper calling ImageService (#640) 15b6626
• [BUGFIX] Ensure type safety for ViewHelper calling ImageService (#639) 409ddd4
• [BUGFIX] Render data-interval only on carousel if value exists ab754c6
• [BUGFIX] Do not process svg file if it does not contain content bd8169c
• [BUGFIX] Add table context to typoscriptObjectPath for tt_content rendering fcd180a
• [BUGFIX] ce uploads accepts sorting direction (#630) e04fd7c
• [BUGFIX] Correct spelling error in install service a459c57
• [BUGFIX] Remove empty line to match cgl 39f19fc
• [BUGFIX] Enable basic tests again (#628) de164ce
• [BUGFIX] Correct dependencies in composer.json 1029565
• [BUGFIX] Show caption in lightbox when title is empty - fixes #626 2bd79cd
• [BUGFIX] Minimize word breaks in figure captions (#621) ed1c0fb
• [BUGFIX] Typo: 'boostrap' should be 'bootstrap' (#625) 9b7c43f
• [BUGFIX] Do not overwrite button stylings in footer sections 1cf21ed
• [BUGFIX] Make Less Parser PHP 7.3 compatible (#617) 4e53257
• [BUGFIX] Ensure parallax effect works across all desktop browsers - fixes #610 e912374
• [BUGFIX] Keep page accessible on early javascript errors 8f8c0c8
• [BUGFIX] Catch exception in TYPO3 8.7 backend on database configuration missmatch 021a9a5
• [BUGFIX] Minor fixes to wording - fixes #606 a2d3148
• [BUGFIX] Avoid update problems and always include sql adjustments for sys_language 465f5e1
• [BUGFIX] Move parsefunc and dynamic content to content rendering definition bb7f3a8
• [BUGFIX] Use typolink instead of page viewhelper for wizard fields 6cf28f7
• [BUGFIX] Do not use rem in bootstrap 3 context - part 2 dcbc912
• [BUGFIX] Do not use rem in bootstrap 3 context 4ebffc5
• [BUGFIX] Make standalone element configuration availabe as rendering template f21b759
• [BUGFIX] Remove obsolete unsetting of the list content element for plugins 91a1b68
• [BUGFIX] Correct path in comment to bootstrap resource files - fixes #590 4c9fd78
• [BUGFIX] Respect title configuration in menu card and menu thumbnail elements - fixes #591 c0ed7e5
• [BUGFIX] Streamline file property access to also lead sys_file data - #578 1325f3e
• [BUGFIX] Add fallback handling for unsupported pointer events in safari - #571 535596d
• [BUGFIX] Correct styling of accordion - fixes #579 6ed0e90
• [BUGFIX] Ensure element browser links working in carousel - fixes #575 a301039
• [BUGFIX] Adjust comment in ext_tables.php f0df62c
• [BUGFIX] Fix typo in comment (#580) 166a63d
• [BUGFIX] Ensure photoswipe scss vars can be adjusted 4837b06
• [BUGFIX] Adapt navigation documentation for TypoScript changes since v9 (#567) ced0fd7
• [BUGFIX] Correct placement of main navigation dropdowns on small viewports - fixes #561, #565 72427d0
• [BUGFIX] Respect overrides for enable-rounded scss variable - #558 2d6754f
• [BUGFIX] Correct TCA for carousel small (#557) 6c8a631
• [BUGFIX] use correct default value for texticon icon type (#559) d378b0a
• [BUGFIX] Correct link color bubbling for sections in bootstrap 4 4d23a56
• [BUGFIX] Prevent color bubbling for cards 8ab40f0
• [BUGFIX] Correct primary label in bs4 typoscript constants (#554) ee8a02b

MISC

• Update issue templates 6302970