### Install Bootstrap Package via Composer

Source: https://github.com/benjaminkott/bootstrap_package/blob/master/Documentation/Installation/Index.rst

Use this command to add the Bootstrap Package to your TYPO3 project using Composer.

```bash
composer require bk2k/bootstrap-package
```

--------------------------------

### Fluid Example for Dynamic Content with Slide

Source: https://github.com/benjaminkott/bootstrap_package/wiki/Allow-content-slide-configuration-for-all-layouts-and-colPos

Use this Fluid View Helper to render dynamic content, specifying the column position ('colPos') and slide behavior ('slide'). This example renders content from colPos 9 with sliding enabled up to the site root.

```fluid
<f:cObject typoscriptObjectPath="lib.dynamicContent" data="{colPos: '9', slide: '-1'}" />
```

--------------------------------

### Modify Default Variant Configuration

Source: https://github.com/benjaminkott/bootstrap_package/blob/master/Documentation/Configuration/ImageRendering/Index.rst

Example of how to change the default configuration for the 'default' image variant. Ensure the breakpoint and width values align with your design requirements.

```typoscript
lib.contentElement.settings.responsiveimages.variants {
    default {
        breakpoint = 1200
        width = 1100
    }
}
```

--------------------------------

### Definition List Example with '|' Delimiter

Source: https://github.com/benjaminkott/bootstrap_package/wiki/Using-Bullet-Lists-of-type-Definition-list

Demonstrates how to format bullet list items to be processed as definition lists. The first item on each line is treated as a definition term (<dt>), and the rest as definition descriptions (<dd>). This uses the default CommaSeparatedValueProcessor with '|' as the delimiter.

```text
dt item 1|dd item 1a
dt item 2|dd item 2a|dd item 2b
dt item 3|dd item 3a
```

--------------------------------

### Assign targetPid to Main Fluid Template

Source: https://github.com/benjaminkott/bootstrap_package/wiki/Add-Indexed-Search-to-Navbar

Assign the configured Indexed Search target PID to your main Fluid template using TypoScript setup. This makes the PID available as a setting in your templates.

```typoscript
page.10.settings.pageIds.search = {$plugin.tx_indexedsearch.settings.targetPid}
```

--------------------------------

### Modify MenuProcessor Settings via TypoScript Setup

Source: https://github.com/benjaminkott/bootstrap_package/wiki/Code-Snippets

This snippet demonstrates how to change MenuProcessor settings, such as limiting the maximum number of items for a specific page. The change is applied only when the page UID matches the condition.

```typoscript
[page["uid"] == 1]
	t_content.menu_card_dir.dataProcessing.20.maxItems = 4
[GLOBAL]
```

--------------------------------

### PHP User Function for Breadcrumb Value

Source: https://github.com/benjaminkott/bootstrap_package/wiki/Extend-the-breadcrumb

Implement a PHP user function to retrieve and return a dynamic value for the breadcrumb. This example extracts a 'documentId' from query parameters.

```php
<?php declare(strict_types=1);

namespace Vendor\Package\UserFunc;

class TypoScriptUserFunc
{
    /**
     * @param string
     * @param array
     * @return string
     */
    public function breadrumbValue(string $content, array $conf): string
    {
        $queryParams = $GLOBALS['TYPO3_REQUEST']->getQueryParams() ?? [];
        if (!isset($queryParams['tx_package_show']['documentId'])) {
            return '';
        }

        // @TODO RESOLVE VALUE
        $value = $queryParams['tx_package_show']['documentId'];

        return $value;
    }
}
```

--------------------------------

### Remove 'Show' Page from Breadcrumb in TypoScript

Source: https://github.com/benjaminkott/bootstrap_package/wiki/Extend-the-breadcrumb

Configure TypoScript to exclude specific elements from the breadcrumb trail. This example demonstrates removing the 'Show' page by adjusting the data processing range.

```typoscript
[SOME CONDITION]
page {
    10 {
        dataProcessing {
            30 {
                special.range = 0|-2
            }
        }
    }
}
[end]
```

--------------------------------

### Configure Image Rendering for Backend Layouts

Source: https://github.com/benjaminkott/bootstrap_package/blob/master/Documentation/Configuration/ImageRendering/Index.rst

Set multipliers, gutters, and corrections for image rendering based on backend layouts and columns. This allows for fine-tuning image sizes within different layout structures.

