We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 24732 ☆ A M B ☆
    • 300 Posts
    Hello all, I’m back. Actually have been here ...just silent, lurking, busy.

    Tonight I have to build a mostly-blog. Mostly...because it doesn’t really have to be a blog, it just has to have tagging, rss, and categories and archives. And it has to be able to post pictures. And the summary field doesn’t do that without mods. hm....and I need to be able to post video too. What would be great is a "youTube" button like I added to my SMF forum fields, but I dunno if such a creature exists. I’ll look.

    so yeah, pogwatch to the rescue, but you know what? I tried using pubKit and got my head turned around backwards. It didn’t work and was painful and I uninstalled it. So I’m going at this again in order to ...ahem..... understand the concepts rather than just cutting and pasting code....and we’ll see if that works better? yeah.

    and I do that best by talking to myself, so here goes. As before if you want to chime in, you’re welcome to.

    here’s what I’m working on:

    http://www.redtoadmedia.net/tylerSITE/build2/

    and the news chunk goes on the home page.

    as usual I made myself a static/nonmodx version while designing and then added that to the template when ready and that is here, this way you can see what it is supposed to look like:

    http://redtoadmedia.net/tylerSITE/build/

    using 0.9.6.3 and before you start deluging me with head thumps and telling me to upgrade, please remember I am a Luddite and timid and struggle enough as is learning this stuff and cannot wrap my head around the black UI and changes yet. But I am trying to ...just can’t on this project. Yet. If I get this working quickly and simply then I will try to upgrade it. I actually built this site months ago and this is a redesign and so I have take it one step at a time. (But in my forays into version 1.x I can’t find QuickEdit?????? Um? and that is an issue.)

    anyhow, I have Ditto 2.1

    and as far as what I’m reading:

    http://www.pogwatch.com/pkBlog/724.html
    http://www.pogwatch.com/ditto.html
    http://ditto.modxcms.com/files/snippet-ditto-php.html

    and then Ditto for Dummies, which is attached to this post. It is actually for Ditto 2.01 I think ...but I like it.

    Here is my initial response to all of the stuff I am reading.

    My head just might explode. Really.

    so. I’m going to take this one step at a time. Elephant, meet fork.

    First step:

    Made a document called News.

    Made child documents for testing called news items one two and three.

    okay. so I have this static code/style for the news story. I will make that a chunk and then replace it with my modx codes as needed in a bit:

     <div id="newsfeed"> <span class="newsroom">FROM THE NEWSROOM</span><br />
                 <p class="author">Date 12 pt Arial</p>
                 <p class="author">Author 12 pt Arial posted by <a href="#">redtoad</a> </p>
                 <br />            
                 <span class="style2">Duis quis nisi purus. Lorem ipsum dolor sit
                 amet, consectetur adipiscing elit. Aenean ac gravida ante. In commodo
                   pharetra imperdiet. Integer quis arcu quis arcu lobortis laoreet.
                   Fusce egestas suscipit urna. Aenean sem erat, congue nec blandit
                   non, egestas at justo. Aenean adipiscing ipsum sed ante posuere
                   accumsan. Suspendisse ac dolor sit amet tellus convallis consectetur
                   eu at quam. Maecenas volutpat ante vel quam placerat eleifend.
                   Nulla turpis nulla, ultrices at bibendum vel, ullamcorper sit
                   amet purus. Mauris pretium facilisis arcu quis aliquam. Vivamus
                   porttitor ante ut turpis molestie ac porta sapien pulvinar. Phasellus
                   eu sapien nulla. Nullam dictum molestie justo, id pretium sapien
                bibendum quis. </span><a href="#" class="readmore">
                READ MORE
                </a>
               
    			
    			</div>


    I need to have a title, photo (if I use TV’s for the photo?), date, author, summary, body, a read more link and categories (tags). I have to be able to tell it that this should be published to a newsfeed on the home page as well as published to the "news" page. I need to be able to put one article in different categories (I saw a forum post on this and my eyes glazed over while reading it, mostly because I’m really tired...but hopefully I’ll get into doing and light will break). I need archives. ...so dates are important.

    we don’t want comments, so that is one simplification. I do want to add a "tweet this " and "digg" and all those other goodies to the posts. I don’t really have to have a separate login/usergroup/blog UI to make the posts with but I can if I feel froggy.

    okay, so now I’m going to decipher the Ditto Call so I under stand it and then place it in my News page and then replace my code above with the appropriate little modx tags so it can be used as a post template.

    off to try it.

    this really does help me think, to write this out like this.
      ________

      Anne
      Toad-in-Chief
      Red Toad Media - Web Design, Louisville KY
      Hear me tweet: http://www.twitter.com/redtoadmedia
      "Bring on the imperialistic condiments." - Rory Gilmore
      • 24732 ☆ A M B ☆
      • 300 Posts
      okay, so my objective is to write a functioning ditto call and make my item-level (post-level) template.

      so I read this:

      The Default Item-Level Template

      Ditto has a single template built in. It is an item-level template which by default is applied to all items in the list:

      <div class="ditto_item" id="ditto_item_[+id+]">
      <h3 class="ditto_pageTitle"><a href="[~[+id+]~]">[+pagetitle+]</a></h3>
      <div class="ditto_documentInfo">by <strong>[+author+]</strong> on [+date+]</div>
      <div class="ditto_introText">[+introtext+]</div>
      </div>


      Sources of Item-Level Templates

      There are a number of options for overriding and/or expanding upon what is provided by the default item-level template.

      Ditto’s built-in template is defined in the English language file. Each language file can have it’s own default template definition.

      When calling Ditto you can use one or more of the five parameters that let you specify specific templates to be used for displaying various items in the list.

      &tpl -- The template you specifiy with this parameter will be used by default for all items in the list. This default may be overriden for certain items using the four other template parameters.

      &tplAlt -- The template you specifiy with this parameter will be used for every-other item in the list.

      &tplFirst -- The template you specifiy with this parameter will be used for the first item in the list.

      &tplLast -- The template you specifiy with this parameter will be used for the last item in the list.

      &tplCurrentDocument -- The template you specifiy with this parameter will be used for the item (if any) that corresponds to the page that is currently being displayed. One example of how this feature can be used is when using Ditto to display a menu of pages in a sidebar. You may wish the page currently being displayed in the main part of the browser window to be highlighted in the menu.


      Where Item-Level Templates are Stored

      Ditto’s built-in template is defined in the English language file.

      Optionally, each language file can have it’s own default template definition.

      When using the Ditto parameters to specify templates, you have three options:

      If the value of the parameter begins with "@FILE:", then Ditto expects the rest of the value to be a file pathname that points to a file that includes the indicated template. [Any rules about where the pathname starts, or about the filename extension?]

      If the value of the parameter begins with "@CODE:", then Ditto expects the rest of the value to be the template itself (right there in the snippet call).

      Otherwise, the value of the parameter is assumed to be the name of a MODx chunk that contains the indicated template.


      Placeholders That May be Used in Item-Level Templates

      Ditto has built-in definitions for a number of placeholders that you may use in your templates. Extenders may also define placeholders, but this section describes only the ones built into Ditto itself.

      You may use any MODx document field as a Ditto placeholder by using a placeholder in this format:

      [+document_field_name+]

      You may use any template variable that is associated with the document template for the page within which the Ditto call is made, by using a placeholder in this format:

      [+template_variable_field_name+]

      Note that in previous versions of Ditto, you had to prepend "tv" to the name of the template variable. This is no longer required.

      Ditto defines these placeholders that can be used in all item-level templates:

      [+title+] -- Contents of one of the document’s title fields. There’s probably an order in which it tries to find a title.

      [+summary+] -- Either introtext in full if set, or the first part of content.

      [+link+] -- Creates an HTML link to the document corresponding to the item in the list. By the visible title of this link is defined within the current language file. In the English file this is the text "Read more...".

      [+author+] -- The name of the MODx user recorded in the document’s createdby field. If this cannot be found, then the name of the root administrator of this MODx installation is used instead.

      [+date+] -- The value of the document field specified by the &dateSource parameter. By default createdon is used.



      Note that if you wish to create HTML links yourself, you can get the URL to a document with

      [~[+id+]~]

      which can then be used in the construction of your link, e.g.:

      <a href="[~[+id+]~]">[+pagetitle+]</a>



      and then I look at my source code and I add a link to the top title and ignore my need for an image for the moment...and get this:

       <div id="newsfeed"> <p><a href="[~[+id+]~]" class="newsroom">[+pagetitle+]</a><br />
                   <p class="author">[+date+]</p>
                   <p class="author">posted by <a href="#">[+author+]</a> </p>
                   <br />            
                   <span class="style2">[+introtext+] </span><a href="[~[+id+]~]" class="readmore">
                  READ MORE
                  </a>
                 
      			
      			</div>
        ________

        Anne
        Toad-in-Chief
        Red Toad Media - Web Design, Louisville KY
        Hear me tweet: http://www.twitter.com/redtoadmedia
        "Bring on the imperialistic condiments." - Rory Gilmore
        • 24732 ☆ A M B ☆
        • 300 Posts
        okay, I have named that "newschunk" and made it into a chunk.

        dimly I understand that this is a template referenced in my ditto call.

        Pogwatch says that the basic ditto call is
        [Ditto? ]


        which uses ditto’s default template and that is what I just made a chunk to replace. groovy.
        [Ditto? &parents=`8` ]


        will tell it to use document (or resource) number 8 as the "directory" and only show what is within it, that number is my news document id.
        okay, easy. but the date formatting is making my head hurt. Apparently dthe simple date will only show the number of seconds passed. so I have to format it.

        I think that means I go in and make a template variable with a time widget. I’m going to try it.

        New template variable is named myDate and I put in input type "date" and in the widget I select "unixtime" then I check "news page" under template access.

        so now I have:

        [[Ditto? &parents=`8` &dateSource=`myDate` &dateFormat=`%b %d %Y %I.%M %p` ]]


        the codes on date formatting look like php bu I am entirely too tired to reference the right ones so I shamelessly swipe the example from Pogwatch. Will change later as needed.

        question:

        pogwatch references the "createdon’ field. and he doesnt call it a TV. so that must be included in the snippet, aha. going to check it. oh. createdon is part of the document variables like title? okay. it defaults to createdon.

        so I’ll change it.

        [Ditto? &parents=`8` &dateSource=`createdon` &dateFormat=`%b %d %Y %I.%M %p` ]


        but I’ll leave the myDate TV in there for now, might use it instead once I wrap my head around this. See the default sort order is : `createdon DESC`. so I can skip a field of config by using createdon.

        finally to template and I add in my newschunk:

        [Ditto? &parents=`8` &dateSource=`createdon` &dateFormat=`%b %d %Y %I.%M %p` &tpl=`newschunk`]


        I have no idea how many they will want to show on the home page. I’m making this ditto call for the home page and another one for the news page. I’m going to assume that there will be one.

        so now I have:

        [Ditto? &parents=`8` &dateSource=`createdon` &dateFormat=`%b %d %Y %I.%M %p` &tpl=`newschunk` &total=`1` &display=`all`]


        I want to use total in case the database gets huge so it will not be slow. And then display all shows all in my total.

        what is phx? I keep seeing it. getting ahead of myself. skipping the intense filtering info....ah. phx is an extender (it makes ditto do more stuff) that basically makes if-else statements to compare strings? looks like. and the strings are the placeholders. So essentially if a field is empty then I can make a default content for it. or I can assign tags using it. I understand the basic concept, but it seems intimidating. will look for a tool to help me with the tagging (pubKit once I’ve worked through all of this probably)

        aha, there is a tagging extender. whee.

        okay, I have my basic ditto call with no tags or images or video or ...well. I have taken my first bite of the elephant.

        I’m going to put it in my news page and then I guess my next step is to work on the tags. figure out how that extender works.
        question, can I add a template variable to the ditto call &total? so they can define how many stories they want on the page?

        will try it, can’t hurt.
          ________

          Anne
          Toad-in-Chief
          Red Toad Media - Web Design, Louisville KY
          Hear me tweet: http://www.twitter.com/redtoadmedia
          "Bring on the imperialistic condiments." - Rory Gilmore
          • 24732 ☆ A M B ☆
          • 300 Posts
          have done all this and still have code from pubkit in there and have to take it out/fix templates to see output, will continue tomorrow.
            ________

            Anne
            Toad-in-Chief
            Red Toad Media - Web Design, Louisville KY
            Hear me tweet: http://www.twitter.com/redtoadmedia
            "Bring on the imperialistic condiments." - Rory Gilmore
            • 24732 ☆ A M B ☆
            • 300 Posts
            okay, things I had to edit:

            if I used
            [[Ditto? ]]
            with double brackets like pogwatch has on his site it did not work? so I changed to single brackets and it is fine.

            [+summary+] is an extender and has to have extra configuration in the call to work, so using [+introtext+] is easier. but I have to include a photo still, might not be easy.

            next steps: add tags, archives, photo to intro.. and video. format date better.
              ________

              Anne
              Toad-in-Chief
              Red Toad Media - Web Design, Louisville KY
              Hear me tweet: http://www.twitter.com/redtoadmedia
              "Bring on the imperialistic condiments." - Rory Gilmore
              • 24732 ☆ A M B ☆
              • 300 Posts
              reference on how to make archives like wordpress with Reflect:

              http://modxcms.com/forums/index.php/topic,31859.0.html

              and

              http://ditto.modxcms.com/files/assets/snippets/reflect/configs/wordpress-config-php.html

              ...yeah, that wiki entry is really cryptic. I’ve looked at the file structure, maybe i can read the reflect snippet and figure it out.

              reference on how to put photos into the intro:
              http://modxcms.com/forums/index.php/topic,31995.0.html
              http://modxcms.com/forums/index.php/topic,36091.0.html (user photos)

              tagging:

              http://www.pogwatch.com/ditto/ditto-extenders/ditto-tagging.html
              http://modxcms.com/forums/index.php/topic,37081.0.html

              tagging in Ditto 1.0 (but talks about categories)
              http://modxcms.com/forums/index.php/topic,7511.0.html
              http://modxcms.com/forums/index.php/topic,4951.msg40296.html#msg40296


                ________

                Anne
                Toad-in-Chief
                Red Toad Media - Web Design, Louisville KY
                Hear me tweet: http://www.twitter.com/redtoadmedia
                "Bring on the imperialistic condiments." - Rory Gilmore
                • 24732 ☆ A M B ☆
                • 300 Posts
                I totally guessed on how to do the Reflect thing. From the reference post I found in the forum, plus the wiki parameters explanation I modified the call to this:

                [!Reflect? &config=`wordpress`  &id=`1` &targetID=`33` &getDocuments=`1` &dittoSnippetParameters=`parents:8` phx=`0`!]


                where id is just a number I made up and also added to the dittto call on the landing page. I chose one. it doesnt matter what it is as long as they match. target id is the id of the landing (Archive page that you create), parents in the ditto snippet are 8, I forced a get docs, though I guess I don’t need to, the other guy did so I did. And I turned phx off because he did that too and I don’t know how to use it really yet.

                I stuck this in my sidebar.

                I made an archives page in the same container as my news but I did not show in menu so I had to add
                &showInMenuOnly=`1`


                to my ditto calls.

                then on the archive page I had this ditto call:
                [!Ditto?&id=`1` &tpl=`newschunk` &extenders=`dateFilter` &parents=`8` &paginateAlwaysShowLinks=`1` &summarize=`50` &paginate=`1` &showInMenuOnly=`1`!]


                the most important thing being the id that has to match what is in the reflect calll. And the dateFilters extender which I totally swiped from the other guy’s post but pogwatch explains it if you really want to understand it. It has to be there to list the dates right.

                groovy. archives...done.



                  ________

                  Anne
                  Toad-in-Chief
                  Red Toad Media - Web Design, Louisville KY
                  Hear me tweet: http://www.twitter.com/redtoadmedia
                  "Bring on the imperialistic condiments." - Rory Gilmore
                  • 24732 ☆ A M B ☆
                  • 300 Posts
                  anyone who wishes to comment/reply/interrupt the stream of consciousness is totally welcome to do so and yes, if I have a specific question on one of these that I can’t figure out I will go post and ask the question in the relevant development thread. Promise.
                    ________

                    Anne
                    Toad-in-Chief
                    Red Toad Media - Web Design, Louisville KY
                    Hear me tweet: http://www.twitter.com/redtoadmedia
                    "Bring on the imperialistic condiments." - Rory Gilmore
                    • 26931
                    • 2,314 Posts
                    anyone who wishes to comment/reply/interrupt the stream of consciousness
                    ...that’s great, keep it coming smiley
                      • 27708 MODX Staff
                      • 2,502 Posts
                      Interesting look into your learning experience with Ditto. Not the simplest of snippets but certainly not the most difficult:

                      I would like to note that createdon, pub_date and published all use the unixtime format in a string as would a TV using the unixtime widget. It is commonplace for people to use published as the date source.

                      Another item of note is that in Evolution 1.0.2 there is QuickManager + which replaces in many ways QuickEdit. Honestly, I am not a fan of either since I’d rather people get into the back end to manager their sites but sometimes it is nice to work quickly from the front end.

                      Keep posting your experiences though.
                        Author of zero books. Formerly of many strange things. Pairs well with meats. Conversations are magical experiences. He's dangerous around code but a markup magician. Blog ✦ Twitter ✦ LinkedIn ✦ GitHub