How to render content in a custom typo3 grid element ? - grid

I'm trying to make a simple 2 column teaser element that displays an image on the left column, a content element in the right column plus a button link.
This is the original ts, it works but it's ugly and the images are static:
tt_content.gridelements_pi1.20.10.setup {
29 < lib.gridelements.defaultGridSetup
29 {
columns {
20 < .default
20.outerWrap = <div class="fifty1"><div class="csc-textpic csc-textpic-intext-left-nowrap"><div class="csc-textpic-imagewrap"><img src="{field:flexform_teaserimage1}" alt="" /></div></div><div class="fiftycontent"><div class="csc-textpic csc-textpic-text">|</div></div><div class="fiftylink"><img src="{$tmplpath}images/button.png" alt="" /></div></div>
20.insertData = 1
}
}
}
This is the new ts I'm coding, image & button works but the content element part is not displaying properly:
tt_content.gridelements_pi1.20.10.setup {
29 < lib.gridelements.defaultGridSetup
29 {
columns {
20.prepend = COA
20.prepend.20 = IMAGE
20.prepend.20.file.import.field = flexform_teaserimage1
20.insertData = 1
20.prepend.20.stdWrap.typolink.parameter.field = flexform_link1
20.prepend.20.wrap = <div class="csc-textpic csc-textpic-intext-left-nowrap"><div class="csc-textpic-imagewrap">|</div></div>
20.prepend.25 < .default
20.prepend.25.outerWrap = <div class="fiftycontent"><div class="csc-textpic csc-textpic-text">|</div></div>
20.prepend.25.stdWrap.typolink.parameter.field = flexform_link1
20.prepend.30 = IMAGE
20.prepend.30.file = {$tmplpath}images/button.png
20.prepend.30.stdWrap.typolink.parameter.field = flexform_link1
20.prepend.30.wrap = <div class="fiftylink">|</div>
20.prepend.wrap = <div class="fifty1">|</div>
}
wrap = <div class="largeteaser">|</div>
}
}
Basically all I wanted is for "20.prepend.25 < .default" to work, I tried "< tt_content" or
"< lib.gridelements.defaultGridSetup.columns.default" , the results are sometimes odd and duplicated many content. How do I get the same behavior as adding "< .default" ?

I got it, I'm not sure if this is the most elegant solution but I made use of prepend/append to sandwich the renderObj
columns {
20.outerWrap = <div class="fifty1">|</div>
20.prepend = COA
20.prepend {
20 = IMAGE
20.file.width = 386
20.file.height = 162
20.file.import.field = flexform_teaserimage1
20.stdWrap.typolink.parameter.field = flexform_link1
20.wrap = <div class="csc-textpic csc-textpic-intext-left-nowrap"><div class="csc-textpic-imagewrap">|</div></div>
}
20.renderObj = COA
20.renderObj {
25 =< tt_content
wrap = <div class="fiftycontent"><div class="csc-textpic csc-textpic-text">|</div></div>
25.stdWrap.typolink.parameter.field = flexform_link1
}
20.append = COA
20.append {
30 = IMAGE
30.file = {$tmplpath}images/button.png
30.stdWrap.typolink.parameter.field = flexform_link1
30.wrap = <div class="fiftylink">|</div>
}
}

Related

How to set data-attribute between image's src and alt attributes?

Order:
$img->src = 'someimage.webp';
$img->alt = null;
$img->{'data-ext'} = 'png';
$img->alt = 'somealt';
Result:
<img src="someimage.webp" alt="somealt" data-ext="png">
I'm trying to get this:
<img src="someimage.webp" data-ext="png" alt="somealt">
UPD
I found ugly solution, but this returns valid html
$img->src = 'someimage.webp" data-ext="png';
$img->alt = 'somealt';
If you want the data-attribute to be between src and alt and setting the alt to null in between, one option could be to getAllAttributes() and use krsort to sort the array keys in reverse order.
For example
$img->src = 'someimage.webp';
$img->alt = null;
$img->{'data-ext'} = 'png';
$img->alt = 'somealt';
$attrs = $img->getAllAttributes();
krsort($attrs);
$img->attr = $attrs;
echo $img->outertext();
Output
<img src="someimage.webp" data-ext="png" alt="somealt">

Typoscript: Override data with typolink

I'm trying to set the canonical url of page. If the individual field (tx_metaseo_canonicalurl) is not set then the url page should be determined by a typolink.
I tried this but it's not working:
30 = TEXT
30 {
data = FIELD:tx_metaseo_canonicalurl
override.typolink = {
parameter.data = TSFE:id
returnLast = url
forceAbsoluteUrl = 1
addQueryString = 1
addQueryString.method = GET
addQueryString.exclude = cHash,backPid
}
override.if.isFalse.field = tx_metaseo_canonicalurl
wrap = <link rel="canonical" href="|" />
required = 1
}
The last 3 lines should be inside the 30 cObj

