FluidTYPO3: How do I render content from other extensions (news...)? - typo3

Actually I found the answer already on this site
Preferred way to add an extensions into Fluid Powered TYPO3 template
but I don't get it to work :-(
I have a page template with main content and in the sidebar content from FlexSlider extension and at the bottom I want to render the list view of extension news. So I guess answer 1a from Claus will fit:
1a) create the element in a sys folder and reference it from your Flux form settings then use v:content.render to render it by UID.
but how is that done? How do I reference it from my Flux form?
Has somebody an example code. I couldn't find a tutorial or a documentation...
Thanks for reading and hopefully you have an answer ;-)
Jürgen

An easy way is to create a typoscript element and then render it in fluid:
lib.rightcolumn = CONTENT
lib.rightcolumn {
table = tt_content
select {
pidInList = 42
where = colPos=1
}
}
<f:cObject typoscriptObjectPath="lib.rightcolumn" />
Another way is to directly create it in fluid:
https://fluidtypo3.org/viewhelpers/vhs/master/Content/RenderViewHelper.html

Finally I got it accidentally by fixing another problem:
Fluid Powered TYPO3 FLUX Fluidcontent - No Output in Frontend?
I had to add the file "typo3conf/AdditionalConfiguration.php" with
<?php $GLOBALS['TYPO3_CONF_VARS']['FE']['contentRenderingTemplates'] = array('fluidcontentcore/Configuration/TypoScript/');
Thanks for help nBar, I used "f.cObject" as workaround.
Now here is my Page/Template code:
<f:section name="Configuration">
<flux:form id="homepage">
<flux:grid>
<flux:grid.row>
<flux:grid.column colPos="0" colspan="2" name="main" label="Main content"/>
<flux:grid.column colPos="1" colspan="1" name="logoslider" label="Logo slider"/>
</flux:grid.row>
<flux:grid.row>
<flux:grid.column colPos="2" colspan="3" name="news" label="News"/>
</flux:grid.row>
</flux:grid>
</flux:form>
</f:section>
<f:section name="Main">
<div class="container">
<div class="row">
<div class="col-md-8">
<v:content.render column="0"/>
</div>
<div class="col-md-4 team_logos">
<div class="infobox">
<v:content.render column="1"/>
</div>
</div>
</div>
<div class="row infobox">
<div class="col-md-12">
<v:content.render column="2"/>
</div>
</div>
</div>
</f:section>

Related

Functionality of data-sly-test for given example in image

Please find the below snippet. Can any one explain above functionality for the data-sly-test. How it will work condition here for image??
<div class="spon-image-container col-12 col-md-4">
<sly data-sly-test="${properties.fileReference}">
<img class="spon-_image" src="${properties.fileReference}"/>
</sly>
</div>
There are a few things to mention here. The gist of the code snippet is, that the <img> tag will only be rendered if {$properties.fileReference} is not empty.
Be aware, there is no sanity check involved here. data-sly-test won't check if the referenced file exists etc.
So assume that ${properties.fileReference} equals /content/dam/myImage.png. Then the resulting HTML would like this:
<div class="spon-image-container col-12 col-md-4">
<img class="spon-_image" src="/content/dam/myImage.png"/>
</div>
On the other hand, if the ${properties.fileReference} is empty (or null) you get the following HTML:
<div class="spon-image-container col-12 col-md-4">
</div>
Depending on your HTML/CSS/JS you might not want that to happen. So you could improve your code to include the data-sly-test statement in the <div> tag:
<div class="spon-image-container col-12 col-md-4" data-sly-test="${properties.fileReference}">
<img class="spon-_image" src="${properties.fileReference}"/>
</div>
This way, the <div> is only rendered, if a fileReference is set. But even if you still want the <div> to appear, your code can be improved by removing the <sly> element and adding the data-sly-test to the <img> tag:
<div class="spon-image-container col-12 col-md-4">
<img class="spon-_image"
src="${properties.fileReference}"
data-sly-test="${properties.fileReference}"/>
</div>
As mentioned in the specification, data-sly-test:
Keeps or removes the element depending on the attribute value.
For your case if fileReferece property evaluates to true (not null, not empty), it will render:
<div class="spon-image-container col-12 col-md-4">
<img class="spon-_image" src="....."/>
</div>
Note that the sly tag unwraps/removes itself, it's actually unnecessary here as the data-sly-test attribute could be moved to the img.
If fileReference evaluates to false, it will render:
<div class="spon-image-container col-12 col-md-4">
</div>
It basically checks if the current resource properties(i.e component properties) contain fileRefernce then it will add an image tag.

