-
Notifications
You must be signed in to change notification settings - Fork 36
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[FEATURE] Add example content blocks
And suggest to install friendsoftypo3/content-blocks
- Loading branch information
Showing
13 changed files
with
219 additions
and
0 deletions.
There are no files selected for viewing
21 changes: 21 additions & 0 deletions
21
...site_package_tutorial/13.4/src/ContentBlocks/ContentElements/carousel/assets/frontend.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| /* Custom Carousel Styling */ | ||
|
|
||
| /* Change the color and size of indicators */ | ||
| .carousel-indicators button { | ||
| background-color: #007bff; /* Bootstrap primary color */ | ||
| width: 12px; | ||
| height: 12px; | ||
| border-radius: 50%; | ||
| } | ||
|
|
||
| .carousel-indicators .active { | ||
| background-color: #0056b3; /* Darker shade for active indicator */ | ||
| } | ||
|
|
||
| /* Style navigation buttons */ | ||
| .carousel-control-prev-icon, | ||
| .carousel-control-next-icon { | ||
| background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */ | ||
| border-radius: 50%; /* Round buttons */ | ||
| padding: 10px; /* Space around the icon */ | ||
| } |
20 changes: 20 additions & 0 deletions
20
.../site_package_tutorial/13.4/src/ContentBlocks/ContentElements/carousel/assets/frontend.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| // Custom JavaScript for Bootstrap Carousel | ||
|
|
||
| // Automatically pause the carousel after 5 seconds on page load | ||
| document.addEventListener('DOMContentLoaded', () => { | ||
| const carouselElement = document.querySelector('#carouselExampleIndicators'); | ||
| const carousel = new bootstrap.Carousel(carouselElement, { | ||
| interval: 5000, // Slide every 5 seconds | ||
| ride: 'carousel', | ||
| }); | ||
|
|
||
| // Pause carousel after 5 seconds | ||
| setTimeout(() => { | ||
| carousel.pause(); | ||
| }, 5000); | ||
|
|
||
| // Add custom behavior: Log to console when the slide changes | ||
| carouselElement.addEventListener('slid.bs.carousel', (event) => { | ||
| console.log(`Slide changed to: ${event.to}`); | ||
| }); | ||
| }); |
7 changes: 7 additions & 0 deletions
7
...ackage_tutorial/13.4/src/ContentBlocks/ContentElements/carousel/assets/icon.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
17 changes: 17 additions & 0 deletions
17
...es/site_package_tutorial/13.4/src/ContentBlocks/ContentElements/carousel/config.yaml.twig
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| name: {{ package.packageNameAlternative }}/carousel | ||
| typeName: {{ package.extensionKey }}_carousel | ||
| group: default | ||
| prefixFields: true | ||
| prefixType: full | ||
| fields: | ||
| - identifier: carousel_items | ||
| type: Collection | ||
| foreign_field: parentid | ||
| fields: | ||
| - identifier: image | ||
| type: File | ||
| - identifier: header | ||
| type: Text | ||
| - identifier: description | ||
| type: Textarea | ||
| enableRichtext: true |
32 changes: 32 additions & 0 deletions
32
...site_package_tutorial/13.4/src/ContentBlocks/ContentElements/carousel/language/labels.xlf
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| <?xml version="1.0"?> | ||
| <xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2"> | ||
| <file datatype="plaintext" original="labels.xlf" source-language="en" date="2024-11-24T18:55:27+00:00" product-name="t3docs/carousel"> | ||
| <header/> | ||
| <body> | ||
| <trans-unit id="title" resname="title"> | ||
| <source>Carousel</source> | ||
| </trans-unit> | ||
| <trans-unit id="description" resname="description"> | ||
| <source>See also https://getbootstrap.com/docs/5.0/components/carousel/</source> | ||
| </trans-unit> | ||
| <trans-unit id="carousel_items.label" resname="carousel_items.label"> | ||
| <source>Carousel Items</source> | ||
| </trans-unit> | ||
| <trans-unit id="carousel_items.image.label" resname="carousel_items.image.label"> | ||
| <source>Image</source> | ||
| </trans-unit> | ||
| <trans-unit id="carousel_items.header.label" resname="carousel_items.header.label"> | ||
| <source>Header</source> | ||
| </trans-unit> | ||
| <trans-unit id="carousel_items.description.label" resname="carousel_items.description.label"> | ||
| <source>Description</source> | ||
| </trans-unit> | ||
| <trans-unit id="previous.label" resname="previous.label"> | ||
| <source>Previous</source> | ||
| </trans-unit> | ||
| <trans-unit id="next.label" resname="next.label"> | ||
| <source>Next</source> | ||
| </trans-unit> | ||
| </body> | ||
| </file> | ||
| </xliff> |
12 changes: 12 additions & 0 deletions
12
...e_tutorial/13.4/src/ContentBlocks/ContentElements/carousel/templates/backend-preview.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| <f:asset.css identifier="content-block-t3docs-t3docs/carousel-be" href="{cb:assetPath()}/preview.css"/> | ||
|
|
||
| <div class="row"> | ||
| <f:for each="{data.carousel_items}" as="item" iteration="iteration"> | ||
| <div class="col"> | ||
| <f:for each="{item.image}" as="image" iteration="iteration"> | ||
| <f:image image="{image}" width="100"/><br/> | ||
| </f:for> | ||
| {item.header} | ||
| </div> | ||
| </f:for> | ||
| </div> |
31 changes: 31 additions & 0 deletions
31
..._package_tutorial/13.4/src/ContentBlocks/ContentElements/carousel/templates/frontend.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,31 @@ | ||
| <f:asset.css identifier="content-block-css-t3docs-t3docs/carousel" href="{cb:assetPath()}/frontend.css"/> | ||
| <f:asset.script identifier="content-block-js-t3docs-t3docs/carousel" src="{cb:assetPath()}/frontend.js"/> | ||
|
|
||
| <div id="carousel{data.uid}" class="carousel slide" data-bs-ride="carousel"> | ||
| <div class="carousel-indicators"> | ||
| <f:for each="{data.carousel_items}" as="item" iteration="iteration"> | ||
| <button type="button" data-bs-target="#carousel{data.uid}" data-bs-slide-to="{iteration.index}" class="{f:if(condition: '{iteration.isFirst}', then:' active')}" aria-current="true" aria-label="{item.header}"></button> | ||
| </f:for> | ||
| </div> | ||
| <div class="carousel-inner"> | ||
| <f:for each="{data.carousel_items}" as="item" iteration="iteration"> | ||
| <div class="carousel-item{f:if(condition: '{iteration.isFirst}', then:' active')}"> | ||
| <f:for each="{item.image}" as="image" iteration="iteration"> | ||
| <f:image image="{image}" class="d-block w-100"/> | ||
| </f:for> | ||
| <div class="carousel-caption d-none d-md-block"> | ||
| <h5>{item.header}</h5> | ||
| <f:format.html>{item.description}</f:format.html> | ||
| </div> | ||
| </div> | ||
| </f:for> | ||
| </div> | ||
| <button class="carousel-control-prev" type="button" data-bs-target="#carousel{data.uid}" data-bs-slide="prev"> | ||
| <span class="carousel-control-prev-icon" aria-hidden="true"></span> | ||
| <span class="visually-hidden"><f:translate key="{cb:languagePath()}:previous.label"/></span> | ||
| </button> | ||
| <button class="carousel-control-next" type="button" data-bs-target="#carousel{data.uid}" data-bs-slide="next"> | ||
| <span class="carousel-control-next-icon" aria-hidden="true"></span> | ||
| <span class="visually-hidden"><f:translate key="{cb:languagePath()}:next.label"/></span> | ||
| </button> | ||
| </div> |
1 change: 1 addition & 0 deletions
1
...ckage_tutorial/13.4/src/ContentBlocks/ContentElements/jumbotron/assets/icon.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
23 changes: 23 additions & 0 deletions
23
...s/site_package_tutorial/13.4/src/ContentBlocks/ContentElements/jumbotron/config.yaml.twig
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| name: {{ package.packageNameAlternative }}/jumbotron | ||
| typeName: {{ package.extensionKey }}_jumbotron | ||
| group: default | ||
| prefixFields: true | ||
| prefixType: full | ||
| fields: | ||
| - | ||
| identifier: header | ||
| useExistingField: true | ||
| - | ||
| identifier: bodytext | ||
| useExistingField: true | ||
| enableRichtext: true | ||
| - | ||
| identifier: button_text | ||
| type: Text | ||
| default: 'Read more' | ||
| min: 4 | ||
| max: 15 | ||
| - | ||
| identifier: button_link | ||
| type: Link | ||
| required: true |
20 changes: 20 additions & 0 deletions
20
...ite_package_tutorial/13.4/src/ContentBlocks/ContentElements/jumbotron/language/labels.xlf
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| <?xml version="1.0"?> | ||
| <xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2"> | ||
| <file datatype="plaintext" original="labels.xlf" source-language="en" date="2024-11-24T18:55:27+00:00" product-name="t3docs/jumbotron"> | ||
| <header/> | ||
| <body> | ||
| <trans-unit id="title" resname="title"> | ||
| <source>Jumbotron</source> | ||
| </trans-unit> | ||
| <trans-unit id="description" resname="description"> | ||
| <source>Call to action area with button</source> | ||
| </trans-unit> | ||
| <trans-unit id="button_text.label" resname="button_text.label"> | ||
| <source>Button Text</source> | ||
| </trans-unit> | ||
| <trans-unit id="button_link.label" resname="button_link.label"> | ||
| <source>Button Link</source> | ||
| </trans-unit> | ||
| </body> | ||
| </file> | ||
| </xliff> |
7 changes: 7 additions & 0 deletions
7
...package_tutorial/13.4/src/ContentBlocks/ContentElements/jumbotron/templates/frontend.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| <div class="p-5 mb-4 bg-body-tertiary"> | ||
| <div class="container-fluid py-5"> | ||
| <h1 class="display-5 fw-bold">{data.header}</h1> | ||
| <p class="col-md-8 fs-4"><f:format.html>{data.bodytext}</f:format.html></p> | ||
| <f:link.typolink class="btn btn-dark btn-lg" parameter="{data.button_link}">{data.button_text}</f:link.typolink> | ||
| </div> | ||
| </div> |
25 changes: 25 additions & 0 deletions
25
resources/packages/site_package_tutorial/13.4/src/ContentBlocks/README.md.twig
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| # Custom content blocks | ||
|
|
||
| For the custom content blocks to be displayed, the extension needs to be installed: | ||
|
|
||
| ``` | ||
| ddev composer install friendsoftypo3/content-blocks | ||
| ``` | ||
|
|
||
| ## Kickstarting a new content block | ||
|
|
||
| You can kickstart a new content block using the command: | ||
|
|
||
| ``` | ||
| ddev typo3 content-blocks:create | ||
| ``` | ||
|
|
||
| Afterwards run: | ||
|
|
||
| ``` | ||
| ddev typo3 cache:flush -g system | ||
| ddev typo3 extension:setup --extension={{ package.extensionKey }} | ||
| ``` | ||
|
|
||
| About how to create additional content blocks have a look at | ||
| [TYPO3 Content Blocks manual](https://docs.typo3.org/permalink/friendsoftypo3-content-blocks:start). |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters