We blog on many topics around Typo3 and Java / J2EE

Several pages of this website are based on the Typo3 extension "Grid Extension" and the JavaScript grid layout library "Masonry". With "Masonry" you can place a grid element to a specific location within a grid on the page. The library is available at http://masonry.desandro.com/.

Typo3

On the page the "Grid Element' type is appropriate. In the section "Setup" of template following lines have to be added:

tt_content.gridelements_pi1.20.10.setup {
  # ID of gridelement
  3 < lib.gridelements.defaultGridSetup
  3 {
    wrap = <ul class="container masonry">|</ul>
    columns {
      # colPos ID
      1 < .default
      1.wrap = <li class="item masonry-type-1">|</li>
      2 < .default
      2.wrap = <li class="item masonry-type-2">|</li>
      3 < .default
      3.wrap = <li class="item masonry-type-3">|</li>
      4 < .default
      4.wrap = <li class="item masonry-type-3">|</li>
      5 < .default
      5.wrap = <li class="item masonry-type-3">|</li>
    }
  }
}

And the HTML Code of one of the grid elements

<LINK 218>
<noscript data-large="fileadmin/templates/img/site/mission-large.jpg"
          data-small="fileadmin/templates/img/site/mission-small.jpg">
          <img alt="" src="fileadmin/templates/img/site/mission-small.jpg" />
</noscript>
<div class="text">
<h3>Mission</h3>
<h1>We develop solutions for digital communications. Tailored to your requirements.
With state-of-art technologies.</h1>
</div>
</LINK>

JQuery

$(document).ready(function() {
    $('.container').masonry({
        itemSelector: '.item',
        gutterWidth: 12,
        columnWidth: 320,
        isAnimated: true
    });
});

CSS

/* Masonry */

.masonry-type-1 {
  width: 652px;
  height: 290px;
  overflow: hidden;
}

.masonry-type-2,
.masonry-type-3 {
  width: 320px;
  height: 290px;
  overflow: hidden;
}

.masonry .item {
  display: inline-block;
  float: left;
  margin: 0 0 12px;
  background-color: #ececec;
}

.masonry .item img {
  transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -webkit-transition:  all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
}

.masonry .item:hover img {
  transform: scale(1.1);
  -ms-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -o-transform: scale(1.1);
  zoom: 1.1\9; /* IE 8 */
  transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -webkit-transition:  all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
}

.masonry .item. a{
  display: block;
  width: 100%;
  height: 100%;
}

.masonry .item .text {
  position: absolute;
  bottom: 5px;
  left1: 16px;
  margin: 16px;
}

.masonry .item h3 {
  background-color: #000;
  color: #fff;
  font-size: 11px;
  line-height: 14px;
  font-weight: bold;
  text-transform: uppercase;
  padding: 3px 6px;
  margin-bottom: 5px;
  display: inline-block;
  font-family: Interstate, Arial, Verdana, Helvetica, Sans-Serif;
}

.masonry .item h1, .masonry .item h2 {
  color: #fff;
  font-size: 36px;
  font-weight: bold;
  line-height: 36px;
  margin: 0;
}

.masonry .inverse h1, .masonry .inverse h2 {
  color: #8FB50B !important;
}

Archive

2016 (5)

May (4)

January (1)

2015 (2)

November (1)

May (1)

2014 (1)

April (1)

2012 (3)

May (3)