We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 7527
    • 437 Posts
    distant_smile Reply #1, 13 years ago
    Hi, I am using a Ditto call to display the most recent 20 articles. Each is basically a picture with a text link. Is there a ditto parameter to limit the maximum size of the image. For instance all article/images to be max of 200 pixels?
      www.PawsForWildlife.co.uk
      www.Borntobrick.co.uk
      • 7527
      • 437 Posts
      distant_smile Reply #2, 13 years ago
      Here is the page in question

      http://www.pawsforwildlife.co.uk/latest_articles.php

      obviously i want to get at least two articles wide. my code is
      [[Ditto? &parents=`70, 80` &display=`20` &depth=`3` &orderBy=`createdon DESC` &tpl=`home-articles`  &extenders=`summary` &hideFolders=`1`]]


      and my home-articles tpl is

      <div class="grid3">  
      <h1><strong>LATEST ARTICLE</strong></h1>
          <h2><a href="[~[+id+]~]">[+pagetitle+]</a></h2>  
      <br></br>
        
          <img src="[+Factfile+]" alt="Factfile" />
      <p>[+summary+]</p>
           <p><a href="[~[+id+]~]"><strong>View page...</strong></a></p>  
      
      </div> 
      
        www.PawsForWildlife.co.uk
        www.Borntobrick.co.uk
        • 26016
        • 561 Posts
        Hi,
        One could use a thumbnail app or the like. Don’t tell anyone, but for this type of thing I use a really simple (and admittedly cheesy) technique. Much easier than worrying about PHPThumb security problems and all that. smiley It’s just a small change in your template - note the "width" part.

        <img width="200" src="[+Factfile+]" alt="Factfile" />


        Cheers
          MODx and Wordpress development
          Linux, PHP 5.2, MySQL 5.0, Evo 1.05, Revo 2.08-pl, Firefox 4
          • 7527
          • 437 Posts
          distant_smile Reply #4, 13 years ago
          Excellent I nearly have it working. the sizes are correct but all are in a vertical line in the centre of the page. What can I add to my css to put the images side by side?
            www.PawsForWildlife.co.uk
            www.Borntobrick.co.uk
            • 33968
            • 863 Posts
            Hi there, just had a quick look at your page.

            You’ll want to set the width of div#Recent20 to 100% (or a large enough pixel width) so it spans the width of it’s parent div.

            Then for <div class="grid3">, add something like:
            .grid3 {
                width: 200px;
                float: left;
                margin: 10px;
            }
            

            to get them lined up side by side. Obviously you can fine-tune margins, padding and width but it is the float property that will stack them horizontally.

            As for the thumb sizes - samba you earned a slap on the wrist for that suggestion tongue Sure that’s a quick fix but if your images are large then you are forcing your users to download the full size images even if you just want to display a thumbnail. Makes for slow downloads and eats up your bandwidth.

            If you’re running your site yourself then I guess you could create a second image TV to hold a thumbnail version of each image that you crop to size yourself. If they are your photos I’m sure you’d be fussy about how they are cropped wink Otherwise I wouldn’t be discouraged from phpThumbOf. The security issues have been addressed with the version that ships with Revo.
              • 7527
              • 437 Posts
              distant_smile Reply #6, 13 years ago
              Thanks Lucas. It’s looking closer to what I want. I still have a slight issue with some articles not appearing inline

              http://www.pawsforwildlife.co.uk/latest_articles.php

                www.PawsForWildlife.co.uk
                www.Borntobrick.co.uk
                • 7527
                • 437 Posts
                distant_smile Reply #7, 13 years ago
                it’s something to do with the margin, kicking it all out. have tried different values but no luck so far
                  www.PawsForWildlife.co.uk
                  www.Borntobrick.co.uk
                  • 33968
                  • 863 Posts
                  No problem smiley

                  You’ll need to specify heights for those divs - and heights for the headings in those divs - which would keep them all the same size and properly aligned.

                  Also you might be able to get them four abreast by reducing the width and padding. If you prefer three, I would increase the margins, pad them a bit and make the images a bit larger to have them spread out evenly across the page. Just need to play around with it a little.
                    • 7527
                    • 437 Posts
                    distant_smile Reply #9, 13 years ago
                    Sorry Lucas once last question. how do I specify the height for the divs as these are randomly generated by ditto according to their createdon date
                      www.PawsForWildlife.co.uk
                      www.Borntobrick.co.uk
                      • 7527
                      • 437 Posts
                      distant_smile Reply #10, 13 years ago
                      Never mind, I sorted it. Thanks very much guys. your help is much appreciated
                        www.PawsForWildlife.co.uk
                        www.Borntobrick.co.uk