Support

Account

Register Login

Home › Forums › Front-end Issues › How can I get the caption of the used image in an picture element

Solved

How can I get the caption of the used image in an picture element

  • Hello Community,

    I like to use different header images for different end devices (desktop, tablet, smartphone) on my website. But more and more often we have the obligation to place copyrights. I place this over the caption of the picture. Since I work a lot with Bootstrap, I use the picture element with the bootsstrap media elements. It works very well. The images are adjusted according to the screen size. But now my question: How do I get the respective caption of the image used to be displayed? The caption of the desktop image is currently being displayed to me. Do you have any ideas?

    Thanks very much!!!

    <?php $headerbild = get_field('headerbild');
			if( $headerbild ): ?>
			<div class="hero-picture">
				<figure class="media">
					<picture>
						<source media="(max-width: 575.98px)" srcset="<?php echo esc_url( $headerbild['headerbild_smartphone']['url'] ); ?>" alt="<?php echo esc_attr( $headerbild['headerbild_smartphone']['alt'] ); ?>" type="image/webp">
						<source media="(max-width: 991.98px)" srcset="<?php echo esc_url( $headerbild['headerbild_tablet']['url'] ); ?>" alt="<?php echo esc_attr( $headerbild['headerbild_tablet']['alt'] ); ?>" type="image/webp">
						<img class="img-fluid" src="<?php echo esc_url( $headerbild['headerbild_desktop']['url'] ); ?>" alt="<?php echo esc_attr( $headerbild['headerbild_desktop']['alt'] ); ?>" />
					</picture>
					<p class="credits"><?php echo $headerbild['headerbild_desktop']['caption']; ?></p>
				</figure>
			</div>
			<?php endif; ?>

  • I use this:

    
<?php $image = get_field('image'); ?>
           <figure>
            	<img src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" title="<?php echo esc_attr($image['title']); ?>" class="img-fluid" />
            </figure>
            <?php if( $image['caption'] ): ?>
            	<figcaption><?php echo esc_attr($image['caption']); ?></figcaption>
            <?php endif; ?>

    Works for me, just change the field name

  • Yes, this works with just one image (I use nearly the same way with headerbild_desktop), but in my <picture> element I have 3 images. I would like the caption of the image that is currently displayed. I need an instruction under credits, which outputs exactly the caption of the displayed image.

  • What determines which image is displayed?

    If it’s screen size, then use media queries. If you use Bootstrap for example, use the display utilities.

  • Yes, I use Bootstrap and use it as it is in the instructions for the <picture> tag. What do you mean by the display utilities?

  • So if you’re using different images for different screen sizes, then you want to show the right caption.

    I think using media queries would give more control but you could look at the Bootstrap Display Property
    Simply add the necessary classes to show/hide the caption based on the screen size.

    But, I think media queries may be more accurate – just wanted to provide options.

  • By media queries do you mean the usage in css (like @media (min-width: 586px))? Unfortunately, that doesn’t work because the user should be able to upload their own images in the backend.

  • Yes, that’s exactly it.

    Why doesn’t it work? From what you’ve said, you have 3 images and they display according to the screen size – is that right?

    If so, you then want the right image caption to be shown, depending on the right image being displayed, based on the screen size – is that right?

    If so, then you can use media queries, for example:

    

<style>
@media screen and (min-width: 991.99px) {
	.desktop-caption {
		display: block;
	}
	.tablet-caption {
		display: none;
	}
	.phone-caption {
		display: none;
	}		
}	
@media screen and (min-width: 575.99px) and (max-width: 991.98px)  {
	.desktop-caption {
		display: none;
	}
	.tablet-caption {
		display: block;
	}
	.phone-caption {
		display: none;
	}	
}
@media screen and (max-width: 575.98px) {
	.desktop-caption {
		display: none;
	}
	.tablet-caption {
		display: none;
	}
	.phone-caption {
		display: block;
	}		
}
</style>

<?php $headerbild = get_field('headerbild');
if( $headerbild ): ?>
<div class="hero-picture">
	<figure class="media">
		<picture>
			<source media="(max-width: 575.98px)" srcset="<?php echo esc_url( $headerbild['headerbild_smartphone']['url'] ); ?>" alt="<?php echo esc_attr( $headerbild['headerbild_smartphone']['alt'] ); ?>" type="image/webp">
			<source media="(max-width: 991.98px)" srcset="<?php echo esc_url( $headerbild['headerbild_tablet']['url'] ); ?>" alt="<?php echo esc_attr( $headerbild['headerbild_tablet']['alt'] ); ?>" type="image/webp">
			<img class="img-fluid" src="<?php echo esc_url( $headerbild['headerbild_desktop']['url'] ); ?>" alt="<?php echo esc_attr( $headerbild['headerbild_desktop']['alt'] ); ?>" />
		</picture>
		<p class="credits desktop-caption"><?php echo $headerbild['headerbild_desktop']['caption']; ?></p>
		<p class="credits tablet-caption"><?php echo $headerbild['headerbild_tablet']['caption']; ?></p>
		<p class="credits phone-caption"><?php echo $headerbild['headerbild_smartphone']['caption']; ?></p>
	</figure>
</div>
<?php endif; ?>

    Perhaps I’ve misunderstood but I’ve simply gone by the details you’ve given.

  • Oh, I’m sorry, I was thinking of something completely different. I thought I should create the images as a background and then display them via the media queries 🙂 Of course, your method is also a good option that I will use. Thank you very much.

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.