Concerts layout

: mod_articles_category

Live demo

Concerts layout


Jazz Session au Birdland

Birdland - 22:30

30Mai


Tickets

Jazz session

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

Diana Krall

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;
}
A PROPOS DE L'AUTEUR :
Webmaster freelance passionné par Joomla 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.
Daniel est également très impliqué dans la communauté Joomla depuis 2014 en étant membre actif de plusieurs projets, conférencier et fondateur du JUG Breizh.