How to add a class field to individual images inside a gallery?

Hi @mwjoch
This plugin is for more advance users however I would like to help. Can you give me some sample codes that you are using on your website currently.

Please advise
Thanks

Thank you so much for replying! It would be amazing if you could help.

So I’m working with a child theme, where I’ve done a fair amount of customizing to the CSS stylesheet. I’m not exactly sure what code examples you need to see, but I’ll try to give as much information as possible. Hopefully the Inspect Element tool will enable you to see the code you need.

Here’s an example of a page where you can see what my problem is: https://mchabocka.com/2013/gorey-stories/

The first two images and the fourth (bottom) one have been inserted directly into a post, and I’ve called a border-image class on them (which means they’re getting a 1px solid #000 border). So all works fine.

Then the two white square images below the first two have been inserted into a gallery, and I can’t add any class to them (the gallery also prevents me from having a caption below the images, and not just on hover, but that’s a separate problem).

So I was hoping that by using your plugin I might be able to create a custom field to add custom class (to have the border-image class) but I really don’t know where to start…

Please let me know if you need more specific information on my part to be able to advise me.

And once again, thank you very much for looking into this, I really appreciate it.

Hi @mwjoch
Sorry to say this but this plugin won’t work for you. However I would like to help you out.

Can you add the following in your CSS file.

.gallery-item img{
  border: 1px solid #000;
}

I believe the theme you are using “MChabocka”. You can use the theme options in your Administrator Dashboard and look for options to add custom css.

Please advise
Thanks

• This reply was modified 7 years, 6 months ago by Navneil Naicker.
• This reply was modified 7 years, 6 months ago by Navneil Naicker.

Thank you for your reply.

Yes, I am aware that I can add that line of code, but that will put a border on all images, whereas I would like to have control over which images will have a border and which won’t. That’s why I wanted to have a custom field, just like there is one for images which you insert into a post.

If you have any idea whether there’s a plugin which can help with that, I would be grateful.

Thank you.

Hi, I have a problem with adding custom CSS class to image.
I added following code to functions.php file:

//Create extra fields called Altnative Text and Custom Classess
function my_extra_gallery_fields( $args, $attachment_id, $field ){
    $args['class'] = array('type' => 'text', 'label' => 'Kolor produktu', 'name' => 'class', 'value' => get_field($field . '_class', $attachment_id) ); // Creates Custom Classess field
    return $args;
}
add_filter( 'acf_photo_gallery_image_fields', 'my_extra_gallery_fields', 10, 3 );

next code in single-portfolio.php:

<?php
    $images = acf_photo_gallery('gallery_images', $post->ID);
    if( count($images) ):
        foreach($images as $image):
            $class = get_field('gallery_images_class', $id);
    endforeach; endif;
?>

and display this variable:

<?php foreach($images as $image) { ?>
     <img src="<?php echo $image['full_image_url']; ?>" class="<?php echo $class; ?>" >
<?php } ?>

Nothing happend. What I am doing wrong?

• This reply was modified 7 years, 6 months ago by marekbo12.
• This reply was modified 7 years, 6 months ago by marekbo12.

Hi @marekbo12
I see you are missing the $id from the following code

<?php
    $images = acf_photo_gallery('gallery_images', $post->ID);
    if( count($images) ):
        foreach($images as $image):
            $id = $image['id'];
            $class = get_field('gallery_images_class', $id);
    endforeach; endif;
?>

Yes, I resolved this yesterday.
I think you should add to Plugin Description “$id = $image[‘id’];”.

Greetings

Hi @marekbo12
I have noticed that it’s missing from the documentation. Thank you for pointing out.