Joomla! Template Override:

Pinterest-Bloglayout

Pinterest hat damit angefangen, viele ahmen dieses nach. Auch wir haben für Euch ein passendes Override von "com_content" "category" dafür.

Die Anzahl der dargestellten Spalten ergibt sich aus der Breite des Contentbereichs. Eine Spalte ist 18em breit.

Ihr braucht das Einleitungsbild und einen Einleitungstext.

Zusätzlich benötigt Ihr drei Sprachoverrides die Ihr anlegen müsst:

JOVER_TAGS = Wert: Schlagworte
JOVER_WRITTEN_BY = Wert: Geschrieben von
JOVER_CREATED = Wert: Erstellt am

Benötigte Override-Dateien

<?php
/**
 * @package Joomla.Site
 * @subpackage com_content
 *
 * @copyright Copyright (C) 2005 - 2015 Open Source Matters, Inc. All rights reserved.
 * @license GNU General Public License version 2 or later; see LICENSE.txt
 */
defined('_JEXEC') or die;
JHtml::addIncludePath(JPATH_COMPONENT . '/helpers');
JHtml::_('behavior.caption');
?>
<div class="jover-pinterest-blog-row">
 <div itemscope itemtype="http://schema.org/Blog">
 <?php if ($this->params->get('show_page_heading')) : ?>
 <h1> <?php echo $this->escape($this->params->get('page_heading')); ?> </h1>
 <?php endif; ?>


<?php if ($this->params->get('show_category_title', 1) or $this->params->get('page_subheading')) : ?>
 <h2> <?php echo $this->escape($this->params->get('page_subheading')); ?>
 <?php if ($this->params->get('show_category_title')) : ?>
 <span class="subheading-category"><?php echo $this->category->title; ?></span>
 <?php endif; ?>
 </h2>
 <?php endif; ?>


<?php if ($this->params->get('show_cat_tags', 1) && !empty($this->category->tags->itemTags)) : ?>
 <?php $this->category->tagLayout = new JLayoutFile('joomla.content.tags'); ?>
 <?php echo $this->category->tagLayout->render($this->category->tags->itemTags); ?>
 <?php endif; ?>


<?php if ($this->params->get('show_description', 1) || $this->params->def('show_description_image', 1)) : ?>
 <div class="category-desc clearfix">
 <?php if ($this->params->get('show_description_image') && $this->category->getParams()->get('image')) : ?>
 <img src="/<?php echo $this->category->getParams()->get('image'); ?>" alt="<?php echo htmlspecialchars($this->category->getParams()->get('image_alt')); ?>"/>
 <?php endif; ?>
 <?php if ($this->params->get('show_description') && $this->category->description) : ?>
 <?php echo JHtml::_('content.prepare', $this->category->description, '', 'com_content.category'); ?>
 <?php endif; ?>
 </div>
 <?php endif; ?>


<?php if (empty($this->lead_items) && empty($this->link_items) && empty($this->intro_items)) : ?>
 <?php if ($this->params->get('show_no_articles', 1)) : ?>
 <p><?php echo JText::_('COM_CONTENT_NO_ARTICLES'); ?></p>
 <?php endif; ?>
 <?php endif; ?>


<?php $leadingcount = 0; ?>
 <?php if (!empty($this->lead_items)) : ?>
 <div>
 <?php foreach ($this->lead_items as &$item) : ?>
 <div class="leading-<?php echo $leadingcount; ?><?php echo $item->state == 0 ? ' system-unpublished' : null; ?>"
 itemprop="blogPost" itemscope itemtype="http://schema.org/BlogPosting">
 <?php
 $this->item = & $item;
 echo $this->loadTemplate('item');
 ?>
 </div>
 <?php $leadingcount++; ?>
 <?php endforeach; ?>
 </div><!-- end items-leading -->
 <?php endif; ?>


<?php
 $introcount = (count($this->intro_items));
 $counter = 0;
 ?>


