Cacher is the code snippet organizer for pro developers

{namespace v=Tx_Vhs_ViewHelpers}

<nav class="image-nav clearfix">
  <v:page.menu.directory  pages="{page.uid}">
    <f:for each="{menu}" as="item">
      <div class="image-nav-item">
        <f:link.page pageUid="{item.uid}"
           title="{item.title}"
           class="{f:if(condition: item.active, then: ' active', else: '')}">
          <div class="image-nav-title">
            {item.title}
          </div>
          <v:page.resources.fal table="pages" field="media" uid="{item.uid}" as="images">
            {images -> v:iterator.first() -> v:variable.set(name: 'image')} 
            <f:if condition="{v:media.exists(then: '1', else: '', file: '{image.url}')}">
              <f:then>
                <f:image src="{image.url}" alt="{image.alternative}{f:if(condition: image.description, then: ' {image.description}', else: '')}" class="img-responsive" width="214" />
                </f:then>
                <f:else>
                  <f:image src="/fileadmin/user_upload/dummy-nav.jpg" alt="{image.alternative}{f:if(condition: image.description, then: ' {image.description}', else: '')}" class="img-responsive" width="214" />
                </f:else>
              </f:if>
            </v:page.resources.fal>
          </f:link.page> 
        </div>
      </f:for>
    </v:page.menu.directory>
</nav>