TYPO3 show content from subpages inlcuding css classes

With the following typoscript I get all content from the subpages on one page:
lib.allPid = COA
lib.allPid {
10 = HMENU
10 {
special = directory
special.value = 2
1 = TMENU
1 {
expAll = 1
NO.doNotShowLink = 1
NO.allStdWrap.field = uid
NO.allStdWrap.wrap = |,
}
2 < .1
}
}
lib.allContent = CONTENT
lib.allContent {
table = tt_content
select {
pidInList.cObject < lib.allPid
leftjoin = pages ON (tt_content.pid = pages.uid)
where = tt_content.colPos = 0
orderBy = pages.sorting ASC
}
}
But its not copying the tt_content wrap defined by the layout selectbox in the content element:
tt_content.stdWrap.innerWrap.cObject.default.20.40 = CASE
tt_content.stdWrap.innerWrap.cObject.default.20.40 {
key.field = layout
1 = TEXT
1.value = tag-1
2 = TEXT
2.value = tag-2
3 = TEXT
3.value = tag-3
4 = TEXT
4.value = tag-4
5 = TEXT
5.value = tag-5
6 = TEXT
6.value = tag-6
7 = TEXT
7.value = tag-7
}
I tried to add the wrap to the lib.allContent element like this, but it didn't work:
lib.allContent.stdWrap.innerWrap.cObject.default.20.40 = CASE
lib.allContent.stdWrap.innerWrap.cObject.default.20.40 {
key.field = layout
1 = TEXT
1.value = tag-1
2 = TEXT
2.value = tag-2
3 = TEXT
3.value = tag-3
4 = TEXT
4.value = tag-4
5 = TEXT
5.value = tag-5
6 = TEXT
6.value = tag-6
7 = TEXT
7.value = tag-7
}
Does anybody know how to do this? Thanks in advance!
EDIT:
I found a solution (or better: workaround) without typoscript. I insert the contents from the subpages with "New content element - Special Elements - Insert Record" manually one by one. Then, everything is copied. This solutions requires a little more user input but fits perfectly to my needs.
give a try to vhs ViewHelper it'll give you exact output what you want I mean default wrap and at all.
{namespace v=FluidTYPO3\Vhs\ViewHelpers}
<v:page.menu pageUid="2" includeSpacers="0" resolveExclude="1">
<f:for each="{menu}" as="contentList" iteration="Iteration">
<div id="uid{contentList.uid}" class="inner-page-content-of-pageUid-2">
<v:content.render column="0" pageUid="{contentList.uid}" />
</div>
</f:for>
</v:page.menu>
something more about vhs ViewHelper

Checkbox is always false in IE using javascript function