```typoscript
lib.contentElement.settings.responsiveimages.backendlayout {
    my_layout {
        0 {
            multiplier {
                default = 0.75
                large = 0.75
            }
            gutters {
                default = 40
                large = 40
            }
            corrections {
                default = 25
                large = 25
            }
        }
    }
}
```

--------------------------------

### Image Rendering Logic

Source: https://github.com/benjaminkott/bootstrap_package/blob/master/Resources/Private/Partials/ContentElements/Media/Rendering/Image.html

This snippet demonstrates the logic for calculating and rendering responsive image sources using FluidTYPO3's template syntax. It includes calculations for breakpoints, aspect ratios, and dimensions, and utilizes `f:uri.image` to generate image URLs.

```fluid
{variant.breakpoint as integer}
{variant.width as integer}
{variant.aspectRatio as float}
{width / aspectRatio}
{height as integer}
{f:if(condition: breakpoint, then: 'media="(min-width: {breakpoint}px)"')} 
{sizeConfig.multiplier as float}
{sizeWidth * width}
{sizeConfig.multiplier as float}
{sizeHeight * height}
{f:uri.image(image: file, cropVariant: name, width: '{sizeWidth}c', height: '{sizeHeight}c')}
{f:uri.image(image: file, cropVariant: name, maxWidth: sizeWidth)}
{srcset}
{sizeUrl}
{sizeKey}{f:if(condition: iteration.isLast, else: ',')}
 f:format.raw()}
srcset="{srcset}">
{defaultAspectRatio as float}
{defaultWidth / aspectRatio}
{defaultHeight as integer}c
![{file.properties.alternative}]({src} "{file.properties.title}")
```

--------------------------------

### Include Google Fonts CSS in setup.typoscript

Source: https://github.com/benjaminkott/bootstrap_package/wiki/Use-Multiple-Google-Fonts

Include the necessary Google Fonts CSS link in your setup.typoscript file. Ensure external CSS libraries are correctly configured.

```typoscript
page {
    includeCSSLibs {
        font = https://fonts.googleapis.com/css?family=Amatic+SC:700|Oswald:400,700&display=swap
        font {
            external = 1
            disableCompression = 1
            excludeFromConcatenation = 1
        }
    }
}
```

--------------------------------

### Run All Tests in scssphp

Source: https://github.com/benjaminkott/bootstrap_package/blob/master/Contrib/scssphp/README.md

Execute all unit tests using PHPUnit from the project's root directory.

```bash
vendor/bin/phpunit tests
```

--------------------------------

### Build Frontend Files

Source: https://github.com/benjaminkott/bootstrap_package/blob/master/Documentation/Contribution/Index.rst

Rebuild the combined and minified CSS files after making changes to SCSS files. Ensure these steps are followed to avoid pipeline failures. Changes to CSS files must be committed.

```bash
cd Build
npm ci
npm run build
```

--------------------------------

### Perform Static Analysis with phpstan

Source: https://github.com/benjaminkott/bootstrap_package/blob/master/Contrib/scssphp/README.md

Run static analysis on the scssphp codebase using phpstan.

```bash
make phpstan
```

--------------------------------

### Implement Search Form in Navbar Partial

Source: https://github.com/benjaminkott/bootstrap_package/wiki/Add-Indexed-Search-to-Navbar

Overwrite the `Navigation/MainAfter` or `Navigation/MainBefore` drop-in partial to include a search form. This form uses Fluid's form view helper to submit search queries.

```html
<ul class="navbar-nav">
    <li class="nav-item">
        <f:form
            extensionName="IndexedSearch"
            pluginName="Pi2"
            controller="Search"
            action="search" method="post"
            pageUid="{settings.pageIds.search}"
        >
            <div class="input-group">
                <f:form.textfield
                    name="search[sword]"
                    class="form-control"
                />
                <div class="input-group-append">
                <button class="btn btn-primary" type="submit">Search</button>
                </div>
            </div>
        </f:form>
    </li>
</ul>
```

--------------------------------

### Media Query for Responsive Images

Source: https://github.com/benjaminkott/bootstrap_package/blob/master/Resources/Private/Partials/ContentElements/Carousel/General/BackgroundImage.html

Constructs media queries for responsive images based on minimum width and pixel density. This enables adaptive image loading.

```html
(min-width: {breakpoint}px) {mediaBreakpoint}
```

```html
(-webkit-min-device-pixel-ratio: {sizeDppx}) and {mediaBreakpoint}
```

```html
{variantStyle}
```

```html
@media {mediaQuery}
```

--------------------------------

### Enable Bootstrap Package Lightbox in TypoScript

