#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2012
    Posts
    31
    Rep Power
    66

    Php gallery titles help, please.


    Hi guys.

    I'm in need of some help here. I'm working on a php gallery.
    There are two different kinds of images in my gallery and I want each kind to have it's own title before the group of images/rows. Code 1 images and Code 2 images.

    To simplify my post I've removed the actual php and replaced it with CSS so maybe this is more of CSS problem. However hardly anyone reads and replies in the CSS forum so I figured I'd try here since php coders also have CSS experience


    The part I have not been able to do correctly yet is output the "Code 1 Images :" before the code 1 image rows, then output "Code 2 Images :" before the code 2 image rows.

    I've searched the net and have found much just not what I am trying to do. I'm also trying to read through a book but still not specific enough for my need, just general information.

    My CSS may not correct or the best way to do it so if you can show a better way or a way to get it working, that would be great. For example, I've read I shouldn't be using tables to output images but that's the only way I've seen it done that I can get it to work so that's what I've used...


    Thank you very much for your help.


    PHP Code:
    <!DOCTYPE HTML>
    <
    html><body><head><meta charset="utf-8">
    <
    title>My Title</title>
    <
    h1>Header 1 </h1>
    <
    div id="gallery"
    <
    table>

    <
    tr>
    <
    h2Code 1 images : <h2>

    <
    td
    <
    p style="code:1">fistname lastname <a href="image/path"><img src="image/path" alt="Pic unavailable" width="280" height="200"></a>date taken</p
    </
    td>

    <
    td
    <
    p style="code:1">fistname lastname <a href="image/path"><img src="image/path" alt="Pic unavailable" width="280" height="200"></a>date taken</p
    </
    td>

    <
    td
    <
    p style="code:1">fistname lastname <a href="image/path"><img src="image/path" alt="Pic unavailable" width="280" height="200"></a>date taken</p
    </
    td>

    </
    tr>


    <
    tr>

    <
    td
    <
    p style="code:2">firstname lastname <a href="image/path"><img src="image/path" alt="Pic unavailable" width="280" height="200"></a>date taken</p
    </
    td>

    <
    td
    <
    p style="code:2">firstname lastname <a href="image/path"><img src="image/path" alt="Pic unavailable" width="280" height="200"></a>date taken</p
    </
    td>

    <
    td
    <
    p style="code:2">firstname lastname <a href="image/path"><img src="image/path" alt="Pic unavailable" width="280" height="200"></a>date taken</p
    </
    td>

    <
    td
    <
    p style="code:2">firstname lastname <a href="image/path"><img src="image/path" alt="Pic unavailable" width="280" height="200"></a>date taken</p
    </
    td>

    </
    tr>
    </
    table>


    <
    style type="text/css">
    h1 {text-align:center;color:#C0C0C0;font-weight: normal;font-family:"Palantino", Times, serif;font-size:42px;}
    h2 {text-align:center;color:red;font-weightnormal;font-family:"Palantino"Timesserif;font-size:42px;}
    h3 {text-align:center;color:white;font-weightnormal;font-family:"Palantino"Timesserif;font-size:42px;}

    #gallery { margin:0 auto; width:800px; }
    #gallery code:1{ float:left; margin: 2px;letter-spacing:1px; word-spacing:5px; text-align:center; vertical-align:top; width:200px; display:table-cell; display:inline-table; color:#E31230; }

    #gallery p{ float:left; margin: 2px;letter-spacing:1px; word-spacing:5px; text-align:center; vertical-align:top; width:200px; display:table-cell; display:inline-table; color:#E31230; }
    #gallery a:hover img {border:1px solid #0000ff;}
    </style>

    <
    body bgcolor="#000000"> </body></html
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2012
    Posts
    48
    Rep Power
    2
    It sounds like what you're after is something along the lines of this:

    Code:
    <tr> 
    <td colspan="3">
    <h2>Code 1 images :<h2> 
    </td>
    </tr>
    
    <tr>
    <td>  
    <p style="code:1">fistname lastname <a href="image/path"><img src="image/path" alt="Pic unavailable" width="280" height="200"></a>date taken</p>  
    </td> 
    <td>  
    <p style="code:1">fistname lastname <a href="image/path"><img src="image/path" alt="Pic unavailable" width="280" height="200"></a>date taken</p>  
    </td> 
    <td>  
    <p style="code:1">fistname lastname <a href="image/path"><img src="image/path" alt="Pic unavailable" width="280" height="200"></a>date taken</p>  
    </td> 
    </tr>
    Although I think just about anyone here would recommend that you use inline-block or floated divs. Something like this:

    (NOTE THAT $images_with_code_one is an array that you would have prepared in advance that contains (and ONLY contains) the image rows with code one.

    PHP Code:
    <div>
        <h2>Code 1 images :</h2>
        
        <?php foreach($images_with_code_one as $image) : ?>
                <div style="display: inline-block; width: 280px; height: 200px;>
                    <a href="<?php $image->path ?>">
                         <img src="<?php $image->path ?>" style="width: 280px; height: 200px;" />
                     </a>
                </div>
          <?php endforeach; ?>
    </div>
    Finally, this would may be cleaner if you were using a templating system like Laravel's Blade, or Symfony's Twig. Also, of course, it would be better to use css classes in this case rather than inline styles as I've shown.

    Good luck!
    Last edited by piperpam27; April 26th, 2013 at 10:34 AM.
    Laterna Studio - Animation, Web Design, Video Production and Print Design

    Psalm 73: 25-26
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2012
    Posts
    31
    Rep Power
    66
    Originally Posted by piperpam27
    Although I think just about anyone here would recommend that you use inline-block or floated divs. Something like this:

    Good luck!
    Hi Piperpam27.

    Thank you very much for replying. Stupid me I forgot to visually post what I am trying to do.

    I see your code but have not tried it yet and yes I prefer to learn to do it the correct way so thank you very much for your help.

    Like this but centered :

    ------------------------Code 1 Images :
    caption---------caption----------caption---------caption--
    image1---------image2----------image3---------image4
    caption---------caption----------caption---------caption--



    ------------------------Code 2 Images :
    caption---------caption----------caption----------caption--
    image1---------image2----------image3----------image4-
    caption---------caption----------caption----------caption--

    caption---------caption----------caption----------caption--
    image5---------image6----------image7---------image8-
    caption---------caption----------caption----------caption--



    I don't know why it's hard to find what I'm trying to do when what I'm trying to do I would think is pretty standard. I definitely have missed things in my CSS readings.

    For example, how would I get the Code 2 title to always appear above the Code 2 images/rows?
    Do I use a <p>? span? what?

    Consider the number of images and rows in Code 1 may differ so I should not use a hard numbered position...?

    Would I just use a span to display "Code 2 Images :" with an approx 50% float width (minus the text length, so probably 60%) after the php code 1 loop then do a php code 2 loop?

    My actual php code does indeed use a code1 image loop and a code2 image loop but my CSS is wonky. I'm glad to know I'm on the right track at least.



    Originally Posted by piperpam27
    Finally, this would may be cleaner if you were using a templating system like Laravel's Blade, or Symfony's Twig. Also, of course, it would be better to use css classes in this case rather than inline styles as I've shown.
    I don't know what those templating systems are so I'll google for them and see after I've read more on CSS.

    Update: I took a quick look at the Laravel's Blade and it seems it would take a lot of time to learn and doesn't seem standard php/css type stuff.
    Let's please just stick to the standard type CSS/php type stuff


    Thanks.
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2012
    Posts
    48
    Rep Power
    2
    Hi Winterfell,

    I've created a fiddle demonstrating something along the lines of what I think you're talking about: http://jsfiddle.net/6d5pW/. Not sure why you'd have a caption both above and below your image so I figured you meant title above and caption below. Either way the only difference would be changing the class name.


    Let me know if you have any questions about the code!
    Laterna Studio - Animation, Web Design, Video Production and Print Design

    Psalm 73: 25-26
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2012
    Posts
    56
    Rep Power
    2
    Hi,

    I am also interest in doing the same thing, except I want to fetch images saved in a folder while the title and captioned are saved to a database contrally to having images imbeded. I will then use some code to search and return images according to search terms.

    How should I arrange my code then?
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2012
    Posts
    48
    Rep Power
    2
    What I've always done for that sort of of thing is save the filename to the row in the database.

    For example, the database would have the following fields (as well as anything else you desired).

    Code:
    ID   |   FILENAME   |   TITLE   |   CAPTION    |    CODE
    
    1        myFile.png       test      sometext         2
    2        myFile2.png      test      sometext         1
    3        myFile3.png      test      sometext         1
    4        myFile4.png      test      sometext         2
    Then, as you run through your foreach loop to display the images, you just use the filename from the row (since you already know the path to the folder they were uploaded to--assuming it's always the same upload folder).
    Laterna Studio - Animation, Web Design, Video Production and Print Design

    Psalm 73: 25-26
  12. #7
  13. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2012
    Posts
    31
    Rep Power
    66
    Originally Posted by piperpam27
    Hi Winterfell,

    I've created a fiddle demonstrating something along the lines of what I think you're talking about: http://jsfiddle.net/6d5pW/. Not sure why you'd have a caption both above and below your image so I figured you meant title above and caption below. Either way the only difference would be changing the class name.


    Let me know if you have any questions about the code!
    Hi Piperpam27!

    Thank you so much for your help, I'm getting closer

    Btw I DO want both top and bottom captions above and below each image. The reason why is because the captions will contain important information about the image. I really haven't had the time to actually try your code yet, hopefully I will do that later tonight or early tomorrow.

    Originally Posted by piperpam27
    Either way the only difference would be changing the class name.
    I played around with your example but I'm still not able to get the Code 2 Images title to act correctly, how do I do that?

    It should appear above the Code 2 images in a similar fashion to the code 1 title.

    When I tried to copy/paste the code 1 <h1> info and put it outside the div (actually different places) it appears at the end of the last image, not what I want.
    I want the Code 2 images title centered and nice looking on it's own new row/line, after we see the last Code 1 image.
    See my example, I think I show what I mean.

    I really really appreciate your help. I feel bad I haven't been able to really dig into your help yet.

    Piperpam27 can you please list where you learn about CSS and php, etc.?
    I just purchased a CSS3 book on my kindle but I'm still looking for great resources, thanks.


    Ps. I like the image of the cute kitty

    Sadly, my cat Rossi recently passed away
    Last edited by Winterfell; May 1st, 2013 at 11:32 PM.

IMN logo majestic logo threadwatch logo seochat tools logo