Joomla Templates Club 406,261 posts

[conshelf Friend conshelfJoin date: February 2015Posts: 76Downloads:5Uploads:1 Thanks: 3]

#1054287

Hello,

How can I get the captions to appear below the images? We get a lot of complaints from our clients that the the captions cover the photographers images.

Here’s a link to an example: https://www.ecomagazine.com/news/science/noaa-gulf-of-mexico-dead-zone-is-the-largest-ever-measured

John

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1054342

Hi
Add this code in custom.css file

.article-main .article-intro-media .img-caption {
    display: none!important;
}

Now caption will appear only when u hover on the image.

Regards

[conshelf Friend conshelfJoin date: February 2015Posts: 76Downloads:5Uploads:1 Thanks: 3]

#1054490

Hi Pankaj,

We need the caption to be visible, just not cover the image. I tried modifying the image.php file by wrapping this in divs so the caption would be its own block below the image, but that didn’t work.

<?php if($captionText) : ?>
  <p class="img-caption"><?php echo $captionText ?></p>
  <?php endif ?>

John

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1054596

Hi
The caption is under the same div of the image so it does not work.
Try this way:
open custom.css
find

.com_content .article-main .article-intro-media .item-image {
    max-height: 449px;
    overflow: hidden;
    position: relative;
}

replace it with

.com_content .article-main .article-intro-media .item-image {
    max-height: 100%;
    overflow: hidden;
    position: relative;
}

Now add a new code

.article-main .article-intro-media img {
    margin-bottom: 34px;
}

save and check.

Regards

[conshelf Friend conshelfJoin date: February 2015Posts: 76Downloads:5Uploads:1 Thanks: 3]

#1056339

Hi Pankaj,

That seems to work on some pages, but not this page: https://www.ecomagazine.com/news/regulation/4-5-million-in-funding-recommended-for-restoration-projects-to-benefit-fish-coastal-habitat

It’s especially bad, on mobile devices.

Is there an easy way to break that caption out into it’s own div?

John

[conshelf Friend conshelfJoin date: February 2015Posts: 76Downloads:5Uploads:1 Thanks: 3]

#1056342

I think this ( position: relative;) may have resolved it, can you confirm?

.com_content .article-main .article-intro-media .img-caption {
    background-color: transparent;
    color: #111111;
    display: block;
    bottom: 0;
    font-weight: 300;
    left: 0;
    margin: 0;
    padding: 1px 24px;
    position: relative;
    width: 100%;
    border-left: 5px solid;
}

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1056412

Hi
did you solve it?
https://www.ecomagazine.com/news/regulation/4-5-million-in-funding-recommended-for-restoration-projects-to-benefit-fish-coastal-habitat

On the mobile devices, it does not take the same classes as the screen size changes the style work same.
You can define media queries to apply different style for different screen size.

Regards

[Author]

Posts