I've done some extra research and the following worked for me:
foreach(glob('cms/images/realisaties/*', GLOB_ONLYDIR) as $dir) {
$dirname = basename($dir);
$mappen[] = $dirname;
}
foreach($mappen as $map){
$search_dir = "cms/images/realisaties/".$map;
$images = glob("$search_dir/*");
sort($images);
if (count($images) > 0) {
$img = $images[0];
echo '
<!--product item-->
<div class="product_item hit w_xs_full">
<figure class="r_corners photoframe type_2 t_align_c tr_all_hover shadow relative">
<!--product preview-->
<a href="realisaties/40-realisaties/'.$map.'" class="d_block relative wrapper pp_wrap m_bottom_15" >
<img src="'.$img.'" class="tr_all_hover" alt="0" style="max-height:242px">
</a>
<!--description and price of product-->
<figcaption>
<h5 class="m_bottom_10"><a href="realisaties/40-realisaties/'.$map.'" class="color_dark">'.ucfirst($map).'</a></h5>
<a href="realisaties/40-realisaties/'.$map.'"><button class="button_type_12 bg_scheme_color r_corners tr_all_hover color_light mw_0 m_bottom_15">Bekijk</button></a>
</figcaption>
</figure>
</div>
';
} else {
// possibly display a placeholder image?
}
}
}
The folder containing the folders that had the images is "realisaties". With GLOB I first went through them. After that I put all the folder names in an array.
With that array I made another loop. I used glob again to look what is inside that folder. After that I sorted the images, and set the preview image to be the last added.