Source: https://github.com/benjaminkott/bootstrap_package/wiki/Enable-Bootstrap-Package-Lightbox-in-EXT:News

Configure TypoScript to enable the lightbox for news media images. This involves setting the 'enabled' flag and defining relevant CSS classes and dimensions.

```typoscript
plugin.tx_news.settings.detail {
                media.image {
                                lightbox {
                                                enabled = 1
                                                class = {$plugin.bootstrap_package_contentelements.lightbox.cssClass}
                                                width = {$plugin.bootstrap_package_contentelements.lightbox.image.maxWidth}
                                                height = {$plugin.bootstrap_package_contentelements.lightbox.image.maxHeight}
                                                rel = {$plugin.bootstrap_package_contentelements.lightbox.prefix}
                                }
                }
}
```

--------------------------------

### Include Font Awesome Free CSS

Source: https://github.com/benjaminkott/bootstrap_package/wiki/Include-external-WebFont

Include the Font Awesome Free CSS library from an external URL. Set `external = 1` to treat it as an external resource, `disableCompression = 1` to prevent compression, and `excludeFromConcatenation = 1` to ensure it's not bundled with other CSS files.

```typoscript
page.includeCSSLibs {
    fontawesomeFree = https://use.fontawesome.com/releases/v5.5.0/css/all.css
    fontawesomeFree {
        external = 1
        disableCompression = 1
        excludeFromConcatenation = 1
    }
}
```

--------------------------------

### Responsive Image Configuration

Source: https://github.com/benjaminkott/bootstrap_package/blob/master/Resources/Private/Partials/ContentElements/Carousel/General/BackgroundImage.html

Defines responsive image settings for content elements, including breakpoints, widths, and pixel density. This ensures optimal image display across devices.

```html
{settings.responsiveimages.contentelements.{data.CType}.background_image}
```

```html
{variant.breakpoint as integer}
```

```html
{variant.width as integer}
```

```html
{sizeConfig.multiplier as float}
```

```html
{sizeWidth * width}
```

```html
{sizeKey as float}
```

--------------------------------

### Enable High-Resolution Image Support

Source: https://github.com/benjaminkott/bootstrap_package/blob/master/Documentation/Configuration/ImageRendering/Index.rst

Configure multipliers for high-resolution image support (e.g., 1.5x, 2x) for specific variants. This ensures sharper images on high-density displays.

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

--------------------------------

### Configure Image Rendering for Content Elements

Source: https://github.com/benjaminkott/bootstrap_package/blob/master/Documentation/Configuration/ImageRendering/Index.rst

Customize image rendering settings like multipliers, gutters, and corrections for specific content elements. This provides granular control over image display per content type.

```typoscript
lib.contentElement.settings.responsiveimages.contentelements {
    my_content_element {

```

--------------------------------

### Format Code with PHP CS Fixer

Source: https://github.com/benjaminkott/bootstrap_package/blob/master/Documentation/Contribution/Index.rst

Automatically reformat the source code according to the project's Coding Guidelines using PHP CS Fixer. This command should be run from the project root.

```bash
composer cgl
```

--------------------------------

### Enable Sass Spec Tests in scssphp

Source: https://github.com/benjaminkott/bootstrap_package/blob/master/Contrib/scssphp/README.md

Enable full sass-spec compatibility tests by setting the TEST_SASS_SPEC environment variable.

```bash
TEST_SASS_SPEC=1 vendor/bin/phpunit tests
```

--------------------------------

### Define Default Image Variants

Source: https://github.com/benjaminkott/bootstrap_package/blob/master/Documentation/Configuration/ImageRendering/Index.rst

Configure default image variants with their breakpoints and widths. These settings determine which image size is used based on the device's screen width.

```typoscript
lib.contentElement.settings.responsiveimages.variants {
    default {
        breakpoint = 1200
        width = 1100
    }
    large {
        breakpoint = 992
        width = 920
    }
    medium {
        breakpoint = 768
        width = 680
    }
    small {
        breakpoint = 576
        width = 500
    }
    extrasmall {
        breakpoint = unset
        width = 374
    }
}
```

--------------------------------

### Overwrite News Detail Media Image Partial

Source: https://github.com/benjaminkott/bootstrap_package/wiki/Enable-Bootstrap-Package-Lightbox-in-EXT:News

Create or overwrite the MediaImage.html partial in your site package to implement the lightbox functionality. This Fluid template checks if the lightbox is enabled and wraps the image accordingly.