I have a function in javascript which checks the state of checkboxes (used as labels) and sends a list of checked boxes to printing command in vb.net code.
I am calling this javascript function from ImageClick code.
Problem is state of the check boxes is lost in IE and is always False but in chrome it considers the right state.
<asp:ImageButton ID="PrintCustName" ImageUrl="images/print.jpg" runat="server" OnClientClick = "return myFunction();" />
function in JS and
Declaration of chkb is as follows;:
function myFunction() {
var c1 = document.getElementById('c1'),
c2 = document.getElementById('c2'), // Checkbox 2
c3 = document.getElementById('c3'), // Checkbox 3
c4 = document.getElementById('c4'), // Checkbox 4
c5 = document.getElementById('c5'), // Checkbox 5
c6 = document.getElementById('c6'), // Checkbox 6
c7 = document.getElementById('c7'), // Checkbox 7
c8 = document.getElementById('c8'), // Checkbox 8
c9 = document.getElementById('c9'), // Checkbox 9
c10 = document.getElementById('c10'), // Checkbox 10
c11 = document.getElementById('c11'), // Checkbox 11
c12 = document.getElementById('c12'), // Checkbox 12
c13 = document.getElementById('c13'), // Checkbox 13
c14 = document.getElementById('c14'), // Checkbox 14
c15 = document.getElementById('c15'), // Checkbox 15
var LblNumber = new Array();
if (c1.checked) LblNumber[0] = c1.value; else LblNumber[0] = 0;
if (c2.checked) LblNumber[1] = c2.value; else LblNumber[1] = 0;
if (c3.checked) LblNumber[2] = c3.value; else LblNumber[2] = 0;
if (c4.checked) LblNumber[3] = c4.value; else LblNumber[3] = 0;
if (c5.checked) LblNumber[4] = c5.value; else LblNumber[4] = 0;
if (c6.checked) LblNumber[5] = c6.value; else LblNumber[5] = 0;
if (c7.checked) LblNumber[6] = c7.value; else LblNumber[6] = 0;
if (c8.checked) LblNumber[7] = c8.value; else LblNumber[7] = 0;
if (c9.checked) LblNumber[8] = c9.value; else LblNumber[8] = 0;
if (c10.checked) LblNumber[9] = c10.value; else LblNumber[9] = 0;
if (c11.checked) LblNumber[10] = c11.value; else LblNumber[10] = 0;
if (c12.checked) LblNumber[11] = c12.value; else LblNumber[11] = 0;
if (c13.checked) LblNumber[12] = c13.value; else LblNumber[12] = 0;
if (c14.checked) LblNumber[13] = c14.value; else LblNumber[13] = 0;
if (c15.checked) LblNumber[14] = c15.value; else LblNumber[14] = 0;
alert("printing on label " + LblNumber);
document.getElementById("<%= HidLblNumber.ClientID%>").value = LblNumber;
<fieldset class = "group">
legend>Select Used Labels:</legend>
label >input type="checkbox" id = "c1" name= "Lbl" value = "1"/>img src="images/Action-ok-icon32.png" onclick="clickFunction(this)"/> /label>
I have tried looking different posts but nothing helped. why is IE not retaining the state of checkbox after print button is clicked is my question?
help!

ASP.NET MVC PaginatedList Pager - Put wise "..." after certain point

I have created a paginatedList and pager for that for my ASP.NET MVC project. It works great, well thing so.
One thing that I cannot figure it out is to how to put ... after certain point. For example, lets say my pager looks like as follows :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 Next >>>
What I need is some thing as follows :
1 2 3 4 5 6 7 8 9 10 ... Next >>>
the ... is for 11 here. When we go to page 11, the pager should be as follows :
... 11 12 13 14 Next >>>
This implementation is the one which I cannot figure it out how to do this.
And here is how my current pager code looks like :
<div id="pager">
#if (Model.PrimaryModel.HasPreviousPage) {
#:#Html.ActionLink(
"<<< Previous",
Model.Property["action"],
new {
controller = Model.Property["controller"],
Area = Model.Property["area"],
page = (Model.PrimaryModel.PageIndex - 1)
},
new {
data_jquery_ajax_url = Url.Action(
string.Format("pagerAjaxCall_{0}", Model.Property["action"]),
new {
controller = Model.Property["controller"],
Area = Model.Property["area"],
page = (Model.PrimaryModel.PageIndex - 1)
}
)
}
)
}
#if (Model.PrimaryModel.TotalPages >= 2) {
int totalPageNumber = 0;
for (int i = 0; i < Model.PrimaryModel.TotalPages; i++) {
int value = i + 1;
if (Model.PrimaryModel.PageIndex == i) {
#:#Html.ActionLink(value.ToString(), Model.Property["action"], new { controller = Model.Property["controller"], Area = Model.Property["area"], page = (i) }, new { #class = "active-page", data_jquery_ajax_url = Url.Action(string.Format("pagerAjaxCall_{0}", Model.Property["action"]), new { controller = Model.Property["controller"], Area = Model.Property["area"], page = (i) }) })
} else {
#:#Html.ActionLink(value.ToString(), Model.Property["action"], new { controller = Model.Property["controller"], Area = Model.Property["area"], page = (i) }, new { data_jquery_ajax_url = Url.Action(string.Format("pagerAjaxCall_{0}", Model.Property["action"]), new { controller = Model.Property["controller"], Area = Model.Property["area"], page = (i) }) })
}
totalPageNumber++;
}
#*#:current : #(Model.PrimaryModel.PageIndex+1), totalPage #totalPageNumber.ToString(), right side #((totalPageNumber - Model.PrimaryModel.PageIndex)-1), left side #(totalPageNumber - (totalPageNumber - Model.PrimaryModel.PageIndex))*#
}
#if (Model.PrimaryModel.HasNextPage) {
#:#Html.ActionLink(
"Next >>>",
Model.Property["action"],
new {
controller = Model.Property["controller"],
Area = Model.Property["area"],
page = (Model.PrimaryModel.PageIndex + 1)
},
new {
data_jquery_ajax_url = Url.Action(
string.Format("pagerAjaxCall_{0}", Model.Property["action"]),
new {
controller = Model.Property["controller"],
Area = Model.Property["area"],
page = (Model.PrimaryModel.PageIndex + 1)
}
)
}
)
}
</div>
Any thoughts?
Just should give you a general idea of how to fix it
var start = Model.PrimaryModel.PageIndex > 10 ? Model.PrimaryModel.PageIndex : 0;
if (start > 0) { //create "..." }
for (int i = start; i <= Model.PrimaryModel.TotalPages && i < start + 10; i++)
{
//generate pages
}
if (start + 10 < 0 Model.PrimaryModel.TotalPages) { //create "..." }

Resources