Adding css to image field

Hi there,

I have tried adding css to image field

I need this class to be inside the <img /> tag.

I tried using the prefix but this is what I am getting at the moment.

Hello

alternatives that you can use:


1. better try to use one of the 6 the built-in options, it is easier


2. you could add a container around image thumbnails, you can try using :
Prefix:
<span class="img-responsive">

Suffix:
</span>

which will give you
<span class="img-responsive"><img ../></span>

then add your CSS rule:

span.img-responsive img.somefcclass {... your rules}


2. or you could use the existing CSS class that image TAG <img class="...">
e.g.
.class1 .class2 img.class3 { ... your rules}

I have added these classes.

I can see the class in the item page.
I cannot see the class in the category listing page.

This is the image that is extracted from the same product image field (that is in the item view as a product field.)

The images are cropped from the right side when i resize the browser.

I disabled the figure class
and I still cannot see the images resizing as the browser resizes.

I am not really sure what else to check.

The item page template is designed with bootstrap 3

Thank you.

Hello

you say:

GKHN wrote: I can see the class in the item page.
I cannot see the class in the category listing page.

-- please note that to output the image field, the field must be inside a template position !

i guess your category view uses the category layout of 'blog' template,
and the 'blog' template can use the image field via a parameter, in this case it does not output the image field, but some custom code,

so to output the image field in blog template drag and drop it in template position, and disable the parameter of the template (, disable it in category edit form)

Regards