```html
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
      xmlns:n="http://typo3.org/ns/GeorgRinger/News/ViewHelpers"
      xmlns:bk2k="http://typo3.org/ns/BK2K/BootstrapPackage/ViewHelpers"
      data-namespace-typo3-fluid="true">

<div class="mediaelement mediaelement-image">
    <f:variable name="src"><f:uri.image image="{mediaElement}" /></f:variable>
    <f:if condition="{mediaElement.link}">
        <f:then>
            <f:link.typolink parameter="{mediaElement.link}" target="{n:targetLink(link:mediaElement.link)}">
				<f:image image="{mediaElement}" title="{mediaElement.title}" alt="{mediaElement.alternative}" loading="{settings.detail.media.image.lazyLoading}" maxWidth="{f:if(condition: settings.media.maxWidth, then: settings.media.maxWidth, else: settings.detail.media.image.maxWidth)}" maxHeight="{f:if(condition: settings.media.maxHeight, then: settings.media.maxHeight, else: settings.detail.media.image.maxHeight)}" additionalAttributes="{itemprop:'image'}" />
            </f:link.typolink>
        </f:then>
        <f:else>
            <f:if condition="{settings.detail.media.image.lightbox.enabled}">
                <f:then>
                    <a
                        href="{f:uri.image(image:mediaElement, maxWidth:'{settings.detail.media.image.lightbox.width}', maxHeight:'{settings.detail.media.image.lightbox.height}')}"
                        title="{mediaElement.title}"
                        data-lightbox-caption="{mediaElement.description}"
                        class="{settings.detail.media.image.lightbox.class}"
                        data-lightbox-width="{bk2k:data.imageInfo(src: src,property: 'width')}"
                        data-lightbox-height="{bk2k:data.imageInfo(src: src,property: 'height')}"
                        rel="{settings.detail.media.image.lightbox.rel}">
                        <f:image image="{mediaElement}" title="{mediaElement.title}" alt="{mediaElement.alternative}" maxWidth="{f:if(condition: settings.media.maxWidth, then: settings.media.maxWidth, else: settings.detail.media.image.maxWidth)}" maxHeight="{f:if(condition: settings.media.maxHeight, then: settings.media.maxHeight, else: settings.detail.media.image.maxHeight)}" />
                    </a>
                </f:then>
                <f:else>
		       <f:image image="{mediaElement}" title="{mediaElement.title}" alt="{mediaElement.alternative}" loading="{settings.detail.media.image.lazyLoading}" maxWidth="{f:if(condition: settings.media.maxWidth, then: settings.media.maxWidth, else: settings.detail.media.image.maxWidth)}" maxHeight="{f:if(condition: settings.media.maxHeight, then: settings.media.maxHeight, else: settings.detail.media.image.maxHeight)}" additionalAttributes="{itemprop:'image'}" />
                </f:else>
            </f:if>
        </f:else>
    </f:if>
</div>
<f:if condition="{mediaElement.description}">
    <p class="news-img-caption">
        {mediaElement.description}
    </p>
</f:if>
</html>
```

--------------------------------

### Check Coding Standard (PSR12)

Source: https://github.com/benjaminkott/bootstrap_package/blob/master/Contrib/scssphp/README.md

Verify the scssphp codebase against the PSR12 coding standard using phpcs.

```bash
vendor/bin/phpcs --standard=PSR12 --extensions=php bin src tests *.php
```

--------------------------------

### Define Font Families and Weights in constants.typoscript

Source: https://github.com/benjaminkott/bootstrap_package/wiki/Use-Multiple-Google-Fonts

Configure the base font family, weight, and heading font family and weight for your project. This sets the CSS variables used by the SCSS files.

```typoscript
page {
    theme {
        googleFont {
            enable = 0
        }
    }
}
plugin.bootstrap_package.settings.scss {
    font-family-base = 'Oswald', sans-serif
    font-weight-normal = 400
    headings-font-family = 'Amatic SC', cursive
    headings-font-weight = 700
}
```

--------------------------------

### Configure Frame Backgrounds in TypoScript Constants

Source: https://github.com/benjaminkott/bootstrap_package/wiki/Add-additional-Background-Colors-to-Content-Elements

Configure the frame backgrounds in TypoScript Constants to apply the defined SCSS variables. Multiple colors should be comma-separated. Default colors are always added and merged with custom settings.

```typoscript
plugin.bootstrap_package.settings.scss {
    frame-backgrounds = (red:(background: #ff0000, link-color: #ffeeee, link-hover-color: #ffffff))
}
```

--------------------------------

