OK, thanks. I needed this so I’ve done it myself. Just sharing here in case anyone else wants to do it.
This makes the Full article image display as the first slide of the carousel, then the extra field images after. If there are no extra field images it just displays the single full image as normal, no carousel.
So first I made five additional extra fields (as explained in T3 docs) of ‘type="media"’ I called the jcontent_image1, jcontent_image2 etc.
Then I made a file where I could use the bootstrap carousel code:
templatesja_jasonhtmllayoutsjoomlacontentfulltext_image_portfolio_carousel.php
which looks like this:
<?php
/**
* @package Joomla.Site
* @subpackage Layout
*
* @copyright Copyright (C) 2005 - 2014 Open Source Matters, Inc. All rights reserved.
* @license GNU General Public License version 2 or later; see LICENSE.txt
*/
defined('_JEXEC') or die;
$params = $displayData['params'];
$item = $displayData['item'];
$images = json_decode($item->images);
$extrafields = $item->extrafields;
if (empty($images->image_fulltext)) return ;
$imgfloat = (empty($images->float_fulltext)) ? $params->get('float_fulltext') : $images->float_fulltext;
?>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<?php if ($extrafields['jcontent_image1']) { ?>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<?php }
if ($extrafields['jcontent_image2']) { ?>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
<?php }
if ($extrafields['jcontent_image3']) { ?>
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
<?php }
if ($extrafields['jcontent_image4']) { ?>
<li data-target="#carousel-example-generic" data-slide-to="4"></li>
<?php }
if ($extrafields['jcontent_image5']) { ?>
<li data-target="#carousel-example-generic" data-slide-to="5"></li>
<?php } ?>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="<?php echo htmlspecialchars($images->image_fulltext); ?>" alt="<?php echo htmlspecialchars($images->image_fulltext_alt); ?>">
</div>
<?php if ($extrafields['jcontent_image1']) { ?>
<div class="item">
<img src="<?php echo htmlspecialchars($extrafields['jcontent_image1']); ?>" alt="...">
</div>
<?php } ?>
<?php if ($extrafields['jcontent_image2']) { ?>
<div class="item">
<img src="<?php echo htmlspecialchars($extrafields['jcontent_image2']); ?>" alt="...">
</div>
<?php } ?>
<?php if ($extrafields['jcontent_image3']) { ?>
<div class="item">
<img src="<?php echo htmlspecialchars($extrafields['jcontent_image3']); ?>" alt="...">
</div>
<?php } ?>
<?php if ($extrafields['jcontent_image4']) { ?>
<div class="item">
<img src="<?php echo htmlspecialchars($extrafields['jcontent_image4']); ?>" alt="...">
</div>
<?php } ?>
<?php if ($extrafields['jcontent_image5']) { ?>
<div class="item">
<img src="<?php echo htmlspecialchars($extrafields['jcontent_image5']); ?>" alt="...">
</div>
<?php } ?>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Then changed the bit where the full article image is shown in templatesja_jasonhtmlcom_contentarticleporfolio.php
to this:
<div class="col-md-6 img-full">
<div class="inner">
<?php
$extraimagesexist = ($extrafields['jcontent_image1'] != '') || ($extrafields['jcontent_image2'] != '') || ($extrafields['jcontent_image3'] != '') || ($extrafields['jcontent_image4'] != '') || ($extrafields['jcontent_image5'] != '');
if ($extraimagesexist && $params->get('access-view')) {
$this->item->extrafields = $extrafields;
echo JLayoutHelper::render('joomla.content.fulltext_image_portfolio_carousel', array('item' => $this->item, 'params' => $params));
} else {
if ($params->get('access-view')):
echo JLayoutHelper::render('joomla.content.fulltext_image_portfolio', array('item' => $this->item, 'params' => $params));
endif;
} ?>
</div>
</div>
</div>
I got rid of the ‘use carousel?’ yes/no extra field as I always want them to display as a carousel if any extra images exist. Hope this helps someone.
Jen
Adam M 8 years, 9 months ago.
