I’ll try a step-by-step guide, even if this is an old post. (Sorry, I was away when the question was posted.) Let me know if this helps you in any way. I might have missed something out as I’m a newbie with modx, and I’ve only done this once.
Create an image TV for the photo you’re going to use
- Go to Manage Resources -> Template Variables -> New Template Variable
- I’m going to call this TV newsPhoto. Give it that title, select Input type: Image and Widget: Image. Make sure you assign it to whichever template you are using to build the page, so that template can access the TV. Fill in whatever else you want there and save it.
Create the chunk to display each news headline
- Go to Manage Resources -> Chunks - > New Chunk
- Call this chunk newsTpl (or whatever else you want). Enter the following code:
<h2>[+pagetitle+]</h2>
<p>[+newsPhoto+] [+introtext+] <a href="[~[+id+]~]" title="[+pagetitle+]">Full Article</a>.</p>
<p>[+date+] | [+author+]</p>
What are you getting here? It’s a news item that consists of a header that is the title of the news item. The body of the item then includes the photo you’re using for the news item, the introtext you entered as a summary for the news item (you can leave that out, if you like), and a link to the full article. You could use the link code to make the image or the title or both into links, if you prefer. This also displays the date the item was posted and the author of the item. You don’t have to have these if you don’t want.
I haven’t applied any styling to this right now. I’m assuming you know enough CSS to manage this yourself.
Create the news page
You are now going to use a ditto call to create your list of news items.
- Create a new document container, called News (or whatever). Make sure you are not using a rich text editor for this page (untick Rich Text under ’Page Settings’).
- Paste the following code into the document content:
[!Ditto? &parents=`15` &display=`3` &tpl=`newsTpl` &dateFormat=`%d %B %Y`!]
My news container had the id `15`. Yours is probably a different number, so enter whatever document id number your news container has instead. I’ve chosen to display three items. You can display as many as you want. You can also change the format of your date.
Add a news item
- Create a new document within the news container. Give it whatever title you want for the news item, add the introductory text (if any) that you want to display into the Summary (introtext) field, the rest of the news item in the Document content, and then use the Template variable that should appear below that to insert an image.
- Save it, and you’re done. (You’ll need to publish it before it shows up, of course.)
If you look at the news page, your news item should now show up.
