Extension news: Bild - und Titelprobleme

Ich habe die Erweiterung news von Georg Ringer auf meiner lokalen Testinstallation hochgeladen. Ich habe bereits den Detail-Artikel angepasst:

{namespace n=Tx_News_ViewHelpers}

<f:layout name="Detail.html" />

<!--
        =====================
                News/Detail.html
-->

<f:section name="content">
        <f:if condition="{newsItem}">
                <f:then>
                        <n:format.nothing>
                                <f:if condition="{newsItem.alternativeTitle}">
                                        <f:then>
                                                <n:titleTag>
                                                        <n:format.htmlentitiesDecode>{newsItem.alternativeTitle}</n:format.htmlentitiesDecode>
                                                </n:titleTag>
                                        </f:then>
                                        <f:else>
                                                <n:titleTag>
                                                        <n:format.htmlentitiesDecode>{newsItem.title}</n:format.htmlentitiesDecode>
                                                </n:titleTag>
                                        </f:else>
                                </f:if>
                                <f:render partial="Detail/Opengraph" arguments="{newsItem: newsItem, settings:settings}" />
                        </n:format.nothing>
                        <!-- Blog starts -->

            <div class="blog">
               <div class="row">
                  <div class="span12">

                     <!-- Blog Posts -->
                     <div class="row">
                        <div class="span8">
                           <div class="posts">

                              <!-- Each posts should be enclosed inside "entry" class" -->
                              <!-- Post one -->
                              <div class="entry">

                                <h2>{newsItem.title}</h2>


                                <!-- Meta details -->
                                 <div class="meta">
                                    <i class="icon-calendar"></i> <f:format.date format="d.m.Y">{newsItem.datetime}</f:format.date> <i class="icon-user"></i> <f:if condition="{newsItem.author}">
                                                <!-- author -->
                                                <f:translate key="author" arguments="{0:newsItem.author}"></f:translate>

                                        </f:if> <i class="icon-folder-open"></i> <a href="#"><f:if condition="{newsItem.categories}">
                                                <f:render partial="Category/Items" arguments="{categories:newsItem.categories, settings:settings}" />
                                        </f:if></a>
                                 </div>

                                 <!-- Thumbnail -->
                                 <div class="bthumb">
                                     <f:render partial="Detail/MediaContainer" arguments="{media: newsItem.media, settings:settings}" />
                                 </div>


                                <f:if condition="{newsItem.teaser}">
                                <!-- teaser -->
                                <div class="teaser-text">
                                        {newsItem.teaser}
                                </div>
                        </f:if>

                        <!-- main text -->
                        <div class="news-text-wrap">
                                <f:format.html>{newsItem.bodytext}</f:format.html>
                        </div>

                        <f:if condition="{settings.backPid}">
                                <!-- Link Back -->
                                <div class="news-backlink-wrap">
                                        <f:link.page pageUid="{settings.backPid}">
                                                <f:translate key="back-link" />
                                        </f:link.page>
                                </div>
                        </f:if>


                           </div>





</div>
</div>
</div>

</div>
</div>
</div>



                     <!-- related things -->
                        <div class="news-related-wrap">

                                <f:if condition="{newsItem.allRelatedSorted}">
                                        <!-- Related news records -->
                                        <div class="news-related news-related-news">
                                                <h4>
                                                        <f:translate key="related-news" />
                                                </h4>
                                                <ul>
                                                        <f:for each="{newsItem.allRelatedSorted}" as="related">
                                                                <li>
                                                                        <span class="news-related-news-date"><f:format.date format="d.m.Y">{related.datetime}</f:format.date></span>
                                                                        <n:link newsItem="{related}" settings="{settings}">
                                                                                {related.title}
                                                                        </n:link>
                                                                </li>

                                                        </f:for>
                                                </ul>
                                        </div>
                                </f:if>

                                <f:if condition="{newsItem.relatedFiles}">
                                        <!-- Related files -->
                                        <div class="news-related news-related-files">
                                                <h4>
                                                        <f:translate key="related-files" />
                                                </h4>
                                                <ul>
                                                        <f:for each="{newsItem.relatedFiles}" as="relatedFile">
                                                                <li>
                                                                        <span class="news-related-files-link">
                                                                                <n:format.fileDownload file="uploads/tx_news/{relatedFile.file}" configuration="{settings.relatedFiles.download}">
                                                                                        <f:if condition="{relatedFile.title}">
                                                                                                <f:then>
                                                                                                        {relatedFile.title}
                                                                                                </f:then>
                                                                                                <f:else>
                                                                                                        {relatedFile.file}
                                                                                                </f:else>
                                                                                        </f:if>
                                                                                </n:format.fileDownload>
                                                                        </span>
                                                                        <span class="news-related-files-size">
                                                                                <n:format.fileSize file="uploads/tx_news/{relatedFile.file}" format="{settings.relatedFiles.fileSizeLabels}" />
                                                                        </span>
                                                                </li>
                                                        </f:for>
                                                </ul>
                                        </div>
                                </f:if>

                                <f:if condition="{newsItem.relatedLinks}">
                                        <!-- Related links -->
                                        <div class="news-related news-related-links">
                                                <h4>
                                                        <f:translate key="related-links" />
                                                </h4>
                                                <ul>
                                                        <f:for each="{newsItem.relatedLinks}" as="relatedLink">
                                                                <li>
                                                                        <f:link.page pageUid="{relatedLink.uri}">{relatedLink.title}</f:link.page>
                                                                </li>
                                                        </f:for>
                                                </ul>
                                        </div>
                                </f:if>
                        </div>
                </f:then>
                <f:else>




                </f:else>
        </f:if>
