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

    Join Date
    Jul 2012
    Posts
    31
    Rep Power
    67

    Help with images and top/bottom captions.


    Hi guys.

    I'm really stuck here since I'm fairly new to php and HTML.

    I will post code later if that's what's wanted.

    Here is what I need to do :

    I need to grab images from a directory then display them in a gallery type fashion but with both a top caption and a bottom caption for each image.
    The captions will not be a part of the image, but should appear above and below the image.

    I do not know how to display images with both a top and bottom caption in gallery style - meaning for example 4 per images per row.


    the gallery should look like this:

    row 1:
    caption1a-------caption2a--------caption3a-------caption4a
    image1----------image2----------image3----------image4
    caption1b-------caption2b--------caption3b--------caption4b


    row 2:
    caption5a-------caption6a--------caption7a-------caption8a
    image5----------image6----------image7----------image8
    caption5b-------caption6b--------caption7b--------caption8b

    etc.

    I don't want anything fancy or animated - no Javascript please. I want this HTML and php for compatibility.



    Can anyone post any quick code?


    I guess using CSS or div tags would be the best way to do this or is a table to be used?

    I've read about figure tags but I don't think they are going to do the job?

    I really don't know and can't find any examples showing how to do what I want.


    Thanks guys.
  2. #2
  3. For POny!
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2012
    Location
    Amsterdam
    Posts
    416
    Rep Power
    115
    You might want to start by trying to code an image with a caption above and below it. once you managed this (or not) post this html view. Than try to simply write some code to get images from a directory. Once that works combine them. I am almost 9001% (over 9000) certain google can give a head start. If not post what you found and tried.
    Last edited by aeternus; December 9th, 2012 at 06:14 PM.
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2012
    Posts
    31
    Rep Power
    67
    Originally Posted by aeternus
    You might want to start by trying to code an image with a caption above and below it. once you managed this (or not) post this html view. Than try to simply write some code to get images from a directory. Once that works combine them. I am almost 9001% (over 9000) certain google can give a head start. If not post what you found and tried.
    Hi. Thanks for your reply!

    I can already get the images from the directory and loop through them. I can even display them gallery style.

    I just cannot do top and bottom captions for the images and keep the images on the same row.

    I think it's because I was using <br> to create the captions:
    caption1 <br>
    image <br>
    caption1b

    Obviously that's wrong as it's only good for one image in a row. I want many images in a row with top and bottom captions on each image.

    I've tried googling to find what I need but I couldn't find specifically what I need.
  6. #4
  7. For POny!
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2012
    Location
    Amsterdam
    Posts
    416
    Rep Power
    115
    ok good, so the php part is finished.
    Can you post your html, i'll have a look at it.
    _doesn't matter if it works ofcourse I'll be around tonight for 40 min
    Last edited by aeternus; December 9th, 2012 at 07:05 PM.
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2012
    Posts
    31
    Rep Power
    67
    Originally Posted by aeternus
    ok good, so the php part is finished.
    Can you post your html, i'll have a look at it.
    _doesn't matter if it works ofcourse I'll be around tonight for 40 min
    Hi and thanks.

    That's the part I'm having trouble with.

    I don't know how to use div tags or setup the HTML.
    I've messed around a lot and this is my latest failed version
    that is a php foreach loop (which grabs the images):

    Code:
    echo '<figure> <figcaption>caption1a </figcaption>  </figure> <img src="PATHTOIMAGE.jpeg" alt="missing image"> <figcaption>caption1b </figcaption>  </figure> ';
    So the idea is each iteration of the loop will display the image(s).

    For simplicity I've omitted the actual array values, etc.

    If I can get it working with the same image and captions shown side by side in gallery fashion, I can then plug in my actual values taken from the foreach image loop and captions.


    To create the new rows I do some math in php which echo's <tr> when it's appropriate. I have disabled this because my issue is each picture is on it's own line / row, they are not next to each other which is what I want. That was because I was using <br> which is obviously wrong.

    I guess I need to learn more about div tags? CSS? tables?

    which ones are what I want?

    Thanks!
  10. #6
  11. For POny!
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2012
    Location
    Amsterdam
    Posts
    416
    Rep Power
    115
    I asked for the HTML (separate concerns first) , ones you fix that its easier to do what you want.

    Try this html and css and see how it works and why.

    CSS
    Code:
    .image-container{text-align:center;float:left;}
    .image-container img{display:block;}
    HTML (a simple structure)
    Code:
    <div class="gallery">
                <div class="image-container">
                    <span class="tcaption">top</span>
                    <img src="http://i49.tinypic.com/34dh1yt.jpg" alt="" height="100" width="100" />
                    <span class="bcaption">bottom</span>
                </div>
                <div class="image-container">
                    <span class="tcaption">top</span>
                    <img src="http://i49.tinypic.com/34dh1yt.jpg" alt="" height="100" width="100" />
                    <span class="bcaption">bottom</span>
                </div>
                <div class="image-container">
                    <span class="tcaption">top</span>
                    <img src="http://i49.tinypic.com/34dh1yt.jpg" alt="" height="100" width="100" />
                    <span class="bcaption">bottom</span>
                </div>
            </div>
    As you can see each image is surrounded by a container. I made the image display block so the span will come above and below it. (it's that block you want to put inside a Loop to populate it with your images)
    Try it out let me know if you have question.

    P.s. Don't use tables for anything but multicolumn sheets or html mails, for everything else don't there are better ways.


    p.p.s the extra classes used are just to give some flexibility when styling the gallery (if you don't use them leave them out)
    Last edited by aeternus; December 9th, 2012 at 10:18 PM.
  12. #7
  13. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2012
    Posts
    31
    Rep Power
    67
    Hi aeternus.

    Thank you very much for your help!


    I apologize for not getting back to you sooner. I've been very busy and needed some time to digest what you wrote.

    After looking at your code I searched the net more for div gallery examples and I found this one :

    http://www.w3schools.com/css/css_image_gallery.asp


    I've made progress and have gotten most of it working correctly but I still have two questions about this :


    Q 1: How do I create new rows when doing the gallery this way?
    I know how to count the images and do the math when I need a new row, but what HTML code do I output to create the new row?
    Is there something specific when using Div tags and this way of doing it?


    Q 2: Your code has the <span> tag, but the online example doesn't use the <span> tag, why?



    The online definition for the <span> tag I have found is :

    The <span> tag is used to group inline-elements in a document.

    The <span> tag provides no visual change by itself.

    The <span> tag provides a way to add a hook to a part of a text or a part of a document.


    Remember I'm looping through the images and when the counter math tells me to add a new row I need to add the new row.

    Thanks big time
  14. #8
  15. For POny!
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2012
    Location
    Amsterdam
    Posts
    416
    Rep Power
    115
    Q 1: How do I create new rows when doing the gallery this way? I know how to count the images and do the math when I need a new row, but what HTML code do I output to create the new row? Is there something specific when using Div tags and this way of doing it? Q 2: Your code has the <span> tag, but the online example doesn't use the <span> tag, why?
    I am not sure why you ended up at w3fools.com because you got exactly what you asked for!

    Q1: Google for the CSS Clear property (also have a look in to the float property)
    Q2: Well the online w3fools example is a different situation. That uses a link. I used 2 spans, because they are inline elements that are perfect to use what you asked for.

    Please read about the properties clear and float. That should give all the info that is needed.
    Last edited by aeternus; December 15th, 2012 at 01:50 AM.
  16. #9
  17. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2012
    Posts
    31
    Rep Power
    67
    Originally Posted by aeternus
    I am not sure why you ended up at w3fools.com because you got exactly what you asked for!

    Q1: Google for the CSS Clear property (also have a look in to the float property)
    Q2: Well the online w3fools example is a different situation. That uses a link. I used 2 spans, because they are inline elements that are perfect to use what you asked for.

    Please read about the properties clear and float. That should give all the info that is needed.
    Hi aeternus.

    Sorry for the delayed reply. I've been too busy to work on my site so I wasn't able to read and learn as much as I've wanted lately.

    Ok, I ended up at that website cause I'm still new and learning. Even though your code was a big help I don't think it showed me how to create the new rows that I needed. I don't exactly remember what I was still missing and needed more help on now because it was weeks ago but YES your post did help me a lot and big thank yous to you

    I now am having more time to continue my learning and develop my site.

    I do have another easy question I'm going to post on which involves making a simple login system for users.
    There's only one simple part I don't know and that I will post in another post topic.

    Thank you again aeternus for your help!
  18. #10
  19. For POny!
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2012
    Location
    Amsterdam
    Posts
    416
    Rep Power
    115
    ...You got what you asked I linked you to documentation in order to do the last part yourself, which you didn't. (if so where is the code) So I suggest you Read this thread from top till bottom until you see what you got and modify it slightly with the sources given.

    Have fun!

IMN logo majestic logo threadwatch logo seochat tools logo