Building a Website with MODx for Newbies- Part 7: Introducing Ditto
Welcome to part 7 of our series of tutorials on building a website with MODx CMS. So far we’ve looked at:
As we work through these tutorials, we’re building a MODx resource site called Learn MODx. In the last segment we introduced template variables and started to add a new section (Library) to our resource website. We created a new template to hold information about books, and created a container to hold all the pages about books. Recall that in MODx a container is simply a page that acts as a parent to other pages (children). So far our website looks pretty much the same as it did before: (you can click on the images to see a larger view)
In today’s tutorial, we’re going to continue working on our Library section. We’re going to publish the individual pages for the different books, and then make them accessible to our website visitors by creating a page that aggregates all our book pages using the Ditto snippet, and then make that page accessible to our visitors. So let’s get started:
What is Ditto?
Ditto is a content aggregator snippet. It summarizes and lists pages to create blogs, catalogs, listings and so on. It comes with its own support page at http://ditto.modxcms.com/, which is an excellent place to learn the ins and outs of this powerful snippet.
We’re going to use Ditto to aggregate the contents of our Library in one place, easily accessible from our navigation.
At the end of the last tutorial I asked you to create some more of the book documents using the book template so that we could play with them today. I went ahead and added four more documents for different books that I like and find useful in learning web design and development and in working with MODx. This is what my document tree looks like:
As you can see, I have five child documents in the container/parent called Library. They’re all still greyed out because I haven’t published them yet.
Digression: On Page IDs
Before I go any further, I want to mention something about the page IDs, that’s the number that appears in parenthesis next to the document name. A reader commented to me that his page IDs didn’t match up with mine. For example, my Library ID is 6 and his was 3. This is fine. The ID is generated whenever you create a document and indicates the order in which you’ve created your documents. Hence, Library in my case is the 6th document I’ve created on this website. Prior to creating the Library document, I had created three other documents which I decided afterwards to delete, and so 3, 4, and 5 went the way of the trash can, and Library became 6. What’s important is that when you’re referencing your documents in a snippet or in code somewhere, you use the correct ID, even if it doesn’t match up with mine.
OK, so let’s move on. We have our five book pages ready to go. Make sure that you’ve unchecked “show in menu” for all of them, because we’re not going to want them in the menu when we publish them.
If you’ve been publishing as you go, that’s fine. I haven’t, so I’m going to go ahead and publish them now. There are several ways I can do this, I can open each document in turn, click Edit, go under Page Settings, and check the Published box and then save. OR, I can right click on each of them in the document tree and click Publish in the contextual menu that pops up, which is what I’ve opted to do.
Once this is done, I preview my website to make sure everything looks the same on the front end, which it should, nothing should be added to my navigation.
So now we want to aggregate the information from these book pages, and any other pages we may add in the future, into one page that’s easily accessible from the main navigation.
Open your Library page for editing. Remember we left this one blank? We’re going to add some stuff to it now. The first thing we want to do is make sure that it’s visible in the menu by checking the “show in menu” box, and giving it a menu title.
If you preview your website now you should see the Library menu item but the the page is blank because we haven’t added anything to it.
We’re going to place our Ditto call in the content section of our Library page. This is the very basic Ditto call (uncached):
Like all other snippets, Ditto takes arguments and parameters. First, we need to add a parameter to tell Ditto where to start when aggregating its content. In my case, my Library ID is 6, so I tell Ditto this using the &startID parameter.
[!Ditto? &startID=`6` !]
Place this code in the main body of your Library page:
Save the document, and then preview your website and click on Library. Voila! This is what your library page should look like:
What the ditto call has done is gone into each page under the Library container, picked it’s summary information that we entered into the Summary (introtext) part of the page, picked the creation date and the user account that created the page, and then aggregated all that into a single page. if you click on the title of each book it takes you to the relevant full page information for the book as we entered it.
Now this may not be exactly how we want the information to appear. For example, I don’t want the user name to show. I would also like a way to add a read more link to the end of each summary, and I would also like to limit how many entries appear on a page. We can do all this, and more, by modifying our Ditto call, and by creating a chunk that acts as a template for how we want our aggregated content to show.
We will look at this in more detail in the next tutorial.
For now, spend some time at the Ditto home page and see what other magic you can work with this snippet. We’re not done with Ditto yet, as mentioned above we’re going to pick up from here on the next tutorial and go on make some modifications to make our Library page look nicer. So stay tuned! 🙂
And do remember to grab your copy of the MODx Web Development book!
http://ditto.modxcms.com/ – The official Ditto home page
Go to Part 8: More Ditto