<?php if (!empty($this->intro_items)) : ?>
 <?php foreach ($this->intro_items as $key => &$item) : ?>
 <?php $rowcount = ((int) $key % (int) $this->columns) + 1; ?>
 <?php if ($rowcount == 1) : ?>
 <?php $row = $counter / $this->columns; ?>
 <div>
 <?php endif; ?>
 <div>
 <div class="item column-<?php echo $rowcount; ?><?php echo $item->state == 0 ? ' system-unpublished' : null; ?>"
 itemprop="blogPost" itemscope itemtype="http://schema.org/BlogPosting">
 <?php
 $this->item = & $item;
 echo $this->loadTemplate('item');
 ?>
 </div>
 <!-- end item -->
 <?php $counter++; ?>
 </div><!-- end span -->
 <?php if (($rowcount == $this->columns) or ( $counter == $introcount)) : ?>
 </div><!-- end row -->
 <?php endif; ?>
 <?php endforeach; ?>
 <?php endif; ?>


<?php if (!empty($this->link_items)) : ?>
 <div class="items-more">
 <?php echo $this->loadTemplate('links'); ?>
 </div>
 <?php endif; ?>


<?php if (!empty($this->children[$this->category->id]) && $this->maxLevel != 0) : ?>
 <div class="cat-children">
 <?php if ($this->params->get('show_category_heading_title_text', 1) == 1) : ?>
 <h3> <?php echo JTEXT::_('JGLOBAL_SUBCATEGORIES'); ?> </h3>
 <?php endif; ?>
 <?php echo $this->loadTemplate('children'); ?> </div>
 <?php endif; ?>
 <?php if (($this->params->def('show_pagination', 1) == 1 || ($this->params->get('show_pagination') == 2)) && ($this->pagination->get('pages.total') > 1)) : ?>
 <div class="pagination">
 <?php if ($this->params->def('show_pagination_results', 1)) : ?>
 <p class="counter pull-right"> <?php echo $this->pagination->getPagesCounter(); ?> </p>
 <?php endif; ?>
 <?php echo $this->pagination->getPagesLinks(); ?> </div>
 <?php endif; ?>
 </div>
</div>

<?php
/**
 * @package Joomla.Site
 * @subpackage Layout
 *
 * @copyright Copyright (C) 2005 - 2015 Open Source Matters, Inc. All rights reserved.
 * @license GNU General Public License version 2 or later; see LICENSE.txt
 */
defined('_JEXEC') or die;
// Create a shortcut for params.
$params = $this->item->params;
JHtml::addIncludePath(JPATH_COMPONENT . '/helpers/html');
$canEdit = $this->item->params->get('access-edit');
$info = $params->get('info_block_position', 0);
?>
<?php if ($this->item->state == 0 || strtotime($this->item->publish_up) > strtotime(JFactory::getDate()) || ((strtotime($this->item->publish_down) < strtotime(JFactory::getDate())) && $this->item->publish_down != JFactory::getDbo()->getNullDate())) :
 ?>
 <div class="system-unpublished">
 <?php endif; ?>
 <div class="jover-pinterest-blog-item">
 <div class="jover-pinterest-blog-well"> 
 <?php $images = json_decode($this->item->images); ?><img src="/<?php echo htmlspecialchars($images->image_intro); ?>" class="img-responsive" />
 <div class="jover-pinterest-blog-content">


<div class="jover-pinterest-blog-title">
 <?php echo JLayoutHelper::render('joomla.content.blog_style_default_item_title', $this->item); ?>
 </div>


<?php if (!$params->get('show_intro')) : ?>
 <?php echo $this->item->event->afterDisplayTitle; ?>
 <?php endif; ?>
 <?php echo $this->item->event->beforeDisplayContent; ?> <?php echo $this->item->introtext; ?>


<?php
 if ($params->get('show_readmore') && $this->item->readmore) :
 if ($params->get('access-view')) :
 $link = JRoute::_(ContentHelperRoute::getArticleRoute($this->item->slug, $this->item->catid, $this->item->language));
 else :
 $menu = JFactory::getApplication()->getMenu();
 $active = $menu->getActive();
 $itemId = $active->id;
 $link1 = JRoute::_('index.php?option=com_users&view=login&Itemid=' . $itemId);
 $returnURL = JRoute::_(ContentHelperRoute::getArticleRoute($this->item->slug, $this->item->catid, $this->item->language));
 $link = new JUri($link1);
 $link->setVar('return', base64_encode($returnURL));
 endif;
 ?>


