Creating a listing page
Permalink
Hi I'm new here. I'd like to create a listing page. Each items on the listing page will have a title, image and content and when clicking on the title it will link through to the content of the detail page. This would seem to me to be a common requirement. Is there a how-to on this?
You can just add some page attributes to do it, check herewww.www.weblicating.com/c5/page-list-styling/...
Just to clarify, my solution and pvernaglia's will both work, but will function a bit differently -- if you want the listing page to show some of the same content that is on the page itself, use my solution. If, on the other hand, you want to have different info on the listing page (for example, the image you want to show in the listing page is NOT actually in the full page itself), then you should use pvernaglia's solution.
Excellent! Thanks both of you. I've looked into both and it seems pvernaglia's solution would fit me best here. I've read through the page that you've referenced pvernalia but one thing I'm still not sure on is where to put the CSS. Sorry if that's a silly question. I'm just starting out.
Actually, upon having thought about this some more I've come to the conclusion that the page list teaser could be the better way to go in terms of keeping things consistent for the way I need to instruct client on how to edit pages etc. One thing I don't understand with the page list teaser though is whether I need to add images as a seperate block in order for them to appear or can I add via the rich text editor and they will still appear?
As a side note can someone please let me know if I'm correct in assuming that via the rich text editor it's not possible to add an image from the image library? It seems not, it seems to ask for a URL but doesn't seem to allow selection from the media library.
So if I've got this correct then, if I want to have a nicely formatted page in the full page then I should create a specific page type for it that allows for where a block can go for the image and a block for the main text?
Thanks in Advance
As a side note can someone please let me know if I'm correct in assuming that via the rich text editor it's not possible to add an image from the image library? It seems not, it seems to ask for a URL but doesn't seem to allow selection from the media library.
So if I've got this correct then, if I want to have a nicely formatted page in the full page then I should create a specific page type for it that allows for where a block can go for the image and a block for the main text?
Thanks in Advance
You can add either an image block or an image inside the "Content" block and they should both show up in the Teaser.
And you *can* add an image from the file manager via the Content block -- click the "Add Image" link at the very top of the editing window, NOT the little image icon that's in the toolbar. See attached screenshot.
And you *can* add an image from the file manager via the Content block -- click the "Add Image" link at the very top of the editing window, NOT the little image icon that's in the toolbar. See attached screenshot.
Cool, I get it. Thanks Jordan.
So I think though that for making it easy for the client to edit the page I might have to create a new page type with a special 'region' for where the image will need to go and so that it always stays in a fixed location (you know clients, if you give them too much freedom they'd be bound to screw it up). Unless there is another way to solve that problem I'd be glad to hear about it.
Cheers.
So I think though that for making it easy for the client to edit the page I might have to create a new page type with a special 'region' for where the image will need to go and so that it always stays in a fixed location (you know clients, if you give them too much freedom they'd be bound to screw it up). Unless there is another way to solve that problem I'd be glad to hear about it.
Cheers.
That is indeed a problem I run into a lot. However, if you create a different area, it won't work correctly with the Page List Teaser (it only pulls in content from a single area, which doesn't have to be "Main" [see marketplace description for how to change the name of the area it pulls from], but it does have to be one and only one area on the page).
What I've done in these cases is solve it using CSS classes. Kind of tricky with images, but perhaps you can create a class in your "typography.css" file (which the TinyMCE editor pulls in) that applies to images, which will float it to the left or whatever. Then you have to instruct the client to select that class for that image. OR if you know there is only going to be 1 image in that top area, you can just put a class in your main css file which floats it or whatever (e.g. #top-area img { float: left; }).
Not ideal, but the easiest solution I have found thus far. A more difficult solution for you as the developer would be to create a custom block that has a rich text area and an image separately, and styles them appropriately automatically, but creating a block can be a pain if you haven't done it before. You might also have luck with the "Content Around Image" block on the marketplace, which allows you to select an image separately from the content and float it left or right.
-Jordan
What I've done in these cases is solve it using CSS classes. Kind of tricky with images, but perhaps you can create a class in your "typography.css" file (which the TinyMCE editor pulls in) that applies to images, which will float it to the left or whatever. Then you have to instruct the client to select that class for that image. OR if you know there is only going to be 1 image in that top area, you can just put a class in your main css file which floats it or whatever (e.g. #top-area img { float: left; }).
Not ideal, but the easiest solution I have found thus far. A more difficult solution for you as the developer would be to create a custom block that has a rich text area and an image separately, and styles them appropriately automatically, but creating a block can be a pain if you haven't done it before. You might also have luck with the "Content Around Image" block on the marketplace, which allows you to select an image separately from the content and float it left or right.
-Jordan
Thank you Jordan, appreciate your advice. That helps me alot! I'll go with the CSS method, I'm sure I can make that work fine. Thanks again.
You just add the css to main.css
http://www.concrete5.org/marketplace/addons/page-list-teasers...