How to make a thumbnail image a link?

fa2020 · October 1, 2021, 7:32am

Hi,
I’m using this code in my image gallery project:

<div class="grid-portfolio" id="portfolio">

    <div class="container">

      <div class="row">

        <?php while ($row = $result->fetch_assoc()) { ?>

          <div class="col-md-4 col-sm-6">

            <div class="portfolio-item">

              <div class="thumb">

                <a href="<?php echo $root ?>/public/assets/img/<?php echo $row['image'] ?>" data-lightbox="image-1">

                  <div class="hover-effect">

                    <div class="hover-content">

                      <h1><?php echo $row['title_1'] ?> <em><?php echo $row['title_2'] ?></em></h1>

                      <p><?php echo $row['subtitle'] ?></p>

                    </div>

                  </div>

                </a>

                <div class="image">

                  <img src="<?php echo $root ?>/public/assets/uploadThumb/<?php echo $row['thumb'] ?>">

                </div>

              </div>

            </div>

          </div>

        <?php } ?>

      </div>

      <div class="row">

        <div class="col-md-12">

          <div class="load-more-button">

            <a href="#">Load More</a>

          </div>

        </div>

      </div>

    </div>

  </div>

The problem is that the text area in the image is clickable, while I want the whole thumbnail to be clickable. How can I fix it?

whispers · October 1, 2021, 1:18pm

Please rephrase what it is you want done… “images” -do not- have textareas. Images are images.

Perhaps you are looking for something like this:

<a href="<?php echo $root ?>/public/assets/img/<?php echo $row['image'] ?>" data-lightbox="image-1">

                  <div class="hover-effect">

                    <div class="hover-content">

                      <h1><?php echo $row['title_1'] ?> <em><?php echo $row['title_2'] ?></em></h1>

                      <p><?php echo $row['subtitle'] ?></p>

                    </div>

                  </div>

               

                <div class="image">

                  <img src="<?php echo $root ?>/public/assets/uploadThumb/<?php echo $row['thumb'] ?>">

                </div>
 </a>

ErnieAlex · October 1, 2021, 1:21pm

Just place your anchor tags around everything that you want to become the link. You can place the tags around DIV’s as needed. You could place them around the portfolio-item or the col-md-4 div’s to make them entirely clickable. I would guess you just want to put them around the entire “thumb” DIV which would make it all clickable.
***Sorry, Whispers answered it while I was typing…