### Configure Google Font in TypoScript

Source: https://github.com/benjaminkott/bootstrap_package/wiki/Use-Any-Google-Font

Define the Google Font name and weights to be used. This configuration is essential for the font to be loaded and applied correctly.

```typoscript
page {
    theme {
        googleFont {
            font = Buda
            weight = 300,400,700
        }
    }
}
plugin.bootstrap_package {
    settings {
        scss {
            font-family-base = "#{$google-webfont}", sans-serif
            headings-font-family = "#{$google-webfont}", sans-serif
        }
    }
}
```

--------------------------------

### Update Footer Colors with TypoScript

Source: https://github.com/benjaminkott/bootstrap_package/wiki/Customize-Footer-Colors

Use TypoScript constants to define background and text colors for different footer sections. This allows for granular control over the footer's appearance.

```typoscript
plugin.bootstrap_package.settings.scss {
    # Update primary and secondary colors
    primary = #00883E
    secondary = #CCE5A2
    # Update footer colors
    footer-sections = (content:(background: $body-bg, color: $body-color, link-color: $primary), meta:(background: #f6f6f6, color: #313131, link-color: $primary))
}
```

--------------------------------

### Configure PageSpeed for srcset Images

Source: https://github.com/benjaminkott/bootstrap_package/wiki/Using-PageSpeed-with-bootstrap_package

Add this line to your mod_pagespeed configuration file to enable optimization for images using the srcset attribute. This is necessary because mod_pagespeed does not optimize these by default. After adding the line, reload your webserver.

```apache
ModPagespeedUrlValuedAttribute source srcset image
```

--------------------------------

### Raw Style Output

Source: https://github.com/benjaminkott/bootstrap_package/blob/master/Resources/Private/Partials/ContentElements/Carousel/General/BackgroundImage.html

Outputs raw styles, often used for applying custom CSS directly. This can be useful for complex styling requirements not covered by standard options.

```html
{styles -> f:format.raw()}
```

--------------------------------

### Configure Indexed Search targetPid

Source: https://github.com/benjaminkott/bootstrap_package/wiki/Add-Indexed-Search-to-Navbar

Set the target PID for Indexed Search in TypoScript constants. This determines which page the search results will be displayed on.

```typoscript
plugin.tx_indexedsearch.settings.targetPid = 123
```

--------------------------------

### Generate CSS Background Image with Fluid TYPO3

Source: https://github.com/benjaminkott/bootstrap_package/blob/master/Resources/Private/Partials/ViewHelpers/Frame/BackgroundImage.html

Use this snippet to generate a CSS background-image property within a media query. It dynamically resolves the image URI based on the provided file, crop variant, and maximum width. This is useful for applying responsive background images.

```fluid
@media {mediaQuery} {
  #{backgroundImage.id} {
    background-image: url('{f:uri.image(image: backgroundImage.file, cropVariant: name, maxWidth: sizeWidth)}');
  }
}
```

--------------------------------

### TypoScript Constants for Slide Configuration

Source: https://github.com/benjaminkott/bootstrap_package/wiki/Allow-content-slide-configuration-for-all-layouts-and-colPos

Use these TypoScript constants to define the slide behavior for specific page layouts and column positions. The 'slide' parameter accepts values: -1 (siteroot), 0 (default), 1 (current level), and 2 (up from one level).

```typoscript
page.theme.pagelayout.<pagelayout>.colPos.<colPos>.slide = -1
```

--------------------------------

### Add New Color to Background Color Selector (PageTsConfig)

Source: https://github.com/benjaminkott/bootstrap_package/wiki/Add-additional-Background-Colors-to-Content-Elements

Extend the `tt_content.background_color_class` in PageTsConfig to add new color options to the backend selector. This is the primary method for introducing custom colors.

```tsconfig
TCEFORM {
    tt_content {
        background_color_class {
            addItems {
                red = Red
            }
        }
    }
}
```

--------------------------------

### Rebuild scssphp Tests

Source: https://github.com/benjaminkott/bootstrap_package/blob/master/Contrib/scssphp/README.md

Rebuild all tests after modifying input SCSS files. This command compiles tests and saves results, also updating excluded specs from sass-spec.

```bash
BUILD=1 vendor/bin/phpunit tests
```

--------------------------------

### Slide Content in ColPos 'Border'

Source: https://github.com/benjaminkott/bootstrap_package/wiki/Allow-content-slide-configuration-for-all-layouts-and-colPos

Configure content to slide up to the site root (-1) for the 'Border' column position (colPos 3) within the 'subnavigation_right' page layout.

