Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 5 of 5
  1. #1
    Member
    Join Date
    Nov 2005
    Posts
    55
    Member #
    11943
    I've built a site being shared by four psychotherapists. They are all listed on the home page with their name, thumb, address and link pointing towards an individual bio page.

    The way it's set up each of them appears in four corners of a square. (think: Utah, Colorado, Arizona, New Mexico)

    Now the egos have asserted themselves. Alphabetical isn't working for them, neither is the order in which they joined the group or got me their content.

    They want their position in the four corners to be random with each refresh of the home page. I shouldn't roll my eyes, it makes sense for them to do it this way.

    I've done random displays of both images and divs, but never random order. The square is set up with old fashioned tables (two rows, two columns), but could just as easily be done with divs.

    I'm hoping someone might know of a solution for this, or could point me towards a solution.
    Thanks.

  2.  

  3. #2
    Senior Member ravensjeff's Avatar
    Join Date
    Aug 2007
    Location
    Maryland
    Posts
    125
    Member #
    15751
    I would do it with php.

    PHP Code:
    <?php

    //Use the format => link|imagename (sans extension)|alt tag

    $content = array(
        
    'http://www.yoururl.com/wheretheimagelinks.html|image1name|image one alt tag',
         
    'http://www.yoururl.com/wheretheimagelinks.html|image2name|image one alt tag',
        
    'http://www.yoururl.com/wheretheimagelinks.html|image3name|image one alt tag',
         
    'http://www.yoururl.com/wheretheimagelinks.html|image4name|image one alt tag',
        
    );

    shuffle($content);

    foreach (
    $content as $value)
    {
        
    $explode explode('|'$value);
        echo 
    '<li><a href="' $explode[0] . '"><img src="http://www.yoururl.com/path/to/images/' $explode[1] . '.jpg"  alt="' $explode[2] . '"/></a></li>';
    }
    ?>
    Lose the table...it will just make it harder. Just create a container div and then place this code inside and unordered list (<ul>). Use css and float the li elements inside the container box and style them up as necessary.

  4. #3
    Member
    Join Date
    Nov 2005
    Posts
    55
    Member #
    11943
    Yikes! this may be a little over my head. But let me see if I have it strait.

    The 4 items under "$content = array" are my 4 people.

    You're separating the elements of what would normally be in my hypertext code with a pipe (|). (I'm assuming where you've put "image one alt tag" would actually correspond to the actual image number "2, 3, 4" - correct?)

    Then below that...

    the "echo '<li>..." is where the magic happens. Each <li> tag will display the content based on the info in between the "|" and the order they appear in the "$content = array" -

    so "$explode[0]" would be the URL, "$explode[1]" would be the image name, "$explode[2]" would be the alt tag, etc.

    Couple questions:

    1. Can I add more "$explode[x]" numbers? and add more "|" separators?

    "... |name|address|email link|map link|etc." to display all the information I need?
    "name" would be: $explode[3]
    "address" would be: $explode[4]
    etc.?

    2. What do I put in the actual body of the code?

    <div class="box">
    <ul>
    <li class="firstperson">what goes here?</li>
    <li class="secondperson">what goes here?</li>
    <li class="thirdperson">what goes here?</li>
    <li class="fourthperson">what goes here?</li>
    </ul>
    </div>

    In the CSS I would (try to) style each class to make things line up in my four corner grid.

    3. Where does the php code go? In the <head> tags? In the body above the <div> tag?

    Thanks for your help.

  5. #4
    Senior Member ravensjeff's Avatar
    Join Date
    Aug 2007
    Location
    Maryland
    Posts
    125
    Member #
    15751
    Ok...let's walk through it step by step then:

    First, you'll need a little css. Something like this:

    Code:
    ul{width:350px; overflow:hidden; list-style-type:none; background:#f0f0f0; padding:10px;}
    ul li{float:left; padding:10px; margin-bottom:0px;}
    You'll have to change your width to fit whatever image sizes you have. 350px should be good if you images are about 150px wide. The background color can be deleted, I just put it in there so you could see what was going on.

    You don't need class names for each <li>. They will position themselves just fine with the css above.

    As for the php, you can do something like this:

    PHP Code:
    <ul>
    <?php

    //Use the format link|imagename (sans extension)|alt tag|information

    $content = array(
        
    'link.html|1|one|<br />Name One<br />Phone One',
        
    'link.html|2|two|<br />Name Two<br />Phone Two',
        
    'link.html|3|three|<br />Name Three<br />Phone Three',
        
    'link.html|4|four|<br />Name Four<br />Phone Four',
        
    );

    shuffle($content);

    foreach (
    $content as $value)
    {
        
    $explode explode('|'$value);
        echo 
    '<li><a href="' $explode[0] . '"><img src="images/' $explode[1] . '.gif"  alt="' $explode[2] . '"/></a>' $explode[3] . '</li>';
    }
    ?> 

    </ul>
    Note that the php is place inside the UL tags within the body of your document. Alternatively, you could place it in a separate file and use a php include to call it between the UL tags.

    I have added a sample Name and Phone Number to the array which will display below the picture. I separated each with a <br /> tag to place it on a new line. You can add whatever additional information you want there.

    Hope this helps!

  6. #5
    Member
    Join Date
    Nov 2005
    Posts
    55
    Member #
    11943
    Okay!! It took me a while to get around to working on this.

    However, the code worked great and with a few modifications I was able to get it to match the existing site, and do what they want it to do.

    Thank you for your help.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 12:44 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com