I couldn’t find anything in the docs about the ability to customize NewsListing output for alternating rows, special first and last cases, so I hacked things together.
To modify the 6.3.3 NewsListing, I did the following. Around line 163 look for the $tpl variable assignment, and add the following:
// alternating row hack - dd
$altRows = isset($altRows) ? $altRows : '';
// tag for alternating rows
// first row hack - dd
$firstRow = isset($firstRow) ? $firstRow : '';
// tag for first row
// last row hack - dd
$lastRow = isset($lastRow) ? $lastRow : '';
// tag for last row
// NOTE: this is the existing code, you can leave it as is:
$tpl = isset($tpl) ? $modx->getChunk($tpl):'
<div class="nl_summaryPost">
<h3><a href="[~[+id+]~]">[+title+]</a></h3>
<div>[+summary+]</div>
<p>[+link+]</p>
<div style="text-align:right;">by <strong>[+author+]</strong> on [+date+]</div>
</div>
';
Then, at around line 516 (once the above is added) look for:
// ---------------------------------------------------
// Process information for display
// ---------------------------------------------------
and add the following in the line after:
$altRowsFlag = true;
// used to alternate rows
and lastly, about line 600 (once everything above is added) , where you find this:
$placeholders['[+date+]'] = strftime($date, $resource[$x][$datetype]);
add the following in a new line after:
$altRowTag = ($altRowsFlag ? $altRows : '');
$placeholders['[+altRow+]'] = $altRowTag;
$placeholders['[+firstRow+]'] = $firstRow;
$firstRow = '';
$lastRowTag = ($x == $stop-1 ? $lastRow : '');
$placeholders['[+lastRow+]'] = $lastRowTag;
Save the NewsListing code.
I use this like this. I have a chunk called eventListingHome that I use to output Blog entries that I treat as an events listing for a music venue. The chunk looks like this:
<div class="textBlock [+altRow+] [+firstRow+] [+lastRow+]">
[+eventimage+]
<div style="width:310px; margin-left:100px;">
<p class="dateTime">[+tveventTime+]</p>
<h3>[+title+]</h3>
<p>
[+summary+]
<br />
<span class="readMore">[+link+]</span> <span class="reserve">Reserve</span>
</p>
</div>
</div>
The important part is the opening div selectors. I have a default style that gets applied to the listing divs (textBlock). But now, NewsListing will add, as needed, extra selectors to that div, depending on whether it is the first row, an alternating row, or the last row, or any combination. This allows me to do almost all the work through CSS.
To make this happen, here’s what I entered into the template, where I want NewsListing to appear:
[[NewsListing? &startID=`47` &summarize=`6` &total=`6` &tpl=`eventListingHome` &altRows=`alternate` &firstRow=`first` &lastRow=`last`]]
&tpl=`eventListingHome` : the name of the chunk that I use
&altRows=`alternate` : this provides the text that I want inserted in the alternate rows
&firstRow=`first` : this is the text that I want inserted in the first row
&lastRow=`last` : this is the text that I want inserted in the last row
In my stylesheet, I might define the selector ’textBlock’ as something like this:
.textBlock {
color:#333;
background-color:#e8ee65;
padding: 5px 0px 5px 5px;
font-size:.85em;
min-height:100px;
clear:both;
}
But I also add a selector for ’alternate’, which gets inserted in alternate rows like this:
.alternate {
background-color:#afcc3e;
}
now, every other row, with the ’alternate’ selector that comes after the main ’textBlock’ selector sets the colour of the background to a different value.
I also need to have padding on the top of the first row, so I have a selector ’first’ :
.first {
padding-top: 32px;
}
and finally, I want the last row to have a bottom border:
.last {
border-bottom: 1px solid #ccc;
}
You can take this further, by addind contextual selectors. For instance, I could add this to my stylesheet:
.alternate h3 {
background-color:white;
color: red;
}
Now, the h3’s inside of the div’s with alternate selectors get special treatment.
Hope that’s helpful to someone.
MODX Staff