How to add CSS-classes to specific images?

• Atise

• September 24, 2021 at 5:23 am

I am using ACF to create pages with both images and text fields. I need to add a class to some of the images to make it possible to modify the resolution in CSS. Since I am new to ACF, I have written a couple of questions to get this right!

1)Do I add custom fields to the images in which I write the class name? or is there a better way?
2)What kind of field is needed to get this done?
3)What do I have to write in the form while creating the custom field? 4)How do I target the specific images that should have the class?
5)How do I do to make the class accessible by CSS.

ACF version: 5.8.7
Thank you for taking time to read this

• jarvis

• September 24, 2021 at 5:33 am

Hi @atise

If you’re creating an image field, when you add the code to your template (please see here), you can add the class to your img tag.

Once you add the class, say ‘responsive-img’, you can then reference that in your CSS.

So:

<?php 
$image = get_field('image');
if( !empty( $image ) ): ?>
    <img src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" class="responsive-img" />
<?php endif; ?>

Then in your CSS:

.responsive-img {
/*whatever you need to add*/
}