Hello there,

I just started working with concrete 5 and i ran into something. I got somethings figured out like how to add a content block etc. but now i like to add thumbnails ( I'm working on mine portfolio website ). of my work.

I will try to explain how i set it up in html/css:

Html :

<div id="portfolio2">

<div class="child">
<a href="glow.html">
<img src="images/glow.jpg" onmouseover="src='images/glow_hover.jpg'" onmouseout="src='images/glow.jpg'" alt="glow">
</a>
</div>

</div>

Inside the portfolio div there are 8 of those child div's all with there own thumbnail and they link to the page of their content.

The css for those items :

#portfolio2{
height: 100%;
width: 100%;
background: #f6f6f6;
}

.child{
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
width: 25%;
float: left;
border: 1px solid #727272;
}

img{
height: 100%;
width: 100%;
}

As you can see the thumbnails are 25% of the width each row has 4 thumbnails next to each other and they float left so the fifth++ will go one row lower. On other devices like iPad they get the width 33% and on mobile 50% .

To get the same height as width i also use this code :

window.onresize = function(event) {
var cw = $('.child').width();
$('.child').css({
'height': cw + 'px'
});
}

Now what do i want ?:

I would like to have the option in my website that i can add those child divs/thumbnails. So when i create a block the block consists off :

<div class="child">
<a href="glow.html">
<img src="images/glow.jpg" onmouseover="src='images/glow_hover.jpg'" onmouseout="src='images/glow.jpg'" alt="glow">
</a>
</div>

with the option to choose the images and add a link. I tried using the image block but then the image does not use the child styling so it won't float left, be 25,33,50% etc.

I hope you understand what the problem is and hopefully there is a way to get this working .

Cheers,
Jocko