Forums

Theme Block Classes wrong target

Permalink
hi guys
i'm new to this concrete 5. i'm trying to create getThemeBlockClasses function just like the tutorial on the developer guide.
but when i try to apply the design on the images block, it's not working!
and the class happens to apply on the image parent.
as you can see : ( the .img-thumbail are apply to the div not the images )

<div class="ccm-custom-style-container ccm-custom-style-maincontent2-18 img-thumbnail img-thumbnail">
<img src="8.jpg" alt="test" width="299" height="384" class="ccm-image-block img-responsive bID-18">

</div>

but when i try with the elemental themes
its working just fine

anyone kindly enough to help me out?
Thank you
 
MrKDilkington replied on at Permalink Best Answer Reply
MrKDilkington
Hi KevinKP17,

What you are seeing is correct. I think you are expecting the class to be assigned to the img tag. The way it works is the class will be assigned to the parent div tag.

Example: .image-test-class added using getThemeBlockClasses()
<div class="ccm-custom-style-container ccm-custom-style-main-553 image-test-class">
    <picture>
        <!--[if IE 9]><video style='display: none;'><![endif]-->
        <source srcset="http://localhost/concrete5/application/files/4914/4081/2438/Screen_Shot_1_-_edit_mode.png" media="(min-width: 900px)" class="ccm-image-block img-responsive bID-553">
        <source srcset="http://localhost/concrete5/application/files/4914/4081/2438/Screen_Shot_1_-_edit_mode.png" media="(min-width: 768px)" class="ccm-image-block img-responsive bID-553">
        <source srcset="http://localhost/concrete5/application/files/4914/4081/2438/Screen_Shot_1_-_edit_mode.png" class="ccm-image-block img-responsive bID-553">
        <!--[if IE 9]></video><![endif]-->
        <img src="http://localhost/concrete5/application/files/4914/4081/2438/Screen_Shot_1_-_edit_mode.png" alt="#" class="ccm-image-block img-responsive bID-553" width="229">
    </picture>
</div>

The .img-test-class is added to the containing div tag, not the img tag.

The way to target the img tag using this class:
.image-test-class img.ccm-image-block {
    border: 5px solid red;
}

The img tag has a class of "ccm-image-block" assigned to it by default.
KevinKP17 replied on at Permalink Reply
oooh so the function itself target the parents not the images.
i thought since 
.img-thumbnail
is a bootstrap class that modify img

i'll try it
Thank you