Suche
Teilen
startseite » forum

[Frage] Eigene Content Elemente - Wirkliches Anfängertutorial TYPO3-Version: -

  • 0 x
    19 Beiträge
    0 Hilfreiche Beiträge
    22. 06. 2015, 10:28

    Liebe Kollegen,

    ich hoffe, ich bin hier richtig. Ich möchte mir eine kleine Extension schreiben, in der ich einige handgemachte Content-Elemente einfüge. Nehmen wir der Einfachheit halber ein Element: "Headline", "Bild" und "Text".

    Hier möchte ich dieses Element in eine eigene kleine Extension auslagern, das Element soll in einer Übersicht als eigenes Register im Content-Wizard auftauchen.

    Gibt es für so was ein Minimalbeispiel, was dazu gut erklärt ist?

    Gibt es irgendwo eine Erklärung von "fluid", "vhs", "fluidcontent", "flexforms" und "fluidpages" etc.? Ich muss gestehen, dass ich Probleme mit den Begrifflichkeiten habe...

    BG
    nullstein

  • Hilfreichster Beitrag

  • toifel toifel
    Jedi-Ratsmitglied
    1 x
    831 Beiträge
    96 Hilfreiche Beiträge
    23. 06. 2015, 14:59 - Hilfreichster Beitrag

    "fluid" gehört zum Core und ist die Template-Engine in Typo3.
    Innerhalb dieser Templates kann man eigene ViewHelper einsetzen. "vhs" ist eine Extension, die eine vielzahl nützlicher ViewHelper nachliefert, damit man das Rad nicht dauern neu erfinden muss.
    "fluidcontent" und "fluidpages" sind Extensions, die das anlegen von eigenen Seitentemplates und Contentelementen vereinfachen bzw. erweitern.

    Mit fluidcontent kannst du eigene Contentelemente erstellen. Der Vorteil hier ist, dass alles direkt im Template des neuen CEs eingestellt werden kann, und mann nicht noch sämtliche Typoscript/TCA Einstellungen selbst schreiben muss. Ein minimales Beispiel dazu gibt es hier:
    https://fluidtypo3.org/documentation/templating-manual/templating/creating-templates/content-element.html

  • 1
  • toifel toifel
    Jedi-Ratsmitglied
    1 x
    831 Beiträge
    96 Hilfreiche Beiträge
    23. 06. 2015, 14:59

    "fluid" gehört zum Core und ist die Template-Engine in Typo3.
    Innerhalb dieser Templates kann man eigene ViewHelper einsetzen. "vhs" ist eine Extension, die eine vielzahl nützlicher ViewHelper nachliefert, damit man das Rad nicht dauern neu erfinden muss.
    "fluidcontent" und "fluidpages" sind Extensions, die das anlegen von eigenen Seitentemplates und Contentelementen vereinfachen bzw. erweitern.

    Mit fluidcontent kannst du eigene Contentelemente erstellen. Der Vorteil hier ist, dass alles direkt im Template des neuen CEs eingestellt werden kann, und mann nicht noch sämtliche Typoscript/TCA Einstellungen selbst schreiben muss. Ein minimales Beispiel dazu gibt es hier:
    https://fluidtypo3.org/documentation/templating-manual/templating/creating-templates/content-element.html

  • 0 x
    19 Beiträge
    0 Hilfreiche Beiträge
    17. 08. 2015, 09:27

    Moinsen!

    Kotz, irgendwie bin ich genervt, sorry. Ich danke trotzdem schon mal allen für ihre Hilfe!

    Laut fluidtypo3.org ist das ja alles supdidupi easy, wird alles sofort erkannt, ein paar Zeilen Setup und das war schon der Schlüssel zum Glück.

    Jetzt also wie folgt vorgegangen:
    ext_emconf.php:

    1. <?php
    2.  
    3. /***************************************************************
    4.  * Extension Manager/Repository config file for ext: "tc_page_content_distribution"
    5.  *
    6.  * Auto generated by Extension Builder 2015-08-16
    7.  *
    8.  * Manual updates:
    9.  * Only the data in the array - anything else is removed by next write.
    10.  * "version" and "dependencies" must not be touched!
    11.  ***************************************************************/
    12.  
    13. $EM_CONF[$_EXTKEY] = array(
    14. 	'title' => 'TC Page Content Distribution',
    15. 	'description' => 'Page and Content Distribution featuring flux / fluid',
    16. 	'category' => 'plugin',
    17. 	'author' => 'Peter',
    18. 	'author_email' => 'null@nullstein.de',
    19. 	'state' => 'alpha',
    20. 	'internal' => '',
    21. 	'uploadfolder' => '0',
    22. 	'createDirs' => '',
    23. 	'clearCacheOnLoad' => 0,
    24. 	'version' => '1.0.0',
    25. 	'constraints' => array(
    26. 		'depends' => array(
    27. 			'typo3' => '6.2',
    28. 			'flux' => '',
    29. 		),
    30. 		'conflicts' => array(
    31. 		),
    32. 		'suggests' => array(
    33. 		),
    34. 	),
    35. );

    ext_localconf.php:

    1. <?php
    2. if (!defined('TYPO3_MODE')) {
    3.     die('Access denied.');
    4. }
    5.  
    6. // Registriere Content- und Page-Element
    7. \FluidTYPO3\Flux\Core::registerProviderExtensionKey('tc_page_content_distribution', 'Content');
    8. \FluidTYPO3\Flux\Core::registerProviderExtensionKey('tc_page_content_distribution', 'Page');
    9.  
    10. // Registriere das TypoScript
    11. \FluidTYPO3\Flux\Core::addStaticTypoScript('EXT:tc_page_content_distribution/Configuration/TypoScript/');

    ext_tables.php:

    1. <?php
    2. if (!defined('TYPO3_MODE')) {
    3. 	die('Access denied.');
    4. }
    5.  
    6. //\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addStaticFile($_EXTKEY, 'Configuration/TypoScript', 'TC Page Content Distribution');

    Minimale setup.txt erstellt: 

    1. # Default PAGE object:
    2. page = PAGE
    3. # Define output for typeNum=0, the default type.
    4. page.typeNum = 0
    5. page = PAGE
    6. page {
    8. 	10 {
    9. 	templateRootPath = EXT:tc_page_content_distribution/Resources/Private/Templates/
    10. 	partialRootPath = EXT:tc_page_content_distribution/Resources/Private/Partials/
    11. 	layoutRootPath = EXT:tc_page_content_distribution/Resources/Private/Layouts/
    12.  
    13. 		variables {
    14. 			content < styles.content.get
    15. 		}
    16. 	}

    Dazu folgende Verzeichnisstruktur (nur relevante genannt, Language / Public etc. besteht natürlich auch):
    Resources
    |_ Private
    |_Layouts
    | |_ Content.html (1)
    | |_ Page.html (2)
    |_Templates
    | |_Content
    | |_Teaser.html (3)
    | |_Page
    | |_Page.html (4)

    Codes zu den oben beschriebenen Nummern in Klammern:
    (1)

    1. <f:layout name="Content" />
    2. <f:render section="Main" />

    (2)
    1. <f:layout name="Page" />
    2.  
    3. <div id="page" class="{settings.pageClass}">
    4.     <div id="content">
    5.         <f:render section="Content" />
    6.     </div>
    7. </div>

    (3)
    1. <div xmlns="http://www.w3.org/1999/xhtml" lang="en"
    2.      xmlns:f="http://typo3.org/ns/TYPO3/Fluid/ViewHelpers"
    3.      xmlns:flux="http://typo3.org/ns/FluidTYPO3/Flux/ViewHelpers"
    4.      xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers">
    5.  
    6.     <f:layout name="Content"/>
    7.  
    8.     <f:section name="Configuration">
    9.         <flux:form id="teaser">
    10.             <flux:field.file name="image" allowed="jpg" uploadFolder="uploads/tx_quickstart" minItems="1" maxItems="1" size="1" />
    11.             <flux:field.input name="headline" />
    12.             <flux:field.text name="teasertext" rows="5" cols="30" required="TRUE" />
    13.             <flux:field.input name="link">
    14.                 <flux:wizard.link activeTab="page"/>
    15.             </flux:field.input>
    16.         </flux:form>
    17.     </f:section>
    18.  
    19.     <f:section name="Preview">
    20.         <table width="100%">
    21.             <tr>
    22.                 <td width="50%"><v:media.image src="uploads/tx_quickstart/{image}" alt="{headline}" width="100" /></td>
    23.                 <td width="50%">
    24.                     <f:format.crop maxCharacters="50">{teasertext}</f:format.crop>
    25.                     <f:if condition="{link}">
    26.                         <strong>Link:</strong> {link}
    27.                     </f:if>
    28.                 </td>
    29.             </tr>
    30.         </table>
    31.     </f:section>
    32.  
    33.     <f:section name="Main">
    34.         <div class="quickstart-teaser">
    35.             <article>
    36.                 <h1>{headline}</h1>
    37.                 <div class="image-wrapper">
    38.                     <v:media.image src="uploads/tx_quickstart/{image}" alt="{headline}" width="200" />
    39.                 </div>
    40.                 <div class="text-wrapper">
    41.                     <f:format.nl2br>{teasertext}</f:format.nl2br>
    42.                     <f:if condition="{link}">
    43.                         <f:link.page pageUid="{link}" title="{headline}" class="readmore">read more</f:link.page>
    44.                     </f:if>
    45.                 </div>
    46.             </article>
    47.         </div>
    48.     </f:section>
    49.  
    50. </div>

    (4)
    1. <div xmlns="http://www.w3.org/1999/xhtml" lang="en"
    2.      xmlns:f="http://typo3.org/ns/TYPO3/Fluid/ViewHelpers"
    3.      xmlns:flux="http://typo3.org/ns/flux/ViewHelpers"
    4.      xmlns:v="http://typo3.org/ns/vhs/ViewHelpers">
    5.  
    6.     <f:layout name="Page" />
    7.  
    8.     <f:section name="Configuration">
    9.  
    10.         <flux:form id="page">
    11.  
    12.             <!-- Input field for Fluid variable 'pageClass' -->
    13.             <flux:field.input name="settings.pageClass" default="some-css-class" />
    14.  
    15.             <!-- Backend layout grid (TYPO3 6.x and greater only) -->
    16.             <flux:grid>
    17.                 <flux:grid.row>
    18.                     <flux:grid.column colPos="1" name="Sidebar" style="width: 25%" />
    19.                     <flux:grid.column colPos="0" name="Content" style="width: 75%" />
    20.                 </flux:grid.row>
    21.             </flux:grid>
    22.  
    23.         </flux:form>
    24.  
    25.     </f:section>
    26.  
    27.     <f:section name="Content">
    28.         <!-- Render colPos=0 in this section -->
    29.         <v:content.render column="0" />
    30.     </f:section>
    31.  
    32.     <f:section name="Sidebar">
    33.         <!-- Render colPos=1 in this section -->
    34.         <v:content.render column="1" />
    35.     </f:section>
    36.  
    37. </div>

    Angeblich soll hier ja auch durch die Registrierung von "Content" in der Localconf, und die beiden unter (1) und (3) beschriebenen htmls folgendes passieren: "After clearing caches you should now see a new tab FCE in the New Content Element Wizard that makes our new content element selectable." Fast schon müßig zu erwähnen, dass das natürlich nicht klappt, und garnichts passiert.

    Im Frontend taucht nur ein: "Oops, an error occurred!

    Template could not be found at "/var/www/virtual/***/html/***/"." auf. Nur, wenn ich im setup den Link zu irgendeiner index.html "hart" verlege: "file = EXT:tc_page_content_distribution/Resources/Private/Templates/Page/Page.html", passiert irgendwas - aber angeblich soll das doch automatisch gehen? Was hab' ich falsch gemacht?

    Ich kann die Extension auch gerne mal hochladen, vielen Dank schon mal für Eure Hilfe!

    BG
    nullstein

  • 0 x
    19 Beiträge
    0 Hilfreiche Beiträge
    18. 08. 2015, 14:53

    Übrigens wird dieser Fehler geworfen: https://wiki.typo3.org/Exception/CMS/1288087061

    BG
    nullstein

  • aemka aemka
    Jedi-Ratsmitglied
    0 x
    562 Beiträge
    9 Hilfreiche Beiträge
    19. 08. 2015, 16:22

    Lass dir deine Provider Extension lieber von EXT:builder erstellen, dann kann gar nichts schief gehen.

    setup.txt und ext_tables.php hättest du dir schon mal komplett sparen können.

    http://www.aemka.de/

  • 0 x
    19 Beiträge
    0 Hilfreiche Beiträge
    20. 08. 2015, 10:53

    Das geht wie genau? Muss ich da unter Categories eine Provider Extension angeben (was es nicht gibt)?

    Zudem hatte ich die Extension Basis-mäßig mit dem extension Builder gebaut und dann erweitert.

    BG
    nullstein

  • aemka aemka
    Jedi-Ratsmitglied
    0 x
    562 Beiträge
    9 Hilfreiche Beiträge
    20. 08. 2015, 22:25

    Ich meine EXT:builder, nicht EXT:extension_builder. Es gibt da überhaupt keine Dropdowns. Du füllst die paar Zeilen und setzt die richtigen Haken bei "Create FluidTYPO3 Provider Extension" und das war es. Dann hast du dein erstes Example Element auch schon lauffähig. Einmal kompletten Cache löschen, wenn du ein neues Element hinzufügst, damit es im Anlege-Assistenten auftaucht!

    http://www.aemka.de/

  • uweschmelzer2 uweschmel...
    Jar Jar Binks
    0 x
    1 Beiträge
    0 Hilfreiche Beiträge
    29. 09. 2015, 11:26

    Zitiert von: nullstein

    Gibt es für so was ein Minimalbeispiel, was dazu gut erklärt ist?

    Hi nullstein,

    mir ging es auch so wie Dir.

    Hier meine Anleitung mit Download der Beispielextension test5.zip hier:
    http://www.filedropper.com/test5_1

    Falls die Anleitung zerhauen ist, findest Du sie im Original hier:
    https://uweschmelzer.wordpress.com/2015/09/13/how-to-create-a-new-extension-for-a-fluid-powered-typo3-content-element/

    Summary
    ===========================================================================
    -Create the new extension with "builder", not "extension-builder"
    -Use flux in fluid templates for functionality

    Prerequisites
    ===========================================================================
    1. Install typo3 6.2.x
    2. Install fluid powered typo3 extensions
    3. Install extension "builder"

    Step 1/4 - Create skeleton of the extension
    ===========================================================================
    1. Login to typo3 backend
    2. Click on Admin tools > Builder (not "Extension-Builder")
    3. Create new extension

    Extension key
    test

    Author name and email
    <test@example.org>

    Brief title
    Test title

    Brief description
    Test description

    Toggles
    [ ]Include page templates
    [X]Include content templates
    [ ]Include backend module templates
    [ ]Create controllers for enabled FluidTYPO3 features
    [X]Set the VHS extension as dependency

    Build behavior
    [ ]Dry run - do not build actual files
    [ ]Be verbose about actions taken

    Step 2/4 - Install the extension
    ===========================================================================
    Install the extension in the extension manager.

    Step 3/4 - Refine the FLUID Templates
    ===========================================================================
    Add label, description and group to the flux:form.

    label = "Test FE Plugin" --> This will be shown, in the new content element wizard
    description = "Bla bla bla..."
    options = "{group: 'FCE'}" --> In which tab in the new content element wizard

    FILE
    typo3conf/ext/test/Resources/Private/Templates/Content/Example.html

    CODE
    ...
    <f:section name="Configuration">
    <flux:form id="foo" label="Test4 FE Plugin" description="Bla bla bla..." options="{group: 'FCE'}">
    ...
    </flux:form>
    </f:section>
    ...

    Step 4/4 - Add some fields
    ===========================================================================
    FILE
    typo3conf/ext/test/Resources/Private/Templates/Content/Example.html

    CODE
    ...
    <f:section name="Configuration">
    <flux:form id="example" label="Test4 FE Plugin" description="Bla bla bla..." options="{group: 'FCE'}">

    <flux:field.text name="settings.myCopy" label="My copy" enableRichText="true" defaultExtras="richtext[bold|italic|link]:rte_transform[flag=rte_enabled|mode=ts_css]"/>
    <flux:field.checkbox name="settings.myCheckbox" label="My checkbox" requestUpdate="TRUE"/>

    </flux:form>
    </f:section>
    ...

    REFERENCES & THANKS GO TO
    https://fluidtypo3.org/documentation/templating-manual/templating/creating-templates/content-element.html
    https://jkphl.is/articles/dating-fluid-powered-typo3/

  • 1
Präsentiert von
Mittwald
Nützliche Links
TYPO3 Dokumentation
eStrategy
webworker Magazin