<?php echo JLayoutHelper::render('joomla.content.readmore', array('item' => $this->item, 'params' => $params, 'link' => $link)); ?>


<?php endif; ?>
 <div class="jover-pinterest-blog-details">
 <?php if ($this->params->get('show_author')) : ?>
 <span class="bold"><?php echo JText::_('JOVER_WRITTEN_BY'); ?>:</span> <span><?php echo $this->item->author; ?></span><br />
 <?php endif; ?> 
 <?php if ($this->params->get('show_publish_date')) : ?>
 <span class="bold"><?php echo JText::_('JOVER_CREATED'); ?>:</span> <span><?php echo JHTML::_('date', $this->item->created, JText::_('DATE_FORMAT_LC1')); ?></span><br />
 <?php endif; ?>


<?php if ($params->get('show_tags') && !empty($this->item->tags->itemTags)) : ?>
 <span class="bold"><?php echo JText::_('JOVER_TAGS'); ?>:</span> <span><?php echo JLayoutHelper::render('joomla.content.tags', $this->item->tags->itemTags); ?></span>
<?php endif; ?>
 </div>
 </div>
 </div>
 </div>



 <?php if ($this->item->state == 0 || strtotime($this->item->publish_up) > strtotime(JFactory::getDate()) || ((strtotime($this->item->publish_down) < strtotime(JFactory::getDate())) && $this->item->publish_down != JFactory::getDbo()->getNullDate())) :
 ?>
 </div>
<?php endif; ?>


<?php echo $this->item->event->afterDisplayContent; ?>

/* j!-over Pinterest Bloglayout */


*, *:before, *:after {box-sizing: border-box !important;}


.jover-pinterest-blog-row {
column-width: 18em;
 -moz-column-width: 18em;
 -webkit-column-width: 18em;
column-gap: 1em;
 -moz-column-gap: 1em;
 -webkit-column-gap:1em; 
 
}


.jover-pinterest-blog-item {
 display: inline-block;
 margin-bottom: 10px;
 padding: 10px;
 width: 100%; 
 background-color: #ffffff;
 border: 1px solid #e5e7e7;
 -webkit-border-radius: 0px;
 -moz-border-radius: 0px;
 border-radius: 0px;
 -webkit-box-shadow: 3px 5px 0px #f7f7f7;
 -moz-box-shadow: 3px 5px 0px #f7f7f7;
 box-shadow: 3px 5px 0px #f7f7f7;
}


.jover-pinterest-blog-well {
 position:relative;
 display: block;
}


.jover-pinterest-blog-well img {
 min-width: 100%;
 width: auto;
 height: auto;
}


.jover-pinterest-blog-title {text-transform: uppercase; text-align: center; margin-top: 10px;}
.jover-pinterest-blog-title .page-header {padding-bottom: 0; margin: 0; border-bottom: none;}


.jover-pinterest-blog-content {line-height: 1.8;}


.jover-pinterest-blog-content p.readmore a.btn {
 padding: 0 14px;
 margin: 15px 0;
 line-height: 30px;
 background: black;
 vertical-align: middle;
 cursor: pointer;
 color: #FFF;
 text-shadow: none;
 background-color: #000;
 background-image: none;
 background-repeat: no-repeat;
 filter: none;
 border: none;
 -webkit-box-shadow: none;
 -moz-box-shadow: none;
 box-shadow: none;
}


.jover-pinterest-blog-details {
 background: #eaeaea;
 margin-top: 10px;
 padding: 5px;
}


.jover-pinterest-blog-details span.bold {font-weight: 700;}


.jover-pinterest-blog-details ul.inline, ol.inline {display: inline-block;}

Tonino Gerns

12.11.2018

04.03.2022

com_content

Hinweis

Pinterest-Bloglayout

Benötigte Override-Dateien