Concerts layout

Live demo

Concerts layout

Jazz Session au Birdland

Birdland - 22:30

30Mai

Tickets

Sed scelerisque ultricies libero, in lacinia lacus mattis eget. Donec in libero quis ligula dictum lobortis. Donec hendrerit, enim ut pulvinar dapibus, tortor dui blandit nunc, non varius lorem mi at augue. 

Diana Krall European Tour

Gent Jazz Festival - 22:30

05Juil

Tickets

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque ultricies libero, in lacinia lacus mattis eget. Donec in libero quis ligula dictum lobortis. Donec hendrerit, enim ut pulvinar dapibus, tortor dui blandit nunc, non varius lorem mi at augue. 

Markup

<?php
	/**
		* @package     Joomla.Site
		* @subpackage  mod_articles_category
		* @Author 	   web-eau.net
		* @copyright   Copyright (C) 2005 - 2018 Open Source Matters, Inc. All rights reserved.
		* @license     GNU General Public License version 2 or later; see LICENSE.txt
	*/
	defined('_JEXEC') or die;
?>
<div class="container">
	<?php foreach ($list as $item) : ?>
      <div class="row pb-4">	
		<?php $item->urls = new JRegistry($item->urls); ?>
        <div class="col-12">
          <h3 class="ml-2">
				<?php if ($params->get('link_titles') == 1) : ?>
				<a class="mod-articles-category-title <?php echo $item->active; ?>" href="/<?php echo $item->link; ?>"><?php echo $item->title; ?></a>
				<?php else : ?>
				<?php echo $item->title; ?>
				<?php endif; ?>
			</h3>	
		<p class="ml-2"><i class="fa fa-map-marker"></i> <small><?php echo $item->urls->get('urlctext'); ?> - <i class="fa fa-clock-o"></i> <?php echo JHtml::_('date', $item->created, "H:i"); ?></small></p>
		</div>
        <div class="w-100"></div> 
		<div class="col-md-1 text-center">			
			<p class="calendar">
				<?php echo JHtml::_('date', $item->created, "d"); ?><em><?php echo JHtml::_('date', $item->created, "M"); ?></em> 
			</p>
			<br />
			<p class="mt-5">
				<a class="btn btn-success" href="/<?php echo $item->urls->get('urlbtext'); ?>" role="button">Tickets</a>
			</p>
		</div>
		<div class="col-md-6">					
			<?php
				$article_images  = json_decode($item->images);
				$article_image   = '';
				$article_image_alt   = '';
				if(isset($article_images->image_intro) && !empty($article_images->image_intro)) {
					$article_image  = $article_images->image_intro;
					$article_image_alt  = $article_images->image_intro_alt;
				}?>  					
				<img class="img-fluid img-thumbnail" src="/<?php echo $article_image; ?>" alt="<?php echo $article_image_alt; ?>" >		
           		<?php if ($params->get('show_introtext')) : ?>
					<p class="font-weight-light pt-4 mod-articles-category-introtext">
					<?php echo $item->displayIntrotext; ?>
					</p>
				<?php endif; ?>      
		</div>		
		<div class="col-md-5 maps-event embed-responsive">
			<iframe class="embed-responsive-item" src="/<?php echo $item->urls->get('urlatext'); ?>" width="400" height="400" style="border:0"></iframe>
		</div>
	</div>
	<?php endforeach; ?>
</div>

CSS

/* calendar css source: http://codepen.io/chelovekov/pen/ayKAn */
.calendar {
margin:.25em 10px 10px 0;
padding-top:5px;
float:left;
width:80px;
background:#ededef;
background:-webkit-gradient(linear,left top,left bottom,from(#ededef),to(#ccc));
background:-moz-linear-gradient(top,#ededef,#ccc);
font:bold 30px/60px Arial Black,Arial,Helvetica,sans-serif;
text-align:center;
color:#000;
text-shadow:#fff 0 1px 0;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
position:relative;
-moz-box-shadow:0 2px 2px #888;
-webkit-box-shadow:0 2px 2px #888;
box-shadow:0 2px 2px #888
}
.calendar em {
display:block;
font:normal bold 11px/30px Arial,Helvetica,sans-serif;
color:#fff;
text-shadow:#00365a 0 -1px 0;
background:#04599a;
background:-webkit-gradient(linear,left top,left bottom,from(#04599a),to(#00365a));
background:-moz-linear-gradient(top,#04599a,#00365a);
-moz-border-radius-bottomright:3px;
-webkit-border-bottom-right-radius:3px;
border-bottom-right-radius:3px;
-moz-border-radius-bottomleft:3px;
-webkit-border-bottom-left-radius:3px;
border-bottom-left-radius:3px;
border-top:1px solid #00365a
}
.calendar:before,.calendar:after {
content:'';
float:left;
position:absolute;
top:5px;
width:8px;
height:8px;
background:#111;
z-index:1;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
-moz-box-shadow:0 1px 1px #fff;
-webkit-box-shadow:0 1px 1px #fff;
box-shadow:0 1px 1px #fff
}
.calendar:before {
left:11px
}
.calendar:after {
right:11px
}
.calendar em:before,.calendar em:after {
content:'';
float:left;
position:absolute;
top:-5px;
width:4px;
height:14px;
background:#dadada;
background:-webkit-gradient(linear,left top,left bottom,from(#f1f1f1),to(#aaa));
background:-moz-linear-gradient(top,#f1f1f1,#aaa);
z-index:2;
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px
}
.calendar em:before {
left:13px
}
.calendar em:after {
right:13px
}
.maps-event {
height: 400px;
}

Daniel Dubois

Passionné par le Web depuis 2007, Daniel défend la veuve et l'orphelin du web en créant des sites respectueux du W3C. Fort d'une expérience de plusieurs années, il partage ses connaissances dans un état d'esprit open source.
Très impliqué dans la communauté Joomla depuis 2014, il est actif au sein de plusieurs projets, conférencier et fondateur du JUG Breizh.