</f:section>

Das Problem ist nun folgendes:

In den Nachrichtenartikeln sollen Bilder angezeigt werden können. Der Bereich der Bilder ist vom HTML aus vorgegeben. Doch wenn ich mir den Beispiel-Artikel nun anschaue, wird zwar kein Bild angezeigt (da keines eingegeben wurde), aber der Frame, der um das Bild kommt, ist als dickerer Strich unterhalb des Titels des Beitrages zu sehen.

Gibt es denn nicht die Möglichkeit, den Frame und das ild erst dann gemeinsam anzeigen zu lassen, sobald man im BE ein ild hinzugefügt hat? (So war das zumindest bei tt_news!)

Was kann ich tun?

hi,

Du hast mit Fluid die Möglichkeit IF Abfragen zu integrieren, wie es in dem von dir geposteten Template bereits der Fall ist:

...
<f:if condition="{relatedFile.title}">
        <f:then>
                {relatedFile.title}
        </f:then>
        <f:else>
                {relatedFile.file}
        </f:else>
</f:if>
...

In deinem HTML schaust du nun was für eine Element für den "dickerer Strich" verantwortlich ist und setzt dieses HTML Element dann mit in den IF Bereich. Also wenn ein Bild vorhanden ist, dann (<f:then>) schreibe dieses HTML ansonsten (<f:else>) schreibe es nicht. Also den Else bereich einfach weglassen, bzw leer lassen.

Hi,

ich zeige mal den Teil, der das Bild anzeiegn lassen soll. Den ganzen Code habe ich aus dem Original-Template der Erweiterung genommen und in das gdeachte div eingefügt:

<!-- Thumbnail -->
                                 <div class="bthumb">
                                     <f:if condition="{newsItem.media}">
                <!-- media preview element -->
                <f:then>

                                <n:link newsItem="{newsItem}" settings="{settings}">
                                        <f:if condition="{newsItem.mediaPreviews}">
                                                <f:then>
                                                        <f:alias map="{mediaElement: newsItem.mediaPreviews.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>
                                                </f:then>
                                                <f:else>
                                                        <f:if condition="{settings.displayDummyIfNoMedia}">
                                                        <span class="no-media-element">
                                                                        <f:image
                                                                                src=""
                                                                                title=""
                                                                                alt=""
                                                                                maxWidth="{settings.list.media.image.maxWidth}"
                                                                                maxHeight="{settings.list.media.image.maxHeight}"
                                                                                />
                                                        </span>
                                                        </f:if>
                                                </f:else>
                                        </f:if>
                                </n:link>

                </f:then>
                <f:else>
                        <f:if condition="{settings.displayDummyIfNoMedia}">
                                <f:then>

                                </f:then>
                        </f:if>
                </f:else>
        </f:if>
                                 </div>

Ich dachte, es wäre bereits so voreingestellt, dass man es so nutzen kann. Das scheint nicht der Fall zu sein.

Die andere Frage ist auch, ob ich das alles vom Original überhaupt brauche??

Was mir aber gerade einfällt, ist, dass dieser Rahmen, der angezeigt wird, vom div-Container des Bildes kommt. Wie kann ich das ändern? Kann ich den div-Container etwas verschieben, ohne das Fluid-Templating zu zerstören?

Nutzen kann man das so wie es ist doch was du im Endeffekt brauchst und nicht brauchst hängt von deinem System und deinem Einsatz ab.

Falls diese unschöne Strich nun von dem "<div class="bthumb"> ... <div>" kannst du diesen Part verschieben.

Sieht dann also so aus,

vorher:

<!-- Thumbnail -->
                                 <div class="bthumb">
                                     <f:if condition="{newsItem.media}">
                <!-- media preview element -->
                <f:then>

                                .....
                </f:then>
                <f:else>
                        <f:if condition="{settings.displayDummyIfNoMedia}">
                                <f:then>

                                </f:then>
                        </f:if>
                </f:else>
        </f:if>
                                 </div>

nachher:

<!-- Thumbnail -->
                                 
                                     <f:if condition="{newsItem.media}">
                <!-- media preview element -->
                <f:then>
     <div class="bthumb">
                                .....
     </div>
                </f:then>
                <f:else>
                        <f:if condition="{settings.displayDummyIfNoMedia}">
                                <f:then>

                                </f:then>
                        </f:if>
                </f:else>
        </f:if>

Der Div Container wird also nur gerendert wenn ein Bild vorhanden ist.

Okay, das habe ich schon mal hinbekommen.