Ditto display 2 latest news side by side

49 Posts

laffer Reply #1, 17 years, 4 months ago

Hello.

I would want to have the latest 2 news from a folder displayed on a page side by side inside each <div> tag.
How do I configure this?
Can anyone point me in a direction.

Here is the HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
.container {
	height: 400px;
	width: 500px;
}
.leftdiv {
	float: left;
	height: 380px;
	width: 230px;
	padding:10px;
}
.rightdiv {
	float: right;
	height: 380px;
	width: 230px;
	padding:10px;
	vertical-align:top;
	

}
-->
</style>
</head>

<body>
<div class="container">
  <div class="leftdiv">News 1</div>
  <div class="rightdiv">
    News 2
  </div>
  <div style="clear:both"></div>
</div>
</body>
</html>

49 Posts

laffer Reply #2, 17 years, 3 months ago

I know i’ve seen this in a tutorial some time ago.
Anyone could point me out.

thanks

1,390 Posts

kongondo Reply #3, 17 years, 3 months ago

Never really used ditto but just wondering whether you can use the tpl, tplFirst or tplAlt features of ditto? You would then need to include those divs within the tpl chunks.

Do they have to be in divs by the way? If you just want columns you can have a look at this tutorial:

http://ditto.modxcms.com/examples/columns.html

cheers/k

Wayfinder Lessons: The (almost) Complete Guide to Creating Menus in MODx Using Wayfinder

928 Posts

kp52 Reply #4, 17 years, 3 months ago

The &display and &start parameters are the main key to what you want - &display says how many items to show, &start says how many to skip from the start.

  <div class="leftdiv">
[[Ditto? &parents=`6` &display=`1`]]</div>
  <div class="rightdiv">
[[Ditto? &parents=`6` &start=`1` &display=`1`]]
  </div>
  <div style="clear:both"></div>

I tried this out with your HTML as a template, replacing the section above with [*content*] and placing it in a document using the template.

KP
Notes on Ditto at http://www.pogwatch.com/ditto

1,390 Posts

kongondo Reply #5, 17 years, 3 months ago

@KP Aaah, nice... I really should start using ditto wink

By the way, out of curiosity, would my proposed solution above have worked? And...is calling ditto twice for such a simple implementation an overkill?

thanks/k

Wayfinder Lessons: The (almost) Complete Guide to Creating Menus in MODx Using Wayfinder

928 Posts

kp52 Reply #6, 17 years, 3 months ago

I don’t know much about the performance aspects of the Ditto calls. If it’s a concern, adding &total=`2` to the Ditto parameters reduces the number of items retrieved and hence the processing burden.

It’s possible you could use a single Ditto call, plus the &tplFirst and &tplLast output templates to point to chunks with the left/right column HTML and placeholders. (&display is not needed using &total since it defaults to all the retrieved documents).

[[Ditto? &parents=`99` &total=`2` &tplFirst=`tplLeft` &tplLast=`tplRight`]]

tplLeft=

<div class="leftdiv">
... placeholders etc. for your chosen fields ...
</div>

tplRight=

<div class="rightdiv">
... placeholders etc. for your chosen fields ...
</div>

I don’t have time to try it out, which I prefer to do before posting. This does restrict the options to two items, though. What if you decide to make it three columns next week? laugh

KP

1,390 Posts

kongondo Reply #7, 17 years, 3 months ago

Thanks for the clarification. I really need to get into ditto...then again, with revolution out, there could be a replacement for ditto and if it is easier to use I might be headed in that direction. Hey, this shouldn’t discourage your writing of the ditto tuts! wink

This does restrict the options to two items, though. What if you decide to make it three columns next week? Cheesy KP

Good point..

Again am guilty of hijacking someone else’s thread...bad bad bad...(sorry laffer!)

cheers/k

Wayfinder Lessons: The (almost) Complete Guide to Creating Menus in MODx Using Wayfinder

☆ A M B ☆
24,524 Posts

sottwell Reply #8, 17 years, 3 months ago

When I want to do this, I pull the two or three latest news items, and just position them with CSS.

I put the Ditto call into a div container:

<div id="newsblock">
<h2>News block header</h2>
[!Ditto? &parents=`xx` &tpl=`NewsListing` &summarize=`2` &dateFormat=`%e %b %Y`!]
</div>

The NewsListing chunk:

<div class="ditto_summaryPost">
<h3 class="ditto_pageTitle">[+pagetitle+]</h3>
<p class="ditto_Content">[+introtext+] »<a href="[~[+id+]~]">Details</a> </p>
</div>

And the CSS:

#newsblock {
    margin-left: 18px;
}
#newsblock h2{
    margin-bottom: 20px;
    margin-left: 0;
}
#newsblock .ditto_summaryPost{
    float:left;
    padding:5px;
    width: 45%;
    height:100px;
    margin-right: 10px;
    border: 1px solid #000060;
    font-size: 0.9em;
}
#newsblock .ditto_pageTitle {
    text-align:left;
    border:none;
    font-size: 11px;
    margin:0 0 5px 0;
    padding:0;
    color: #000060;
}
#newsblock .ditto_Content{
    clear:both;
    margin:0;
    padding:0;
}

Studying MODX in the desert - http://sottwell.com
Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
Join the Slack Community - http://modx.org

49 Posts

laffer Reply #9, 17 years, 3 months ago

this is great.
thanks for the reply’s.

no problem for the hijack kongondo, there were no hostages