Блог

Главная - Вопросы по программированию - Как заполнить атрибут Flexsliders data-thumb источником изображения в Fluid и tx-news?

Как заполнить атрибут Flexsliders data-thumb источником изображения в Fluid и tx-news?

#typo3 #fluid #typo3-7.6.x #tx-news

#typo3 #текучий #typo3-7.6.x #tx-новости #fluid

Вопрос:

Я внедряю новостной слайдер, основанный на расширении TYPO3 «news» и Flexslider. Слайдер новостей содержит изображения предварительного просмотра миниатюр, и эти изображения загружаются через атрибут «data-thumb», который содержит URL-адрес каждого изображения в слайдере. Как мне получить URL-адрес в Fluid и расширение новостей?

Я попробовал следующее, но я получаю сообщение об ошибке:

 <li data-thumb="{f:uri.image(image:mediaElement,title:'{mediaElement.originalResource.title}',alt:'{mediaElement.originalResource.alternative}', maxWidth:'{settings.list.media.image.maxWidth}',maxHeight:'{settings.list.media.image.maxHeight}')}">...</li>

Полная часть для одного объекта в слайдере выглядит следующим образом:

 <li class="item itemtype-{newsItem.type}{f:if(condition: newsItem.istopnews, then: ' topnews')}" data-thumb="{f:uri.image(image:mediaElement,title:'{mediaElement.originalResource.title}',alt:'{mediaElement.originalResource.alternative}', maxWidth:'{settings.list.media.image.maxWidth}',maxHeight:'{settings.list.media.image.maxHeight}')}" itemscope="itemscope" itemtype="http://schema.org/Article">

    <n:excludeDisplayedNews newsItem="{newsItem}"/>
    <f:if condition="{newsItem.mediaPreviews}">
        <!-- media preview element -->
        <f:then>
            <div>
                <n:link newsItem="{newsItem}" settings="{settings}" title="{newsItem.title}">
                    <f:alias map="{mediaElement: '{newsItem.mediaPreviews.0}'}">
                        <f:if condition="{mediaElement.originalResource.type} == 2">
                            <f:image image="{mediaElement}" title="{mediaElement.originalResource.title}" alt="{mediaElement.originalResource.alternative}" width="{f:if(condition: settings.media.maxWidth, then: settings.media.maxWidth, else: settings.list.media.image.maxWidth)}" height="{f:if(condition: settings.media.maxHeight, then: settings.media.maxHeight, else: settings.list.media.image.maxHeight)}"/>
                        </f:if>
                        <f:if condition="{mediaElement.originalResource.type} == 4">
                            <f:render partial="Detail/MediaVideo" arguments="{mediaElement: mediaElement}"/>
                        </f:if>
                        <f:if condition="{mediaElement.originalResource.type} == 5">
                            <f:image image="{mediaElement}" title="{mediaElement.originalResource.title}" alt="{mediaElement.originalResource.alternative}" width="{f:if(condition: settings.media.maxWidth, then: settings.media.maxWidth, else: settings.list.media.image.maxWidth)}" height="{f:if(condition: settings.media.maxHeight, then: settings.media.maxHeight, else: settings.list.media.image.maxHeight)}"/>
                        </f:if>
                    </f:alias>
                </n:link>
            </div>
        </f:then>
        <f:else>
            <f:if condition="{settings.displayDummyIfNoMedia}">
                <div>
                    <span class="no-media-element">
                        <n:link newsItem="{newsItem}" settings="{settings}" title="{newsItem.title}">
                            <f:image src="{settings.list.media.dummyImage}" title="" alt="" width="{f:if(condition: settings.media.maxWidth, then: settings.media.maxWidth, else: settings.list.media.image.maxWidth)}" height="{f:if(condition: settings.media.maxHeight, then: settings.media.maxHeight, else: settings.list.media.image.maxHeight)}"/>
                        </n:link>
                    </span>
                </div>
            </f:if>
        </f:else>
    </f:if> 
    <div class="flex-caption">
        <h1 class="fvl flex-title">
            <n:link newsItem="{newsItem}" settings="{settings}" title="{newsItem.title}">
                <span itemprop="headline">{newsItem.title -> f:format.crop(maxCharacters: '40', respectWordBoundaries:'1')}</span>
            </n:link>
        </h1>
        <p class="flexslider-subtitle">
            <n:removeMediaTags>
            <f:if condition="{newsItem.teaser}">
                <f:then>
                    <span itemprop="description">{newsItem.teaser -> f:format.crop(maxCharacters: '{settings.cropMaxCharacters}', respectWordBoundaries:'1') -> f:format.stripTags()}</span>
                </f:then>
                <f:else>    
                    <span itemprop="description"></div>{newsItem.bodytext -> f:format.crop(maxCharacters: '{settings.cropMaxCharacters}', respectWordBoundaries:'1') -> f:format.stripTags()}</span>
                </f:else>
            </f:if>
            </n:removeMediaTags>
            <span>
                <n:link newsItem="{newsItem}" settings="{settings}" class="more" title="{newsItem.title}">
                    <f:translate key="more-link"/>
                </n:link>
            </span>
        </p>
    </div>