Remove ce-wrappers of fluid cObject

I masked(mask-extension) a couple of plug-ins. When the image is generated in the template, it is always wrapped in following divs:
<div id="c63" class="frame frame-default frame-type-image frame-layout-0">
<div class="ce-image ce-center ce-above">
<div class="ce-gallery" data-ce-columns="1" data-ce-images="1">
<div class="ce-outer">
<div class="ce-inner">
<div class="ce-row">
<div class="ce-column">
<figure class="image"><img class="image-embed-item"
src="fileadmin/user_upload/bla" width="975"
height="678" alt=""></figure>
</div>
</div>
</div>
</div>
</div>
</div>
Is there any way to remove all those wrappers? I simply want to have the image.
Sidenotes:
1. f:image does not work, I cannot access the proper uid for it to show. (This is perhaps an issue with mask)
2. I cannot find the tt_content.stdWrap.innerWrap > in my typoScript, as I do not know where mask puts it. It is neither in the netup.ts nor in the NewContentElementWizard.ts
You need to overwrite the fluid_styled_content partial in Resources/Private/Partials/Media/Gallery.html.
How to overwrite, you can read here: https://docs.typo3.org/typo3cms/extensions/fluid_styled_content/8.7/Configuration/OverridingFluidTemplates/

Github pages are not showing images

Images are not showing on my site on github pages.
This is my site:https://rsgrw23.github.io/rate-your-beer/
Locally everything is working fine.
This is the repository: https://github.com/rsgrw23/rate-your-beer
What is wrong?
For example, here's an excerpt of src/components/home.vue <template>:
<template>
<div class="home">
<img class="home__img__header" src="src/assets/craft-beer.jpg" alt="Craft Beer">
<header class="home__header">
<transition appear appear-active-class="bounce-enter-active">
<h1>"Czasem najlepszym wyjściem</h1>
</transition>
<transition appear appear-active-class="bounce-enter-active">
<h2>Jest wyjście na piwo"</h2>
</transition>
</header>
<main class="home__main">
<h1 class="home__title">Fun Facts</h1>
<article class="home__article">
<div class="home__content content-1"><h1>Lepsze od wody?</h1>
<p>W mi... dziś.</p></div>
<img class="home__img img-1" src="src/assets/wish-you-beer-here.jpg" alt="piwo">
</article>
<article class="home__article">
<img class="home__img img-2" src="src/assets/beer-mine.jpg" alt="piwo">
<div class="home__content content-2"><h1>Nie tylko z chmielem</h1>
<p>Je...em.</p>
<p>Co cie...ika!</p></div>
</article>
<article class="home__article">
<div class="home__content content-3"><h1>IPA czyli napój żołnieży</h1>
<p>Bry...wa.</p></div>
<img class="home__img img-3" src="src/assets/water.jpg" alt="piwo">
</article>
</main>
<div class="description">
<div class="description__content">
<div class="description__article">
<h1 class="description__header">Piłeś piwko?</h1>
<h2 class="description__header">Oceń je!</h2>
</div>
</div>
</div>
</div>
</template>
Images are located at src/assets/craft-beer.jpg for instance.
So webpack is able to find the images and process them as resources, you should reference the assets (images) via relative paths, not absolute paths.
So, considering a file at /src/components/home.vue with images at /src/assets (being / the project root), instead of:
<img class="home__img__header" src="src/assets/craft-beer.jpg" alt="Craft Beer">
Use:
<img class="home__img__header" src="../assets/craft-beer.jpg" alt="Craft Beer">
Naturally, in other files, change the relative path accordingly.
For the images to work with Vue the generated file there are few ways.Here is an SO link on the same.
How to import and use image in a Vue single file component?
What you will want to do here is something like this.
<img class="home__img__header" src="~src/assets/craft-beer.jpg" alt="Craft Beer">
This lets the webpack know about the image being an asset and generate its path appropriately.

