Hi,

Just wandering if and how to add css classes to an extrafield of type image , I've tried looking in forums and google but can't find anything specific to this.

the problem i have is the extra fields image is overlapping the container so i just want to restrict the width to 100% using bootstrap classes "img img-responsive"

Any help appreciated.

Thanks

Hi, Artonezero.

You can insert the extrafield inside a DIV. Then, in your CSS file, use a parameter like ".classofdiv img" and insert the desired parameters like the width of 100% to the image. But remember, any other images inside the same div will also get that parameter, so its important to use a DIV for each extrafield of image type.

Hope it works.

Best luck!

Yes I understand that, just wanted to know if there was a way to alter the <img> tag output somewhere in the template override. I may need to associate some classes and id for js/jquery rendering.

Well, in this case, you have two options:

Use "explode" (with php) to extract the src from the extrafield and then apply id, class and other parameters.
In this case, you would have to do it manually to each extrafield with image type.

Or find the piece of code in K2 (I have no clue where it is) to add class, id to all the extrafields with image type.

Hope it helps.

Hello,

Here you go:
getk2.org/documentation/tips-a-tricks/1129-extra-field-image-type-as-link

You can also render each extrafield separately
github.com/kricore/Advanced-templating-with-K2/blob/master/_inc/cheatsheet.php#L104-L109.