</li>

Любой намек на то, что я делаю неправильно? Я знаю, что существуют также расширения для слайдеров новостей, но я не хочу больше зависеть от другого расширения.

Ответ №1:

Похоже, что скобки установлены неправильно, и вам нужно «экранировать» открывающие и закрывающие скобки.

Попробуйте это:

 <li data-thumb="<f:format.raw>{</f:format.raw>
    {f:uri.image(image:mediaElement)},
    title:'{mediaElement.originalResource.title}',
    alt:'{mediaElement.originalResource.alternative}', 
    maxWidth:'{settings.list.media.image.maxWidth}',
    maxHeight:'{settings.list.media.image.maxHeight}'
<f:format.raw>}</f:format.raw>">...</li>

Обновить:

Это ваша полная часть. Вы должны использовать {newsItem.mediaPreviews.0} :

 <li class="item itemtype-{newsItem.type}{f:if(condition: newsItem.istopnews, then: ' topnews')}" data-thumb="<f:format.raw>{</f:format.raw>{f:uri.image(image:newsItem.mediaPreviews.0)},title:'{newsItem.mediaPreviews.0.originalResource.title}',alt:'{newsItem.mediaPreviews.0.originalResource.alternative}',maxWidth:'{settings.list.media.image.maxWidth}',maxHeight:'{settings.list.media.image.maxHeight}'<f:format.raw>}</f:format.raw>" itemscope="itemscope" itemtype="http://schema.org/Article">

    <n:excludeDisplayedNews newsItem="{newsItem}"/>
    <f:if condition="{newsItem.mediaPreviews}">
        <!-- media preview element -->
        <f:then>
            <div>
                <n:link newsItem="{newsItem}" settings="{settings}" title="{newsItem.title}">
                    <f:alias map="{mediaElement: '{newsItem.mediaPreviews.0}'}">
                        <f:if condition="{mediaElement.originalResource.type} == 2">
                            <f:image image="{mediaElement}" title="{mediaElement.originalResource.title}" alt="{mediaElement.originalResource.alternative}" width="{f:if(condition: settings.media.maxWidth, then: settings.media.maxWidth, else: settings.list.media.image.maxWidth)}" height="{f:if(condition: settings.media.maxHeight, then: settings.media.maxHeight, else: settings.list.media.image.maxHeight)}"/>
                        </f:if>
                        <f:if condition="{mediaElement.originalResource.type} == 4">
                            <f:render partial="Detail/MediaVideo" arguments="{mediaElement: mediaElement}"/>
                        </f:if>
                        <f:if condition="{mediaElement.originalResource.type} == 5">
                            <f:image image="{mediaElement}" title="{mediaElement.originalResource.title}" alt="{mediaElement.originalResource.alternative}" width="{f:if(condition: settings.media.maxWidth, then: settings.media.maxWidth, else: settings.list.media.image.maxWidth)}" height="{f:if(condition: settings.media.maxHeight, then: settings.media.maxHeight, else: settings.list.media.image.maxHeight)}"/>
                        </f:if>
                    </f:alias>
                </n:link>
            </div>
        </f:then>
        <f:else>
            <f:if condition="{settings.displayDummyIfNoMedia}">
                <div>
                    <span class="no-media-element">
                        <n:link newsItem="{newsItem}" settings="{settings}" title="{newsItem.title}">
                            <f:image src="{settings.list.media.dummyImage}" title="" alt="" width="{f:if(condition: settings.media.maxWidth, then: settings.media.maxWidth, else: settings.list.media.image.maxWidth)}" height="{f:if(condition: settings.media.maxHeight, then: settings.media.maxHeight, else: settings.list.media.image.maxHeight)}"/>
                        </n:link>
                    </span>
                </div>
            </f:if>
        </f:else>
    </f:if> 
    <div class="flex-caption">
        <h1 class="fvl flex-title">
            <n:link newsItem="{newsItem}" settings="{settings}" title="{newsItem.title}">
                <span itemprop="headline">{newsItem.title -> f:format.crop(maxCharacters: '40', respectWordBoundaries:'1')}</span>
            </n:link>
        </h1>
        <p class="flexslider-subtitle">
            <n:removeMediaTags>
            <f:if condition="{newsItem.teaser}">
                <f:then>
                    <span itemprop="description">{newsItem.teaser -> f:format.crop(maxCharacters: '{settings.cropMaxCharacters}', respectWordBoundaries:'1') -> f:format.stripTags()}</span>
                </f:then>
                <f:else>    
                    <span itemprop="description"></div>{newsItem.bodytext -> f:format.crop(maxCharacters: '{settings.cropMaxCharacters}', respectWordBoundaries:'1') -> f:format.stripTags()}</span>
                </f:else>
            </f:if>
            </n:removeMediaTags>
            <span>
                <n:link newsItem="{newsItem}" settings="{settings}" class="more" title="{newsItem.title}">
                    <f:translate key="more-link"/>
                </n:link>
            </span>
        </p>
    </div>