Indexed Search extbase htmltags in output

I am using TYPO3 7.6.11 and indexed_search 7.6.0.
I use the extbase plugin for indexed_search and in the output it escapes the HTML-Tags to mark the searchword. For example, when I search for "search" I get this output:
Test text with<strong class="tx-indexedsearch-redMarkup">search</strong> pattern.
I found this bugfix to this problem: https://forge.typo3.org/issues/77901
But the file PageBrowsingResultsViewHelper.php doesn't look exactly the same, and even when I add the variable protected $escapeOutput = false; it doesn't change anything.
Any idea where this is come from and where I can disable the escaping?
It was another extension who overwrote a Partial of tx_indexedsearch that caused the problem.. -> Always check if the template you are working on is the one that gets outputted ;)
This happen because of format object rendering.your result will render in {row.description} object and initially there is no format set. you have to format your result({row.description}) to the HTML. For that:
Go to the search result file.
yourindexsearch/templatingpath/IndexedSearch/Partials/Searchresult.html
Here is the complete file:
<div class="fourffCom col-sm-6">
<f:format.html><h2>{row.title}</h2></f:format.html>
<f:if condition="{row.headerOnly} == 0">
<!-- Format html -->
<f:format.html>{row.description}</f:format.html>
<ul>
<li>
<p><f:translate key="result.size" /> </p>
<b>{row.size}</b>
</li>
<li>
<p class="tx-indexedsearch-text-item-crdate"><f:translate key="result.created" /> </p>
<b class="tx-indexedsearch-text-item-crdate"><f:format.date>#{row.created}</f:format.date></b>
</li>
<li>
<p class="tx-indexedsearch-text-item-mtime"><f:translate key="result.modified" /> </p>
<b class="tx-indexedsearch-text-item-mtime"><f:format.date>#{row.modified}</f:format.date></b>
</li>
<li>
</li>
<li>
<p><f:translate key="result.path" /> </p>
<b><f:format.html>{row.path}</f:format.html></b>
</li>
</ul>
</f:if>
<f:if condition="{row.headerOnly} == 1">
<!-- Format html -->
<f:format.html>{row.description}</f:format.html>
</f:if>
<f:if condition="{row.subresults}">
<p class="tx-indexedsearch-list">
<f:for each="{row.subresults.items}" as="subrow">
<f:render partial="Searchresult" arguments="{row: subrow}" />
</f:for>
</p>
</f:if>
</div>

Extending Liferay 7 default theme

I am looking to change just a few attributes for the default Liferay 7 theme:
Left Justify the navbar
Hide the Search control in the navbar
Allow a second level to each menu
It seems this is best done using a Themelet? Curious if someone could point me to an existing implementation I could use as a starting point for such a customization.
Thanks,
Randy
To allow a seconde level or ( Child of Child) you should add another loop inside each element. Here is the FreeMarker code to put into navigation.ftl, and you can add you CSS on it.
<nav id="navigation" role="navigation">
<div class="row">
<div class="col-md-9">
<ul class="nav1">
<#list nav_items as nav_item>
<li>${nav_item.getName()}
<#if nav_item.hasChildren()>
<div class="fulldrop">
<#list nav_item.getChildren() as nav_child>
<div class="col-xs-4">
<#assign navchild_name = nav_child.getName() />
<h3>${nav_child.getName()}</h3>
<br>
<#if nav_child.hasChildren()>
<ul>
<#list nav_child.getChildren() as nav_child>
<li>${nav_child.getName()}</li>
</#list>
</ul>
</#if>
</div>
</#list>
</div>
</#if>
</li>
</#list>
</ul>
</div>
</div>
</nav>