[Frage] Wird tt_news nicht mehr weiterentwickelt? [Gelöst] TYPO3-Version: 6.2.7

  • sunlite sunlite
    R2-D2
    0 x
    100 Beiträge
    0 Hilfreiche Beiträge
    26. 10. 2015, 22:07

    Hallo alle zusammen,

    ich plane gerade eine Webseite mit News-System und dachte da spontan an tt_news (noch vor tx_news). tt_news hat immer problemlos funktioniert und tut es nach wie vor. Nun habe ich irgendwo gelesen, dass tt_news nicht mehr weiterentwickelt wird. Wenn die neue LTS 7 von Typo3 an den Start geht, würde ich gerne tt_news adaptieren, was wahrscheinlich nicht funktionieren wird. Für den Fall, dass tt_news nicht weiterentwickelt wird, gibt es außer tx_news sonst irgendwelche Alternativen, die Ihr empfehlen könnt? Gerne auch PHP-MySQL-News-System-Scripte. Sie müssen nur frei formatierter und nicht so überladen sein. Simple und clean im Stile von tt_news.

    Danke für Eure Tipps.

    Saludos

  • typonewbe typonewbe
    Sternenflotten-Admiral
    0 x
    197 Beiträge
    3 Hilfreiche Beiträge
    27. 10. 2015, 22:42 - Lösung

    Hallo,

    also die MARKER Variante die du Verwendest wird in den Extensions immer weniger verwendet und daher wäre es von Vorteil für dich wenn du umsteigst. Die neue News Extension basiert auf Extbase und Fluid.
    Das gute für dich soviel musst du nicht umlernen da du ja schon mit HTML Kontakt hattest.

    Um dich einzuarbeiten kannst du dir die HTML Struktur der News ansehen.
    Als Beispiel die Listenansicht:
    Resources/Private/Partials/List/Item.html

    1. <!-- header -->
    2. <div class="header">
    3. <h3>
    4. <n:link newsItem="{newsItem}" settings="{settings}" title="{newsItem.title}">
    5. <span itemprop="headline">{newsItem.title}</span>
    6. </n:link>
    7. </h3>
    8. </div>

    dieser Teil umgibt den News Titel mit einem Link.
    In deinem Fall könntest du deinen alten Code so umschreiben
    1. <div class="vtips-content">
    2. <h2><span class="news-list-titel">###NEWS_TITLE###</span></h2><br />
    3. <span class="news-list-inhalt">###NEWS_CONTENT###</span>
    4. <span class="news-list-mehr">###MORE###</span>
    5. </div>

    und umwandeln in
    1. <div class="vtips-content">
    2. <h2><span class="news-list-titel">{newsItem.title}</span></h2><br />
    3. <span class="news-list-inhalt">{newsItem.bodytext -> f:format.crop(maxCharacters: '{settings.cropMaxCharacters}', respectWordBoundaries:'1') -> f:format.html()}</span>
    4. <span class="news-list-mehr"><f:translate key="more-link"/></span>
    5. </div>

    Im Grunde bleibt es HTML bis auf ein paar Ausnahmen:
    Statt ###MARKER### verwendet man {datensatzobjekt.spaltenname}
    Statt der Subparts <!--###SUBPART###--> kannst du schleifen wie <f:for each="{farben}" as="farbe"><li>{farbe}</li></f:for> oder if abfragen verwenden.
    Ach ja alles was nicht nach reinem HTML aussieht wie <f:for each="{whatever}"> oder <n:link newsItem ...> das nennt man ViewHelper wo bei f für fluid steht und Teil von TYPO3 ist und n in diesem Fall die news eigenen ViewHelper darstellen.

    Ich denke das wars für den Anfang und wenn du nach TYPO3 Fluid googelst solltest du genügend Treffer erhalten.

    Beste Grüße
    typonewbe


  • volk0r volk0r
    Padawan
    0 x
    59 Beiträge
    3 Hilfreiche Beiträge
    27. 10. 2015, 11:54

    hi,

    "news" von georg ringer setzt man jetzt ein ...

    http://typo3.org/extensions/repository/view/news

    lg, volker.

  • sunlite sunlite
    R2-D2
    0 x
    100 Beiträge
    0 Hilfreiche Beiträge
    27. 10. 2015, 15:58

    Hi Volker,

    danke für die Info. Das hatte ich ganz zu Beginn einmal verwendet, jedoch hatte mir der W3C-Validator einen Fehler ausgespuckt, den ich nicht behoben bekomme:

    Error: Element p not allowed as child of element span in this context. (Suppressing further errors from this subtree.)
    From line 311, column 34; to line 311, column 53
    cription"><p class="bodytext">Das is
    Contexts in which element p may be used:
    Where flow content is expected.
    Content model for element span:
    Phrasing content.

    Außerdem bin ich leider kein Programmierer, was für mich bedeutet, dass ich mich komplett neu in ein neues Konstrukt einarbeiten muss. Mir fehlt z.B. bei News ein klassisches Template, sowie ich es in tt_news hatte. Dort habe ich html-mäßig alles anpassen können mit DIV-Containern und Spans und diese mittels CSS entsprechend formatiert. Bis jetzt habe ich allerdings noch nicht herausgefunden, wie das in News funktioniert - trotz Anleitung. Die Form "<f:else><f:if condition="{settings.displayDummyIfNoMedia}"> ... " ist mir gänzlich neu. Ich kann damit gar nichts anfangen. Auch finde ich keinerlei Videotutorials noch ordentliche straight-forward-Anleitungen, die mich in die Konfiguration von News einführen - innerhalb ein paar Stunden wie bei tt_news, nicht Wochen/Monate! Vielleicht hast Du einen Tipp, wie ich recht zügig dieselben Formatierungen aus tt_news für die Ringer-News anwenden kann.

    Vielen Dank

    Saludos

  • sunlite sunlite
    R2-D2
    0 x
    100 Beiträge
    0 Hilfreiche Beiträge
    27. 10. 2015, 17:33

    Als Beispiel ... in tt_news sah mein Template so aus:

    <div class="news-list-container">
    ###NEWS_CATEGORY_ROOTLINE###

    <div class="news-list-item">
    ###NEWS_CATEGORY_IMAGE###

    <div class="vtips-bild-date">
    <span class="news-list-date">###NEWS_DATE### </span>
    <!--###LINK_ITEM###--><span class="news-list-bild">###NEWS_IMAGE###</span>
    </div>

    <div class="vtips-content">
    <h2><span class="news-list-titel">###NEWS_TITLE###</span></h2><br />
    <span class="news-list-inhalt">###NEWS_CONTENT###</span>
    <span class="news-list-mehr">###MORE###</span>
    </div>
    </div>
    </div>

    <div class="news-single-item">

    <div class="single_title">
    <div class="single_titletext">###NEWS_TITLE###</div>
    <div class="single_subtext">###NEWS_SUBHEADER###</div>
    <div class="single_linie"></div>
    <div class="single_bild">###NEWS_IMAGE###</div>
    <div class="single_content">###NEWS_CONTENT###</div>

    </div>
    </div>

    Ganz einfach und straight forward - für mich zumindest. Ich konnte ohne viel Einarbeitungszeit damit loslegen, mein Layout zu formatieren. Jetzt weiß ich nicht mal, wo ich anfangen soll :D
    Am einfachsten wäre es für mich, die bisher verwendeten Formatierungen direkt mit in das Ringer-News zu nehmen, damit ich nicht wieder von vorne alle formatieren muss.
    Wenn Du Vorschläge hast ... Meine Ohren und Augen sind ganz weit geöffnet.

    Vielen Danke
    LG

  • typonewbe typonewbe
    Sternenflotten-Admiral
    0 x
    197 Beiträge
    3 Hilfreiche Beiträge
    27. 10. 2015, 22:42

    Hallo,

    also die MARKER Variante die du Verwendest wird in den Extensions immer weniger verwendet und daher wäre es von Vorteil für dich wenn du umsteigst. Die neue News Extension basiert auf Extbase und Fluid.
    Das gute für dich soviel musst du nicht umlernen da du ja schon mit HTML Kontakt hattest.

    Um dich einzuarbeiten kannst du dir die HTML Struktur der News ansehen.
    Als Beispiel die Listenansicht:
    Resources/Private/Partials/List/Item.html

    1. <!-- header -->
    2. <div class="header">
    3. <h3>
    4. <n:link newsItem="{newsItem}" settings="{settings}" title="{newsItem.title}">
    5. <span itemprop="headline">{newsItem.title}</span>
    6. </n:link>
    7. </h3>
    8. </div>

    dieser Teil umgibt den News Titel mit einem Link.
    In deinem Fall könntest du deinen alten Code so umschreiben
    1. <div class="vtips-content">
    2. <h2><span class="news-list-titel">###NEWS_TITLE###</span></h2><br />
    3. <span class="news-list-inhalt">###NEWS_CONTENT###</span>
    4. <span class="news-list-mehr">###MORE###</span>
    5. </div>

    und umwandeln in
    1. <div class="vtips-content">
    2. <h2><span class="news-list-titel">{newsItem.title}</span></h2><br />
    3. <span class="news-list-inhalt">{newsItem.bodytext -> f:format.crop(maxCharacters: '{settings.cropMaxCharacters}', respectWordBoundaries:'1') -> f:format.html()}</span>
    4. <span class="news-list-mehr"><f:translate key="more-link"/></span>
    5. </div>

    Im Grunde bleibt es HTML bis auf ein paar Ausnahmen:
    Statt ###MARKER### verwendet man {datensatzobjekt.spaltenname}
    Statt der Subparts <!--###SUBPART###--> kannst du schleifen wie <f:for each="{farben}" as="farbe"><li>{farbe}</li></f:for> oder if abfragen verwenden.
    Ach ja alles was nicht nach reinem HTML aussieht wie <f:for each="{whatever}"> oder <n:link newsItem ...> das nennt man ViewHelper wo bei f für fluid steht und Teil von TYPO3 ist und n in diesem Fall die news eigenen ViewHelper darstellen.

    Ich denke das wars für den Anfang und wenn du nach TYPO3 Fluid googelst solltest du genügend Treffer erhalten.

    Beste Grüße
    typonewbe

  • sunlite sunlite
    R2-D2
    0 x
    100 Beiträge
    0 Hilfreiche Beiträge
    28. 10. 2015, 22:09

    Hallo Typonewbe,

    erstmal herzlichen Dank für diese Anfangsinformationen. Ich habe bereits die letzten 14 Stunden damit verbracht, zu verstehen, wie das alles funktionieren kann. Deshalb habe ich Deinen optimierten Code-Schnipsel direkt in die Page eingebaut ... natürlich habe ich erstmal kein direktes Resultat erhalten. Was habe ich also gemacht?

    1.) Ich habe die komplette Verzeichnisstruktur aus Ressources/Privates in den Ordner /fileadmin/templates kopiert. Dann habe ich im TS versucht, diese Struktur anzusprechen:

    plugin.tx_news.view.layoutRootPath = fileadmin/templates/Layouts
    plugin.tx_news.view.partialRootPath = fileadmin/templates/Partials
    plugin.tx_news.view.templateRootPath = fileadmin/templates/Templates

    > Ergab also kein Ergebnis, weshalb ich die Datei item.html direkt unter das .../ext/news/ressources/private/Partials/List kopiert und die sich darin befindliche Datei kurz umbenannte habe ich item.html.old.

    Nun habe ich schon eine Veränderung erkennen können, doch leider nicht das, was ich erhofft hatte zu sehen. Die Formatierung entspricht natürlich nicht dem, was ich vorher unter tt_news hatte. Vor allem die Umrahmungen werden zu meiner Verwunderung nicht dargestellt, obwohl das ja eigentlich nur eine CSS-Geschichte ist und nichts mit Fluid zu tun hat bzw. haben kann, oder?

    Nun wird mir vor allem kein Bild angezeigt, was natürlich nicht so gut ist in einem News-Preview. Ich habe auf meiner Google-Reise bereits einige Informationen darüber gefunden wie z.B. dass Bilder nicht von Haus in der Liste eingebunden werden.

    Ich fand also:

    <f:alias map="{mediaElement: newsItem.nonMediaPreviews.0}">
    <f:if condition="{mediaElement.type} == 0">
    <f:image
    src="uploads/tx_news/{mediaElement.image}"
    title="{mediaElement.title}"
    alt="{mediaElement.alt}"
    maxWidth="{settings.list.media.image.maxWidth}"
    maxHeight="{settings.list.media.image.maxHeight}"
    />
    </f:if>
    <f:if condition="{mediaElement.type} == 1">
    <f:render partial="Detail/MediaVideo" arguments="{mediaElement: mediaElement}" />
    </f:if>
    <f:if condition="{mediaElement.type} == 2">
    <f:render partial="Detail/MediaHtml" arguments="{mediaElement: mediaElement}" />
    </f:if>
    <f:if condition="{mediaElement.type} == 3">
    <n:format.dam as="dam" uid="{mediaElement.uid}">
    <f:image src="{dam.file_path}{dam.file_name}" title="{dam.title}" alt="{dam.alt_text}" maxWidth="{settings.detail.media.image.maxWidth}" />
    </n:format.dam>
    </f:if>
    </f:alias>

    und nun setzt es bei mir aus. Da sehe ich im Moment kaum eine Logik darin :D hahahahaha. Die gibt es mit Sicherheit, doch um das zu verstehen müsste ich wahrscheinlich bei Super-Zero anfangen. Mir ist das Prinzip "If-Else" durchaus bewusst, nur dass ich es an dieser Stelle anwenden muss, verkompliziert das ganze System eher, als dass es etwas vereinfacht, finde ich.
    Auch muss ich irgendwie in meiner Layout-Datei auf meine Template-Datei verweisen und da wiederum die Liste einbinde ... Ay ay ay.
    Da muss ich leider sagen, dass ich ich tt_news wirklich benutzerfreundlicher finde - für Non-Profis. Ich habe einmal mein Template und die entsprechende CSS hier hinzugehängt. Vielleicht kann mir jemand dabei helfen und mir sagen, wo ich den Fehler habe.

    Hier der Link zur Datei Archiv.zip mit meinen Dateien für news: [url]https://mega.nz/#!Bgh3ARIa!4yQKbWidesJcgdEFs8G5jWdcIkIO3-roW62KXB_afzE[/url]

    Vielen Dank
    S.

  • typonewbe typonewbe
    Sternenflotten-Admiral
    0 x
    197 Beiträge
    3 Hilfreiche Beiträge
    29. 10. 2015, 23:33

    Hallo,
    schau dir mal die Struktur von news an.

    1. plugin.tx_news {
    2. view {
    3. templateRootPaths {
    4. 0 = EXT:news/Resources/Private/Templates/
    5. 1 = {$plugin.tx_news.view.templateRootPath}
    6. }
    7. partialRootPaths {
    8. 0 = EXT:news/Resources/Private/Partials/
    9. 1 = {$plugin.tx_news.view.partialRootPath}
    10. }
    11. layoutRootPaths {
    12. 0 = EXT:news/Resources/Private/Layouts/
    13. 1 = {$plugin.tx_news.view.layoutRootPath}
    14. }
    15. }
    16. }

    Hast du deinen TS Code in die [u][b]Constants[/b][/u] geschrieben oder im Setup?
    Du müsstest es in die Constants scheiben dann sollten deine Templates verwendet werden.

    PS im TS Config solltest du natürlich auch eine Einstellung vornehmen.

    1. tx_news.templateLayouts {
    2. 1 = Fobar
    3. 2 = Another one
    4. 3 = --div--,Group 2
    5. 4 = Blub
    6. }

    Dann musst du noch das Entsprechende Template im Plugin auswählen:
    Das ganze sollte dann so aussehen wie hier:
    [url=https://vimeo.com/63231754]hier[/url] bei 06:05 ganz unten ist ne Leere Selectbox da sollte dann bei dir Fobar stehen oder was auch immer du bei 1 reinschreibst.
    Der Link hier gibt eigentlich ne schöne Anleitung ab.
    [url]https://jweiland.net/video-anleitungen/typo3/interessante-typo3-extensions/news-ext.html[/url]

    Was dein HTML/CSS Code angeht nein Fluid hat mit der Auswirkung direkt nichts zu tun da es sich hierbei um HTML im Output handelt. Was aber damit zusammen hängen könnte das deine Aktuelle HTML Struktur noch nicht 100% mit der deiner tt_news übereinstimmt. Von daher hat es schon eine gewisse Auswirkung darauf.

    Zum Listview gehören noch ein paar Dateien mehr im Templates Ordner "Templates/News/" gibt es eine List.html die enthält quasi den Container dort kannst du z.B.

    1. <div class="news-list-view">
    2. <!-- umbenennen in -->
    3. <div class="news-list-container">

    und schon hast du den umschließenden Container beeinflusst.

    Du solltest dir aber folgende Fragen stellen:
    Macht es Sinn das alte Template zu verwenden?
    Ist es nicht eventuell besser die schon vorhandene HTML Struktur zu nutzen und das CSS entsprechend anzupassen. (Aufwand Nutzen)

    Ich bin mehr so der Visuelle Typ kannst du ein Bild schicken wie die News aussehen sollen dann kann ich dir evenutell besser helfen dein Template anzupassen.

    Gruß typonewbe

  • sunlite sunlite
    R2-D2
    0 x
    100 Beiträge
    0 Hilfreiche Beiträge
    30. 10. 2015, 00:10

    Hallo Typonewbe,

    ich gebe Dir recht, die Standard-HTML zu verwenden und das CSS dort anzupassen - sofern es einfach geht. Der Darstellungsaufbau ist in der Standard-HTML anders. Dort befindet sich das Datum unterhalb des Bildes und der Text daneben. Zusätzlich befinden sich einige Zusatzinformationen wie Autor etc.. im Standard-Template worauf ich gänzlich verzichten will, was wohl mit TS leicht abschaltbar sein sollte.

    Anbei die Bilder, wie es bis jetzt aussieht mit news und wie es mit tt_news vorher ausgesehen hat.

    Vielen Dank für Deinen Support

    Alt und so wie es sein soll
    [img]http://vizinside.com/look_with_tt_news.jpg[/img]

    Neu mit news Standard
    [img]http://vizinside.com/look_with_ringer_news.jpg[/img]

  • sunlite sunlite
    R2-D2
    0 x
    100 Beiträge
    0 Hilfreiche Beiträge
    30. 10. 2015, 00:12

    Mein altes tt_news-Template

    1. <!-- ###TEMPLATE_LIST### begin
    2. This is the template for the list of news in the archive or news page or search
    3. -->
    4. <div class="news-list-container">
    5. ###NEWS_CATEGORY_ROOTLINE###
    6. <!-- ###CONTENT### begin
    7. This is the part of the template substituted with the list of news:
    8. -->
    9. <!-- ###NEWS### begin
    10. Template for a single item
    11. -->
    12. <div class="news-list-item">
    13. ###NEWS_CATEGORY_IMAGE###
    14. <div class="vtips-bild-date">
    15. <span class="news-list-date">###NEWS_DATE### </span>
    16. <!--###LINK_ITEM###--><span class="news-list-bild">###NEWS_IMAGE###</span><!--###LINK_ITEM###-->
    17. </div>
    18.  
    19. <div class="vtips-content">
    20. <h2><!--###LINK_ITEM###--><span class="news-list-titel">###NEWS_TITLE###</span><!--###LINK_ITEM###--></h2><br />
    21. <span class="news-list-inhalt">###NEWS_CONTENT###</span>
    22. <!--###LINK_ITEM###--><span class="news-list-mehr">###MORE###</span><!--###LINK_ITEM###-->
    23. </div>
    24.  
    25. ###TX_NCTTNEWSMOSTPOPULAR###
    26.  
    27. <br />
    28.  
    29. <hr class="clearer" />
    30. </div>
    31. <!-- ###NEWS### end-->
    32. <!-- ###CONTENT### end -->
    33.  
    34. </div>
    35. <!-- ###TEMPLATE_LIST### end -->
    36.  
    37.  
    38. <!-- ###TEMPLATE_SINGLE### begin
    39. This subpart is used to display single news items
    40. -->
    41. <div class="news-single-item">
    42.  
    43.  
    44. <!--<h1>###NEWS_TITLE###</h1> -->
    45.  
    46. <div class="single_title">
    47. <div class="single_titletext">###NEWS_TITLE###</div>
    48. <div class="single_subtext">###NEWS_SUBHEADER###</div>
    49. <div class="single_linie"></div>
    50. <div class="single_bild">###NEWS_IMAGE###</div>
    51. <div class="single_content">###NEWS_CONTENT###</div>
    52.  
    53. </div>
    54.  
    55.  
    56.  
    57. <!--<hr class="cl-right" />-->
    58. ###ADDINFO_WRAP_B###
    59.  
    60. ###TEXT_RELATED###
    61. ###NEWS_RELATED###
    62.  
    63. ###TEXT_FILES###
    64. ###FILE_LINK###
    65.  
    66. ###TEXT_LINKS###
    67. ###NEWS_LINKS###
    68.  
    69. ###TEXT_RELATEDBYCATEGORY###
    70. ###NEWS_RELATEDBYCATEGORY###
    71.  
    72. ###ADDINFO_WRAP_E###
    73.  
    74. ###NEWS_SINGLE_PAGEBROWSER###
    75.  
    76.  
    77.  
    78.  
    79. <div class="news-single-backlink">
    80. <div class="single_linie"></div>
    81. <!--###LINK_ITEM###-->###BACK_TO_LIST###<!--###LINK_ITEM###-->
    82. </div>
    83.  
    84. </div>
    85. <!-- ###TEMPLATE_SINGLE### end -->

  • sunlite sunlite
    R2-D2
    0 x
    100 Beiträge
    0 Hilfreiche Beiträge
    30. 10. 2015, 00:13

    Und das CSS, dass ich natürlich am liebsten übernehmen würde wollen:

    [code]

    1. .news-list-item{
    2. width:21%;
    3. float:left !IMPORTANT;
    4. padding:0.5%;
    5. margin-right:1.5%;
    6. margin-left:1.5%;
    7. margin-bottom:3%;
    8.  
    9. /* Borderreplacement */
    10. background:#ffffff;
    11. box-shadow: 0px 0px 4px #dddddd;
    12. outline: 1px solid #cccccc;
    13. }
    14.  
    15. .news-list-container IMG{
    16. float:left !IMPORTANT;
    17. width:100%;
    18. margin:0;
    19. margin-bottom:15px;
    20. clear:both;
    21. }
    22.  
    23. .news-list-item a{
    24. font-family: 'oswaldlight', Fallback, sans-serif;
    25. font-weight:normal;
    26. font-size:18px;
    27. color:#BD8E23;
    28. /*color:#D2A029;*/
    29. text-decoration:none;
    30. }
    31.  
    32. .news-list-date{
    33. float:left;
    34. font-size:11px;
    35. margin:0;
    36. padding:0 0 6px 0;
    37. }
    38.  
    39.  
    40. .news-single-item{
    41. width:100%;
    42. float:left;
    43. margin:0;
    44. padding:0;
    45. clear:both;
    46. -webkit-hyphens: auto;
    47. -moz-hyphens: auto;
    48. -ms-hyphens: auto;
    49. hyphens: auto;
    50. }
    51.  
    52. .single_titletext{
    53. font-family: "oswaldlight",Fallback,sans-serif;
    54. font-weight: normal;
    55. font-size: 24px;
    56. color: #BD8E23;
    57. }
    58.  
    59. .single_subtext h2{
    60. font-family: pt_sansregular;
    61. font-size: 17px;
    62. color: #999;
    63. font-weight:normal;
    64. margin:0;
    65. padding:0 0 15px 0;
    66. }
    67.  
    68. .single_linie{
    69. width: 100%;
    70. border-width: 1px;
    71. border-top: 1px solid #DDD;
    72. border-color: #DDD;
    73. padding-bottom:15px;
    74. }
    75.  
    76. .single_bild{
    77. float:left;
    78. margin-right:5px;
    79. }
    80.  
    81. .news-single-img img {
    82. margin-left: -10px;
    83. pointer-events: none;
    84. cursor:default;
    85. outline: none;
    86. }
    87.  
    88.  
    89. .single_content p{
    90. padding-top:0px !important;
    91. font-family: pt_sansregular;
    92. font-size: 15px;
    93. color: #999;
    94. font-weight:normal;
    95. }
    96.  
    97. .news-single-backlink {
    98. margin-bottom:25px;
    99. clear:both;
    100. }
    101.  
    102. .news-single-backlink a{
    103. text-decoration:none;
    104. background-color:#BD8E23;
    105. padding:5px 10px 5px 10px;
    106. color:#ffffff;
    107. }
    108.  
    109. /* The more-Button which I renamed within TS */
    110. .news-list-mehr {
    111. padding-top:0px !important;
    112. font-family: pt_sansregular;
    113. font-size: 15px;
    114. font-weight:normal;
    115. }
    [/code]