We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 33595
    • 7 Posts
    Hello there,

    I’m a new Modx user. Just began porting a static site to the system. I’m using Evo 1.0.4.

    I love Modx, it was just what I was looking for! I’m still getting used to it, and I’m having trouble trying to figure some (a lot, hehe) things out. I do understand the basics, but while porting the site I’m hitting some dead ends. I don’t know how to approach some of the obstacles I’m facing, how to properly use the tools Modx offers me. Could someone lend a hand?

    Here’s my first obstacle...

    Consider this code:

    (...)
    	<div class="grid_15 prefix_1 suffix_1 alpha omega pushdown30">            
                    <h3>Some header</h3>
                    <p>This is some text with some links in between</p>
                    <p>Blah blah blah</p>
        
            </div>
    
    	<div class="grid_15 prefix_1 suffix_1 alpha omega pushdown30">            
                    <h3>Another header</h3>
    
                        <div class="news">
                        <h6>August 21st 2010</h6>
                        <a href="somelink"><img src="somefloatedimage" width="150" height="41"></a>
                        <p>Some text, blahblah</p>
                        </div>
    
                        <div class="news">
                        <h6>May 2nd 2010</h6>
                        <a href="somelink"><img src="somefloatedimage" /></a>
                        <p>Some text, blahblah</p>
                        </div>
                
            </div>
    
    	<div class="grid_16 prefix_1 alpha omega gallery pushdown30">
                    <h4 class="pushdown15">Some header with a special class</h4>
                    <img src="somefloatedimage" /><img src="somefloatedimage" /><img src="somefloatedimage" /><img src="somefloatedimage" /><img src="somefloatedimage" />
                  </div>
    
    (...)
    


    That’s some code that is part of a document right now. It’s for a very simple site with just 9 sections. Every section is basically the same, so I only have one template defined. Only one person is going to edit the content and upload images etc.

    Ok, so I’m now in the process of making this dynamic so that person can easily edit the website. As you can see, the content mainly consists of headers, paragraphs, and occasionally a little gallery (not a fancy one at the moment, just some images floated sitting next to each other). Depending on the content, it’ll be enclosed in a div tag, with different classes. For example, that second "chunk" that features somewhat of a very reduced blog (Just a date, a header, an image and a paragraph) has every news item enclosed in a nested div. What I’m trying to say is, even if it’s a simple site, there are different kinds of content, with different needs for its formatting, always involving divs and special classes.

    The problem I’m having is, I don’t know how to approach this in order to "Modxify" it.

    I want that person to have it as easy as possible without breaking the site. That is, just login, edit any document and be able to either create a new simple paragraph, or a news update, or a simple little gallery. Or 5 of each. Or just 1 of them.

    Since TinyMCE and CKeditor only manage text and not divs, it’s not what I’m looking for. They also add a lot of unwanted code. Creating a TV for each case (one TV for a general paragraph’s header, then another for the paragraph itself, then another for the news updates header, then another for subheader, then another... etc etc) isn’t flexible at all (what if the person needs 2 more resources than anticipated?) and would be useless in certain occasions (there are sections that won’t have a particular kind of resource, say the mini gallery).

    For the news updates I’m not considering Ditto either since there will only be about 5 news items all the time, the updates will be very few and far in between, and the editor has no problem in deleting the oldest one and updating with the newer.

    So uh... how would you approach this? I don’t know if I expressed myself clear, if I haven’t please say so should you need more info.

    Many thanks in advance!
      • 18389
      • 169 Posts
      I would use ditto.

      make 5 resources, one for each article.

      as those 5 change, you can use tv’s for the date and title instead of having ditto call them.

      or

      you can change the "created on" or "published on" fields for each document when you update, and have ditto call them.

        www.markojokic.com
        • 18389
        • 169 Posts
        also, you can put the text in tinymce in html mode so it doesn’t add it’s own "junk" to the code.

        as for images and galleries, there are a lot of ways to do that. I did it on my site using ditto and maxigallery.

        http://www.markojokic.com/index.php?id=47

        I don’t know how it would look if I had no images in a post, but that’s something you would work out with css on your site.
          www.markojokic.com
          • 28042 ☆ A M B ☆
          • 24,524 Posts
          Another option to have simple lists of items that you won’t want links to (as in a blog listing with links to the full blog page) is to use Jot (or my Notes extension). There is another extension to Jot around somewhere as well.

          http://modxcms.com/forums/index.php?topic=52324.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
            • 33595
            • 7 Posts
            Many thanks Markoj and Susan for your ideas!

            I haven’t really dived deep enough in Ditto nor Jot/Notes yet so I don’t know if it’s what I’m looking for. I can see it used for the news updates excerpt but I don’t know how it’ll perform in the other areas, also regarding the later editing. My main concerns are flexibility and ease of use for the editor. Anyway I’m a total newbie, so I’ll definitely give it a try as you suggest. I have read many times that ditto is extremely flexible.

            About that minigallery, yes, I definitely plan to learn how to use Maxigallery. Still for this particular use they’re just a bunch of images (6 most of the time) just floating next to each other, they’re not even clickable, so I don’t know if building it with Maxigallery would be a bit too much. But I’ll try it as well. Ah, I just need some free time to go through so many documentation! smiley

            I’ll let you know how it worked out, thanks again!
              • 18389
              • 169 Posts
              I suggest maxigallery, ditto and QM for the ease of a user. All of their work can be done from the front end... they don’t have to log into the manager at all.
              Maxigallery may seem a bit complex at first, but it’s not that bad. You can make it very simple for your editors once you get it running right.

              I am no programmer/coder.

              I started using modx only knowing html and css basically. It took a while to get past the first hump of understanding snippets and how everything interacts, but once you get it, your world opens up!
                www.markojokic.com
                • 33595
                • 7 Posts
                Thanks for the follow-up Markoj, I’ll try that combination. I hope to have some free time next week to do it, I’m really looking forward to see this test site coming together.

                And hey, good to know you’re no coder either, gives me hope to keep on working my Modx understanding. Right now I’m quite overwhelmed because of all the info I read and the obstacles I’m facing, trying to tie everything together. It’s not being an easy ride, but everytime I learn something new it feels great, so much freedom!
                  • 33595
                  • 7 Posts
                  Hello again!

                  Ok, so I got to work with this... and I’m having a hard time figuring everything out. Good thing I still didn’t get to the image galleries, hehe.

                  So, this is how I approached my problem:

                  - Created a couple child documents inside the index page. Not published (I don’t want them to be since I’m not linking to them, just showing them in full), not visible in menu. Set a page title and a couple paragraphs on each of them.
                  - Created a chunk called "ditto_basicparagraph" with the following code:

                  <div class="grid_15 prefix_1 suffix_1 alpha omega pushdown30">
                  
                     <h3>[+pagetitle+]</h3>
                     [+content+]
                  
                  </div> 


                  - Then, in my index page (the parent for the content), I put the ditto call:

                  [[Ditto? &tpl=`ditto_basicparagraph` &showPublishedOnly=`0` &total=`2`]]



                  Ok, that renders as expected. But problems arise, again related to making the content fully dinamic and easily updated.

                  What if the editor wants to add a different kind of item after those 2? For example a div with some different classes than the above one plus some other content structure. I should make another tpl with that different structure and then make a new Ditto call with that custom tpl? That would force me to revise and tweak the code every time the editor adds some modified (even if slightly) content. Also, as stated in a previous post I want the editor to not mess around with the code at all and have it super simple, that is, just somehow select the kind of content he wants to add and then write a heading and some paragraphs, hit save, done.

                  Or... what if the editor wants to first put a paragraph there, then a gallery, then another paragraph? That’d be 3 ditto calls, each targeting the proper document with its custom tpl. What if there were 10 items, how to filter those?

                  Apart from that, I tried Quick Manager as well as managermanager, and don’t really understand how to set them up. The way I see it, Quick manager lets you edit the document in the preview, not the manager. The whole document that is, not a certain paragraph or header, that is what I need. Again, the html code should be invisible to the editor, and a rich text editor is not an option since the editor could accidentally break the layout. Regarding managermanager, I just don’t know how to use it, gotta look around again for some info on it which I haven’t been able to find yet.

                  I’m completely lost and getting quite a bit frustrated... I just can’t see the big picture so to speak, or like you said Markoj, how everything interacts...

                  Oh I also tried Jot as Susan suggested, but again I don’t know how to use it, all I got out of it was a form to submit a comment. Is there an undocumented way to use it for this task? I read quite a lot about all this, ditto, jot from different resources but can’t get my head around it. I’d totally know how to use them in a normal scenario (making a blog, paginating the results, etc) but I can’t see how to adapt it to what I need.

                  So uh... heeeeeeeelp! embarrassed

                  EDIT: This is the site in its static form (I’m developing the MODx version with Xampp first) so you can see how the whole structure looks -> http://bit.ly/aiTctL
                    • 19534
                    • 183 Posts
                    Hey Zombo!

                    I was looking for something like Typo3’s content elements in ModX (http://typo3.org/documentation/document-library/tutorials/doc_tut_templselect/0.1.0/view/1/3/#id3973458).

                    In Typo an editor is able to add several elements to the content in terms of predefined blocks like a simple text, a text with image, a paragraph with headline,...
                    The editor only has to provide the data for such an element (the text, the image, the headline,... but no css-classes, divs etc.). Rendering these elements in the frontend is done by predefined templates (in ModX these would be chunks).

                    I’ve searched a lot for getting a solution but didn’t find something which might be usable out of the box right now.

                    I found something very promising(!!!), but it is still in development: xEdit http://www.siebennull.com/xedit/demo.html xEdit is exactly what I was looking for and I think it is what you’re looking for, too.

                    Here is the thread about xEdit: http://modxcms.com/forums/index.php/topic,33985.0.html. As I mentioned xEdit is still in the process of development. And it seems that the developer hasn’t much time right now for this project. I’m really looking forward to it!

                    Here is my Post about this problem: http://modxcms.com/forums/index.php/topic,54169.msg312916.html

                    Cheers!
                      Add-On to easily manage your multilingual sites: Babel
                      • 33595
                      • 7 Posts
                      Hey Mikrobi!

                      Thanks a lot for the info! Yeah, I was looking for something along those lines. It’s a pity xEdit is not being actively developed, it looks very interesting!

                      Anyway, your "Best practice for complex content blocks" post gave me some ideas regarding TVs mixed with templates and Ditto... also this could be helpful: http://www.mapledesign.co.uk/projects/modx-tvs/

                      All in all, I hoped I could do this in a more or less simple way with out of the box capabilities, since it really is a simple thing...

                      I’ll give some of these ideas and resources a shot and see if I’m able to squeeze something usable out of them. I’ll keep you posted mikrobi, maybe we come up with something smiley

                      If anybody else has a different approach please don’t hesitate to share!