badget

Biggest Sale! Special Offer!

Get 30% discount on all of our single themes with this coupon code: #30%SALE

Hurry up! *Limited time offer*

Caption missing on featured images

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #90248
    sakeus.berg
    Participant

    Hi!

    I have been using the “Newscard” free theme for a while now, and I really like it.

    There is one problem however,

    The featured image shown at the top of all posts does not have a caption, even tho I assigned one to it in the media library.

    My site is https://arvikamagasinet.se and an example post of where the caption is missing is https://arvikamagasinet.se/2021/06/15/lastbil-pakord-bakifran-vid-graningerondellen-begransad-framkomlighet/

    Is there any way I can fix this using CSS or a plugin? If this option exists in the paid version of the theme I’d be happy to pay for it, but I don’t want to pay if that feature is not included.

    Maybe there is a way fixing this in the theme?

    #90356

    Hi sakeus.berg,

    Currently there is no option to show caption on featured image. The option will be soon available on our next Theme Update.

    For now you do the below instruction to get Featured Image Caption.

    Please go to ‘Theme Directory > template-parts > content.php’ file on line no: 34. you will find the below code.

    </figure><!-- .post-featured-image .page-single-img-wrap -->

    Now replace the above mentioned code with the below provide code.

    <figcaption class="featured-image-caption"><?php echo get_the_post_thumbnail_caption(get_the_ID()); ?></figcaption>
    </figure><!-- .post-featured-image .page-single-img-wrap -->

    after replacing the code save the file and please go to ‘Appearance > Customize > Additional CSS’ and paste the below Custom CSS Code.

    .post-featured-image.page-single-img-wrap {
    	overflow: hidden;
    }
    .post-featured-image.page-single-img-wrap .featured-image-caption {
    	position: absolute;
    	left: 0;
    	right: 0;
    	bottom: 0;
    	padding: 50px 25px 15px;
    	color: #ffffff;
    	background: linear-gradient(rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.5));
    }
    @media (max-width: 767px) {
    	.post-featured-image.page-single-img-wrap .featured-image-caption {
    		padding-left: 15px;
    		padding-right: 15px;
    	}
    }

    Thanks

Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.