</li>

Комментарии:

1. Спасибо за ваш ответ. Я пробовал, но на выходе нет URL. Это выглядит так: <li class="item itemtype-0 flex-active-slide" data-thumb="{ , title:'', alt:'', maxWidth:'100', maxHeight:'100' }">...</li> Кажется, что Fluid не отображается. Поскольку он встроенный, разве я не должен использовать встроенный синтаксис?

2. Вы уверены, что у вас есть данные для mediaElement ? Попробуйте <f:debug>{mediaElement}</f:debug> и посмотрите, получите ли вы какой-либо результат. Я протестировал приведенный выше код, и он работает для меня.

3. Извините, где мне нужно разместить <f:debug>{mediaElement}</f:debug> в моем шаблоне?

4. @bastians Добавьте его непосредственно перед вашим элементом <li>. Если вы не получаете никаких выходных данных (что я предполагаю), используйте <f:debug>{_all}</f:debug> , чтобы увидеть, какие данные вы получаете.

5. Ладно, <f:debug>{mediaElement}</f:debug> показывает Extbase Variable Dump: NULL . <f:debug>{_all}</f:debug> показывает 5 результатов из 5 имеющихся у меня записей новостей, за которыми находятся изображения falmedia . Или мне нужно проверить другие атрибуты? Не видел других, которые могли бы быть связаны с моей проблемой.

Ответ №2:

Я решил это с помощью sections . Точно так же, как это было сделано расширением t3newsslider .

Я добавил это в конец моего частичного файла:

 <f:section name="MediaElementThumbSrc">
  <f:if condition="{newsItem.mediaPreviews}">
    <f:then>
      <f:alias map="{mediaElementSrc: '{newsItem.mediaPreviews.0}'}">
        <f:uri.image src="{mediaElementSrc.uid}" treatIdAsReference="1"
          width="{f:if(condition: settings.media.maxWidth, then: settings.media.maxWidth, else: settings.list.media.image.newsSliderMaxWidth)}"
          height="{f:if(condition: settings.media.maxHeight, then: settings.media.maxHeight, else: settings.list.media.image.newsSliderMaxHeight)}" />
      </f:alias>
    </f:then>
    <f:else>
      <f:if condition="{settings.displayDummyIfNoMedia}">
        <f:uri.image src="{settings.list.media.dummyImage}"
          width="{f:if(condition: settings.media.maxWidth, then: settings.media.maxWidth, else: settings.list.media.image.newsSliderMaxWidth)}"
          height="{f:if(condition: settings.media.maxHeight, then: settings.media.maxHeight, else: settings.list.media.image.newsSliderMaxHeight)}" />
      </f:if>
    </f:else>
  </f:if>
</f:section>

И затем я ссылался на это следующим образом:

 <li class="item itemtype-{newsItem.type}{f:if(condition: newsItem.istopnews, then: ' topnews')}"
  data-thumb="{f:render(section:'MediaElementThumbSrc', arguments:'{newsItem:newsItem, settings:settings}')}"
  itemscope="itemscope" itemtype="http://schema.org/Article">...</li>

И это работает.