NewsListing Hack for First, Alternating and Last Rows

[Guest]

Welcome, Guest. Please login or register.
Did you miss your activation email?

1 Hour 1 Day 1 Week 1 Month Forever
Login with username, password and session length

[omnivore]

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:

Code:

// 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:

Code:

  // ---------------------------------------------------
  // Process information for display
  // ---------------------------------------------------

and add the following in the line after:

Code:

$altRowsFlag = true;
// used to alternate rows

and lastly, about line 600  (once everything above is added) , where you find this:

Code:

$placeholders['[+date+]'] =  strftime($date, $resource[$x][$datetype]);

add the following in a new line after:

Code:

$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:

Code:

<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:

Code:

[[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:

Code:

.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:

Code:

.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' :

Code:

.first {
padding-top: 32px;
}

and finally, I want the last row to have a bottom border:

Code:

.last {
border-bottom: 1px solid #ccc;
}

You can take this further, by addind contextual selectors. For instance, I could add this to my stylesheet:

Code:

.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.

[Djamoer]

I think by having different template chunks for header, footer, separator, item1, item2, item3 and so on, we can have a really flexible newslisting. I'm still not sure whether having the ability to determine the first and last row will be useful. Can you help me justify the use case for having this indicator of first and last row?

Thanks

[omnivore]

I'm still not sure whether having the ability to determine the first and last row will be useful. Can you help me justify the use case for having this indicator of first and last row?

The example that I gave in my sample is one I'm using. I have a non-repeating background image in the container div that all of my listings go in. I need to treat the first div of listings differently from all others, by padding the top. This forces the div down, and allows the bgnd image to be seen, with the background  (which is text saying 'upcoming') partly behind the top div, indicating what the area is. I can't think of another, better way to do this than via multiple selectors in CSS. So the ability to indicate first and last is useful there.

In programming and in design,  a constant is the need to treat first and last cases differently. The `last` case I gave of a bottom border is another common design requirement.

The site I'm working on is one where it's easy to see this. I can't make the url public, but I can send it to you via email if you want.

[Mark]

Very cool idea!

I think by having different template chunks for header, footer, separator, item1, item2, item3 and so on, we can have a really flexible newslisting.

Agreed! Could you please add this to the NL Bug/Feature tracker? Make sure to include a link to this thread!

Omnivore, could you have contained the entire NL in a div and gave that div padding top and bottom?

[Djamoer]

Right here
http://modxcms.com/bugs/task/331

Btw, you can do it like what Mark told you to do. Or you can use anoether div to bumped down the or bumped up the other div.
Whicever it is, but I think you don't need last and begin class. It's just my two cents. Believe me, there are so many ways to rome.

[omnivore]

Btw, you can do it like what Mark told you to do. Or you can use anoether div to bumped down the or bumped up the other div.

You could. You couldn't, however use that technique to (as I am doing) also highlight the first item in a different way. That's necessary for several parts of my project, and I'll be using the mechanism I added to do it. It also means that I can retrieve both the coming events, and  the current event in one call to NewsListing, instead of two.

From my point of view, having the flexibility of a first and last selector makes the output page more like what I would produce if I were hand-coding the page. That's a virtue in itself.

If the system lacks the ability to notice and act on a condition like first case or last case, then if a decision is needed, it just moves elsewhere. If I used Mark's suggestion, then my template always has padding at  the top. Maybe I use it elsewhere in a way that padding is not wanted. Now what? I have to have two templates. But where is the decision made? Not in the CMS - the content person now makes it, I suppose.

Is this a desireable thing? In my opinion, no. In fact, it's the exact reason that I want a CMS in the first place: my content people don't have the skills or training to make those decisions, and I hire a designer to determine what template is used in what context. He in turn can in most cases set the CMS up to make the decisions transparently.

So what do I get, if the three lines of code we're talking about are eliminated? Well, I get proliferating templates. My updates to the site design are a little more complex. My CSS is now a bit more complex, since besides my near-duplicate templates, I now have a new selector for the padded one. My content-creation process is more complex: my content creators previously didn't have to worry about a choice of templates, now they do. And, because I can treat the first-case differently in CSS, and not treat it as a separate call to NewsListing, I have doubled my database overhead for retrieving the NewsListings. Plus, my pages now use CSS that reflects what MODx likes, not my markup style.

[rthrash]

Nicely put omnivore. Could you add a reference to this thread in the bug and feature tracker so it doesn't slip through the cracks. Makes sense as a logical upgrade indeed.

[omnivore]

Added link to this thread to the bugtracker item cited in one of the early thread postings.

[Mark]

Added in NewsListing 6.4