We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 16350
    • 9 Posts
    Hi all,
    I just installed ModX today after some year hacking away at wordpress a tiny bit of custom php stuff and I’m happy to say it’s working out fine... I’m mainly design guy, but given enough time even I can work out most of the technical details of ModX...
    However I’m a it confused by some of the terminology and lack of examples of actual use of stuff like ditto and reflect. I’ve tried I might be a bit slow on the uptake but I thought I might as you what we would the route toward making more of a catalogue type site: A fair number of posts (800+) each with 10+ fields of individual data including a .jpg or a .flv for each file, sorted and filtered according to the fields. I’m not looking for a full blown explanation of the inner secret of Mod just a nudge in the right direction: Is it Ditto + reflect, should I hack the existing light box thingy or go with my own php thingy and use View Port? Any help would be greatly appreciated...
    All the best,
    Kris
      • 33982 ☆ A M B ☆
      • 476 Posts
      Greetings Kris,

      After reading your posting, I’m assuming that you’re attempting to produce a website that will enable your client to be able to upload product content? You mention 10+ fields, .jpg, or .flv for the individual document. While MODx took me a little bit of time to understand (it was the first CMS I attempted to use), once I got the basics down it goes fast.

      As I’m assuming you’ve already learned, you set up your templates and on the document itself, assign the template to that document. As far as assigning fields to that particular template, this is where you’ll need to understand Template Variables, or T.V.’s. T.V.’s essentially are, as the name implies, variables for that Template. So in this case, you want the client to be able to put their information in the corresponding fields. Look over the T.V. section in the Wiki and the MODx site itself and you give you plenty of insight/documentation. Then as you mentioned, you’ll use Ditto to list out the products. Ditto is a very powerful tool. As you study the docs, you’ll see that you have to set up a tpl for Ditto...this will instruct Ditto essentially how to handle the T.V.’s you set up for that document and what to do with the values in those fields (i.e. output an image, or text and where to put that information).

      As far as light box and your own "php thingy", I’m assuming you’re wanting to control the output of the image itself? I gave an answer to a similar question on another posting:

      http://modxcms.com/forums/index.php/topic,19160.msg119421.html#msg119421

      I used LightBox for the image enlargement.

      As far as sorting the different documents on the site itself, I usually set up the documents to sort by the date they were published or by sorting them according to a T.V. If you want to sort them in a different manner, I really haven’t messed with it much, but I’m sure it can be done.

      Here’s an example on a site I designed recently. If you look here on the homepage (http://rent2ownhomesonline.com/), you’ll notice "Featured Properties" at the bottom right. If you were to look in the Template for that document, you would see this Ditto call:
      [[Ditto? &startID=`32` &tpl=`featuredTPL` &summarize=`3` &sortDir=`DESC` &depth=`1` &sortBy=`pub_date`]]
      

      This tells Ditto to go to Document "32" which is the parent document and gather all the children document’s (the ones which will contain the documents with the T.V.’s) information. Here’s the value of &tpl=`featuredTPL` :

          	<div id="featuredbox">
          <a href="[~[+id+]~]"><img id="featuredboximg" src="assets/snippets/phpthumb/phpThumb.php?src=http://www.rent2ownhomesonline.com/[+propertyimg1+]&w=60&h=60&zc=1" title="[+longtitle+]" /></a>     
              <div id="featuredboxinfo">
              <h1>[+city+]</h1>
              <h2>$[+rent+]/month</h2>
              [+propertyimg1:is=`0`:then=`{{featuredTPLcomingsoon}}`:else=`{{featuredTPLclick}}`+]
              </div><!--Featured Box Info-->
              </div><!--Featured Box-->
      


      You’ll notice the placeholder [+propertyimg1+]...this is a T.V. that is assigned to the document that the user uploaded a photo into and it outputs there. The PHP thumb (which I discuss in the other posting) then handles manipulating the image itself.

      Anywho, hopefully that’s a enough information to give a basic nudge in the right direction.

        Precision Web Development ... SmashStack.com
        • 16350
        • 9 Posts
        Thanx a lot.... That was exactly the nudge I was looking for! I’ve yet to try it out, but it looks like it’s a perfect nudge ;-)
        Kris
          • 33982 ☆ A M B ☆
          • 476 Posts
          Hey Kris,

          Glad I could help. If you have questions, just reply on this post and I’ll get back.

          Like I said, once you see get the basic concepts of MODx, you’ll absolutely love the system...it’s freaking awesome and powerful.
            Precision Web Development ... SmashStack.com
            • 16350
            • 9 Posts
            Hi again flinx...
            Really liking ModX so far. Got the ditto thing running, no worries... But is there any chance of getting a bit of a pointer towards images uploading and getting the file name into the database? Is there a way to do it front end (perhaps using FDM)?
            Thanx again,
            Kris

              • 33982 ☆ A M B ☆
              • 476 Posts

              Really liking ModX so far. Got the ditto thing running, no worries... But is there any chance of getting a bit of a pointer towards images uploading and getting the file name into the database? Is there a way to do it front end (perhaps using FDM)?
              The first step is setting up a T.V. with an input type of "Image".

              Once you’ve set up that up, when the client logs into the manager area and wants to insert an image for that template that has the T.V. you just set up, they’ll go through the following steps (this are steps I just e-mailed a client to be able to do the same thing):

              1. Open Fire Fox as your browser (MODx doesn’t work so well with Internet Explorer b/c Internet Explorer sucks)
              2. Login into your manager area
              3. Right click your parent document for the children ditto call and choose "Create Document Here" from the pop up box
              4. A new document will be presented.
              5. Fill in the "Title", "Longtitle" and Content area.
              6. Now scroll down to the Template Variable area and you should see the T.V. you created with an insert button to the right.
              7. Click the Insert Button
              8. From the pop up box, FCK Editor in this case, you will insert your image.
              9. Now you are in the Image folder, click the "Browse" button at the bottom, navigate to where the file is on your computer, click it and then click the "Upload" button that is to the right of the "Browse" button you clicked earlier.
              10. Allow the file to upload
              11. Once it has uploaded, you should see the image in the folder.
              12. Click on the image and the pop up box will disappear
              13. The image has now been added
              14. Scroll back to the top of the document, click on the "Page Settings" tab and click "Published"
              15. Now save your document and the photo along with the content for the photo will be on the website.

              As far as uploading the image from the front end, there may be a way to do so, but I’ve never done it. I just set up the manager area for my clients and restrict what they can do once they’re in the manager area.

              Hope that helps.
                Precision Web Development ... SmashStack.com
                • 20991
                • 99 Posts
                Wow, this helps me a lot, too! thanks so much for those tips which would have taken me forever to figure out on my own!
                  NOTE TO SELF: http://www.muddydogpaws.com/development/wayfinder/examples/example-1.html for all your navigational questions.
                  • 16350
                  • 9 Posts
                  Hi flinx,
                  thanx again for taking the time to help me! Everything panning out (except some technical stuff in another thread), but the thumbs are not cooperating... It looks like I’m getting a bit too much out of of my [+image:phpthumb="w=100"+] tag returns this:
                  /modx/image.php?src=<img src="assets/images/1.jpg" />&amp;hash=e4696da6674027e187c26e2dc12b7e49
                  instead of what I’m guessing it should be:
                  /modx/image.php?modx/assets/images/1.jpg&amp;hash=e4696da6674027e187c26e2dc12b7e49
                  so something seems to be up with the image TV I’m not getting...
                  Any help (again) would be great!
                  Kris
                    • 33982 ☆ A M B ☆
                    • 476 Posts

                    It looks like I’m getting a bit too much out of of my [+image:phpthumb="w=100"+] tag returns this:
                    /modx/image.php?src=<img src="assets/images/1.jpg" />&amp;hash=e4696da6674027e187c26e2dc12b7e49
                    For starters, it looks like you’re trying to make PHP Thumb into a MODx snippet. It’s not a MODx snippet, but rather a standalone image resizing script. The first time I used PHP Thumb, I made the same mistake. Instead of trying to make it into a snippet in MODx, it operates essentially "independent" of MODx. So in other words, what I do is FTP the contents of PHP Thumb into the Snippets folder (/assets/snippets/phpthumb/) and afterwards I DON’T copy and paste the contents of PHP Thumb into a new snippet. Instead if you look above at my tpl example, you’ll see how I incorporated the image’s placeholder in the PHP Thumb call:
                    <img id="featuredboximg" src="assets/snippets/phpthumb/phpThumb.php?src=http://www.rent2ownhomesonline.com/[+propertyimg1+]&w=60&h=60&zc=1" title="[+longtitle+]" />
                    

                    If you check it out, for PHP Thumb, you provide the path for the files related to phpThumb (assets/snippets/phpthumbphpThumb.php?)...after that path you provide the path to the image itself (src=http://www.rent2ownhomesonline.com/[+propertyimg1+]) in which [+propertyimg1+] is your placeholder for the image’s T.V.

                    Hope that helps.
                      Precision Web Development ... SmashStack.com
                      • 16350
                      • 9 Posts
                      Hi Flinx!
                      So I’m finally over the hurdle! I got PhpThumbs working! I was just stupid enough to enable the Image widget, and as soon as i discovered that there were no further problems! Thank you so much for all your help, it was the best possible welcome to modx, and definitely a nudge in right direction! Thanx again,
                      Kris