I'm using typo3 and learning how it works. I'm trying to build a table with some pictures, but all that I have tried didn't work. So I will like to have some suggestions about how this can be accomplished.
Here is what I have:
On my controller I get a Tx_Extbase_Persistence_QueryResult with a group of pictures:
$fileElements = $fileElementRepository->getFileElementsByNumberOf($id, $numberOfElements);
$this->view->assign('fileElements', $fileElements);
And here is what I do with them on my index.html:
<table>
<tr>
<f:for each="{fileElements}" as="satArc">
<td>
<f:image src="{satArc.filePath}" alt="{satArc.linkText}" />
</td>
</f:for>
At the moment I get a row with all the pictures available. Because I have the for loop inside the tag. But I would like to find a way to group them in rows with 4 pictures. But I haven't figure it out how to divide in groups of 4 elements the queryResult.
I hope this is clear enough, otherwise ask.
Thanks for reading :)
You can use
<f:for each="{...}" as="...">
<f:cycle values="{0:'', 1:'', 2:'', 3:1}" as="isLast">
<f:if condition="{isLast} == 1">...</f:if>
</f:cycle>
</f:for>
So you can close the row and start a new one.
Related
I want to make this code more flexible.
As you maybe can see, it's a code for DCE.
So I want to make it possible to add Quotes with a loop or some kind similar.
https://gist.github.com/DarthKeks/f5b3c9c26f05f3a8dfbf127dee9f9b64
In DCE you can use a section that repeats itself. Say you create a section with the variable quote
Navigation
Iterator can be anything, this allows you to loop an do stuff like
counting or numbering. We use the iterator to see if an item is the
first item, and add an active class.
For example:
<ol class="carousel-indicators">
<f:for each="{field.quote}" as="quote" iteration="iterator">
<li data-target="#quote-carousel" data-slide-to="{iterator.cycle}" {f:if(condition: '{iterator.isFirst} == 1', then: ' class="active"')}></li>
</f:for>
</ol>
Caroussel
Same principle applies here:
<div class="carousel-inner" role="listbox">
<f:for each="{field.quote}" as="quote" iteration="iterator">
<div class="item{f:if(condition: '{iterator.isFirst} == 1', then: ' active')}">
<blockquote>
<f:format.html>{quote.expert}</f:format.html>
<small>{quote.expertName}</small>
</blockquote>
</div>
</f:for>
</div>
you can simply use dce-containers Where your qoutes are now just add a
Marker/Field and load in your DCE fields into that Marker/Field. As long as the DCE item is the same type it will loop trough.
With PostgreSQL I want to remove the image classes. The image classes has different ones. This is what I want to achieve of some sort:
<img src="#" class="one two three" alt="">
So that the result is:
<img src="#" class="" alt="">
So I can then do a UPDATE:
UPDATE posts SET content = 'class="new-class"' WHERE content = 'class=""'
I don't think the above is a good way to do it though.
update posts set content = replace(content, 'class="one two three"', 'class=""')
I try to render some Elements from another page via fluid in a Partial and try to use v:content.render. As you can see in the code I want to render 3 elements from the page with the Uid 9. But as soon as I have the v:content.render element in it I just get a blank page.
So my question is how to use v:content.render or what alternative I have? Or do I still need to use Typoscript for that?
{namespace v=FluidTYPO3\Vhs\ViewHelpers}
<div class="footer2">
<v:content.render column="0" limit="3" pageUid="9" as="contentElements">
<f:for each="{contentElements}" as="contentElement" iteration="footerIteration">
<f:format.html>{contentElement.bodytext}</f:format.html>
</f:for>
</v:content.render>
</div>
I am not sure if it is important, but the elements on the Page 9 are also fluid content elements.
I found a solution that works:
<v:variable.set name="contentElements" value="{v:content.get(column:'0', limit:'3', pageUid:'9', render:'FALSE')}" />
<f:for each="{contentElements}" as="contentElement" iteration="footerIteration">
<v:content.render contentUids="{0:contentElement.uid}" />
<f:format.html>{contentElement.bodytext}</f:format.html>
</f:for>
I think your first attempt was more readable. {contentElement} already had what you needed, there is no property bodytext if you leave render to its default true.
<v:content.render column="0" pageUid="9" limit:"3" as="contentElements">
<f:for each="{contentElements}" as="contentElement">
<f:format.raw>{contentElement}</f:format.raw>
</f:for>
</v:content.render>
If you don't know what you get back in as="" to work with, just try a debug:
<v:content.render column="0" pageUid="9" limit:"3" as="contentElements">
<f:for each="{contentElements}" as="contentElement">
<f:debug inline="true">{contentElement}</f:debug>
</f:for>
</v:content.render>
And I replaced <f:format.html> with <f:format.raw> so prevent some unwanted <p></p>
Basically, in English I want to tell Selenium "look for the content ttc202 in column one, of a multi-row, multicolumn table, then mouseOver on the Edit link"
HTML is as follows:
<tr id="86" class="ui-widget-content jqgrow ui-row-ltr ui-state-highlight" tabindex="0" role="row" aria-selected="true">
<td aria-describedby="jqLst_Short Name" style="text-align:left;" role="gridcell">
ttc202
</td>
<td aria-describedby="jqLst_Long Name" style="text-align:left;" role="gridcell">
Testing Training Company 202
</td>
<td aria-describedby="jqLst_Actions" title="" style="text-align:center;" role="gridcell">
<a class="act avw" title="View this Organisation" href="company/view?lcId=86"></a>
<a class="act aed" title="Edit this Organisation" href="company/edit?lcId=86"></a>
</td>
</tr>
I have tried this:
//td[contains(text(),'ttc202')]/following-sibling::td[contains(a/title(),'Edit this Organisation')]/a
All help appreciated. I assume I am missing something to skip over the first column, but can't imagine what will enable me to do that...
Progress:
I have found the following as an alternative which should get to the correct cell, but I am not able to workout how to target the title in the link code:
//td[normalize-space() ="ttc202"])[1]/following-sibling::td[2]/a[. = 'Edit']
I think this is progress just not sufficient to get me to the finish line!
After much investigation I found the following answer, perhaps this might help others who come across this question:
//tr[contains(td[1], "ttc202")]/td[3]/a[#title='Edit this Organisation']
The trick was realising which cell the information was in (represented by the square brackets).
I have this html:
<div id="top">
<div id="potato"></div>
</div>
<div id="bottom">
<div id="potato"></div>
</div>
I am trying to use JQuery to access the bottom potato div, and none of the following work.
$('#top #potato').html('Russet');
$('#bottom #potato').html('Red');
$('#top > #potato').html('Russet');
$('#bottom > #potato').html('Red');
$('#potato').html('Idaho');
All of these just modify the top div and not the bottom one. How do I modify the bottom div?
All elements must have unique IDs, in this case you may use the class attribute, so that you have
<div class="potato" />
Which you may access like this:
$('#bottom > .potato').html('Idaho');
I just ran into this problem. Although it's true you shouldn't have two items with the same ID, it happens.
To get the div you want, this is what works for me:
$('#bottom').find('#potato');
For one thing you can not have an element that has the same id as another. Id is unique, but class names can be used as many times as you want
<div id="top">
<div id="potato1"></div>
</div>
<div id="bottom">
<div id="potato2"></div>
</div>
jquery as so:
$(function{
$("#potato2").html('Idaho'); //if you're going to name it with an id,
// that's all the selector you need
});
What you posted and said doesn't work seems to work to me.
$('#top #potato').addClass('Russet');
$('#bottom #potato').addClass('Red');
https://jsfiddle.net/wzezr706/
no need to put classes on everything, but you should have unique id's for everything. That aside, try this:
$("#bottom + div").html('Idaho');
Try this:
$("#bottom #potato").html('Idaho');
Or
$("#bottom #potato:last").html('Idaho');
your HTML is not valid, since you have non-unique ids