图库中的自定义图像布局

Question

我需要以这种方式安排我的画廊：


我想过这样的事情：

BUT！有一个很大的问题。不要说我的Bootstrap知识，我需要在'shoper'中使用它，这是一种电子商务工具。它使用smarty来获取产品并在循环中以我喜欢的方式显示它们。

代码如下所示：

// huge example

{foreach product......}
  <img src="product-n" />
  <span>Product-n Title</span>
{/foreach}

使用smarty（或任何其他循环）在bootstrap中安排图像真的很难。

我知道我的帖子中没有很多关于它的信息，但是让我知道我应该说些什么，所以你们可以帮助我。