```typoscript
page.theme.pagelayout.subnavigation_right.colPos.3.slide = -1
```

--------------------------------

### Slide Content in ColPos 'AfterContent'

Source: https://github.com/benjaminkott/bootstrap_package/wiki/Allow-content-slide-configuration-for-all-layouts-and-colPos

Configure content to slide up to the site root (-1) for the 'AfterContent' column position (colPos 9) within the default page layout.

```typoscript
page.theme.pagelayout.default.colPos.9.slide = -1
```

--------------------------------

### Regenerate phpstan Baseline

Source: https://github.com/benjaminkott/bootstrap_package/blob/master/Contrib/scssphp/README.md

Update the phpstan baseline file after fixing reported errors. Additions to the baseline will be reviewed.

```bash
make phpstan-baseline
```

--------------------------------

### Background Image CSS Rule

Source: https://github.com/benjaminkott/bootstrap_package/blob/master/Resources/Private/Partials/ContentElements/Carousel/General/BackgroundImage.html

Applies a background image using a Fluid Template URI image function. This is typically used within a media query to set specific image styles.

```html
#{backgroundImageIdentifier} { background-image: url('{f:uri.image(image: backgroundImageObject, cropVariant: name, maxWidth: sizeWidth)}'); }
```

--------------------------------

### Change Frame Margins via TypoScript Constants

Source: https://github.com/benjaminkott/bootstrap_package/wiki/Code-Snippets

Use this TypoScript constant to adjust the inner spacing of frames for different screen sizes. Configure values for 'lg' and 'xl' breakpoints.

```typoscript
plugin.bootstrap_package.settings.scss.frame-inner-spacing-scaling = (lg: 1, xl: 1.25)
```

--------------------------------

### Define Frame Backgrounds in SCSS

Source: https://github.com/benjaminkott/bootstrap_package/wiki/Add-additional-Background-Colors-to-Content-Elements

Define custom frame background color properties, including background, link color, and link hover color, within the SCSS variables. This sets up the styling for the new colors.

```scss
$frame-backgrounds: (
  red: (
    background: #ff0000,
    link-color: #ffeeee,
    link-hover-color: #ffffff
  )
);
```

--------------------------------

### Override Cookie Consent Translations with TypoScript

Source: https://github.com/benjaminkott/bootstrap_package/wiki/Customize-Cookie-Consent

Use TypoScript to override default language labels for cookie consent messages. This allows for custom headers and messages in different languages.

```typoscript
plugin.tx_bootstrap_package {
    _LOCAL_LANG {
        default {
            cookieconsent.common.header = We got Cookies!
            cookieconsent.common.message = This website uses cookies to ensure you get the best experience on our website.
        }
        de {
            cookieconsent.common.header = Wir haben Kekse!
            cookieconsent.common.message = Diese Website verwendet Kekse, um sicherzustellen, dass Sie die beste Erfahrung auf unserer Website machen können.
        }
    }
}
```

--------------------------------

### Carousel Background Image Filter Options

Source: https://github.com/benjaminkott/bootstrap_package/blob/master/Resources/Private/Partials/ContentElements/Carousel/General/BackgroundImage.html

Applies specific filters to background images within carousel items. This allows for varied visual treatments based on item data.

```html
carousel-backgroundimage-{item.data.background_image_options.filter}
```

--------------------------------

### Carousel Background Image Classes

Source: https://github.com/benjaminkott/bootstrap_package/blob/master/Resources/Private/Partials/ContentElements/Carousel/General/BackgroundImage.html

Assigns CSS classes for background image styling in carousels. Use these classes to apply different background image effects.

```html
carousel-backgroundimage {backgroundImageClasses}
```

```html
carousel-backgroundimage-parallax {backgroundImageClasses}
```

```html
carousel-backgroundimage-fade {backgroundImageClasses}
```

--------------------------------

### Define Extended Breadcrumb Value in TypoScript

Source: https://github.com/benjaminkott/bootstrap_package/wiki/Extend-the-breadcrumb

Configure TypoScript to use a custom user function for generating breadcrumb values. This is useful for dynamically fetching values based on conditions.

```typoscript
[SOME CONDITION]
page {
    10 {
        variables {
            breadcrumbExtendedValue = COA
            breadcrumbExtendedValue {
                10 = USER
                10 {
                    userFunc = Vendor\Package\UserFunc\TypoScriptUserFunc->breadrumbValue
                }
            }
        }
    }
}
[end]
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.