Moving the intro image before the article info (protostar template) - php

Question

I'm working on a website with Joomla 3.2.1 and the Protostar template.
I want the article image to be shown before the article info. The order I want is the following one:
article title
intro image
article info
article intro
I tried doing it changing the code on template.css, but it also moves the article info of articles with no intro image, so it isn't a good option for me.
I tried changing the .php files. For example, the default_item.php of the featured articles view. I copied the intro image's code, and pasted it over the article info's code, but the article info is still being shown over the intro image.
What can I do to put the intro image over the article info?
Here is the code for the article items file (default_item.php) in the featured articles page.
<?php
/**
* #package Joomla.Site
* #subpackage com_content
*
* #copyright Copyright (C) 2005 - 2013 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;
$images = json_decode($this->item->images);
$canEdit = $this->item->params->get('access-edit');
$info = $this->item->params->get('info_block_position', 0);
?>
<?php if ($this->item->state == 0) : ?>
<div class="system-unpublished">
<?php endif; ?>
<?php if ($params->get('show_title')) : ?>
<h2 class="item-title">
<?php if ($params->get('link_titles') && $params->get('access-view')) : ?>
<?php echo $this->escape($this->item->title); ?>
<?php else : ?>
<?php echo $this->escape($this->item->title); ?>
<?php endif; ?>
</h2>
<?php endif; ?>
<?php if ($this->item->state == 0) : ?>
<span class="label label-warning"><?php echo JText::_('JUNPUBLISHED'); ?></span>
<?php endif; ?>
<?php if ($params->get('show_print_icon') || $params->get('show_email_icon') || $canEdit) : ?>
<div class="btn-group pull-right"> <a class="btn dropdown-toggle" data-toggle="dropdown" href="#" role="button"> <span class="icon-cog"></span> <span class="caret"></span> </a>
<ul class="dropdown-menu">
<?php if ($params->get('show_print_icon')) : ?>
<li class="print-icon"> <?php echo JHtml::_('icon.print_popup', $this->item, $params); ?> </li>
<?php endif; ?>
<?php if ($params->get('show_email_icon')) : ?>
<li class="email-icon"> <?php echo JHtml::_('icon.email', $this->item, $params); ?> </li>
<?php endif; ?>
<?php if ($canEdit) : ?>
<li class="edit-icon"> <?php echo JHtml::_('icon.edit', $this->item, $params); ?> </li>
<?php endif; ?>
</ul>
</div>
<?php endif; ?>
<?php // Todo Not that elegant would be nice to group the params ?>
<?php $useDefList = ($params->get('show_modify_date') || $params->get('show_publish_date') || $params->get('show_create_date')
|| $params->get('show_hits') || $params->get('show_category') || $params->get('show_parent_category') || $params->get('show_author') ); ?>
<?php if ($useDefList && ($info == 0 || $info == 2)) : ?>
<dl class="article-info muted">
<dt class="article-info-term">
<?php echo JText::_('COM_CONTENT_ARTICLE_INFO'); ?>
</dt>
<?php if ($params->get('show_author') && !empty($this->item->author )) : ?>
<dd class="createdby">
<?php $author = $this->item->author; ?>
<?php $author = ($this->item->created_by_alias ? $this->item->created_by_alias : $author); ?>
<?php if (!empty($this->item->contactid ) && $params->get('link_author') == true) : ?>
<?php
echo JText::sprintf('COM_CONTENT_WRITTEN_BY',
JHtml::_('link', JRoute::_('index.php?option=com_contact&view=contact&id='.$this->item->contactid), $author)
); ?>
<?php else :?>
<?php echo JText::sprintf('COM_CONTENT_WRITTEN_BY', $author); ?>
<?php endif; ?>
</dd>
<?php endif; ?>
<?php if ($params->get('show_parent_category') && !empty($this->item->parent_slug)) : ?>
<dd class="parent-category-name">
<?php $title = $this->escape($this->item->parent_title);
$url = ''.$title.'';?>
<?php if ($params->get('link_parent_category') && !empty($this->item->parent_slug)) : ?>
<?php echo JText::sprintf('COM_CONTENT_PARENT', $url); ?>
<?php else : ?>
<?php echo JText::sprintf('COM_CONTENT_PARENT', $title); ?>
<?php endif; ?>
</dd>
<?php endif; ?>
<?php if ($params->get('show_category')) : ?>
<dd class="category-name">
<?php $title = $this->escape($this->item->category_title);
$url = ''.$title.'';?>
<?php if ($params->get('link_category') && $this->item->catslug) : ?>
<?php echo JText::sprintf('COM_CONTENT_CATEGORY', $url); ?>
<?php else : ?>
<?php echo JText::sprintf('COM_CONTENT_CATEGORY', $title); ?>
<?php endif; ?>
</dd>
<?php endif; ?>
<?php if ($params->get('show_publish_date')) : ?>
<dd class="published">
<span class="icon-calendar"></span> <?php echo JText::sprintf('COM_CONTENT_PUBLISHED_DATE_ON', JHtml::_('date', $this->item->publish_up, JText::_('DATE_FORMAT_LC3'))); ?>
</dd>
<?php endif; ?>
<?php if ($info == 0) : ?>
<?php if ($params->get('show_modify_date')) : ?>
<dd class="modified">
<span class="icon-calendar"></span>
<?php echo JText::sprintf('COM_CONTENT_LAST_UPDATED', JHtml::_('date', $this->item->modified, JText::_('DATE_FORMAT_LC3'))); ?>
</dd>
<?php endif; ?>
<?php if ($params->get('show_create_date')) : ?>
<dd class="create">
<span class="icon-calendar"></span>
<?php echo JText::sprintf('COM_CONTENT_CREATED_DATE_ON', JHtml::_('date', $this->item->created, JText::_('DATE_FORMAT_LC3'))); ?>
</dd>
<?php endif; ?>
<?php if ($params->get('show_hits')) : ?>
<dd class="hits">
<span class="icon-eye-open"></span>
<?php echo JText::sprintf('COM_CONTENT_ARTICLE_HITS', $this->item->hits); ?>
</dd>
<?php endif; ?>
<?php endif; ?>
</dl>
<?php endif; ?>
<?php if (isset($images->image_intro) && !empty($images->image_intro)) : ?>
<?php $imgfloat = (empty($images->float_intro)) ? $params->get('float_intro') : $images->float_intro; ?>
<div class="pull-<?php echo htmlspecialchars($imgfloat); ?> item-image"> <img
<?php if ($images->image_intro_caption):
echo 'class="caption"'.' title="' .htmlspecialchars($images->image_intro_caption) .'"';
endif; ?>
src="<?php echo htmlspecialchars($images->image_intro); ?>" alt="<?php echo htmlspecialchars($images->image_intro_alt); ?>"/> </div>
<?php endif; ?>
<?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 ($useDefList && ($info == 1 || $info == 2)) : ?>
<dl class="article-info muted">
<dt class="article-info-term">
<?php echo JText::_('COM_CONTENT_ARTICLE_INFO'); ?>
</dt>
<?php if ($info == 1) : ?>
<?php if ($params->get('show_author') && !empty($this->item->author )) : ?>
<dd class="createdby">
<?php $author = $this->item->author; ?>
<?php $author = ($this->item->created_by_alias ? $this->item->created_by_alias : $author); ?>
<?php if (!empty($this->item->contactid ) && $params->get('link_author') == true) : ?>
<?php
echo JText::sprintf('COM_CONTENT_WRITTEN_BY',
JHtml::_('link', JRoute::_('index.php?option=com_contact&view=contact&id='.$this->item->contactid), $author)
); ?>
<?php else : ?>
<?php echo JText::sprintf('COM_CONTENT_WRITTEN_BY', $author); ?>
<?php endif; ?>
</dd>
<?php endif; ?>
<?php if ($params->get('show_parent_category') && !empty($this->item->parent_slug)) : ?>
<dd class="parent-category-name">
<?php $title = $this->escape($this->item->parent_title);
$url = ''.$title.'';?>
<?php if ($params->get('link_parent_category') && $this->item->parent_slug) : ?>
<?php echo JText::sprintf('COM_CONTENT_PARENT', $url); ?>
<?php else : ?>
<?php echo JText::sprintf('COM_CONTENT_PARENT', $title); ?>
<?php endif; ?>
</dd>
<?php endif; ?>
<?php if ($params->get('show_category')) : ?>
<dd class="category-name">
<?php $title = $this->escape($this->item->category_title);
$url = ''.$title.'';?>
<?php if ($params->get('link_category') && $this->item->catslug) : ?>
<?php echo JText::sprintf('COM_CONTENT_CATEGORY', $url); ?>
<?php else : ?>
<?php echo JText::sprintf('COM_CONTENT_CATEGORY', $title); ?>
<?php endif; ?>
</dd>
<?php endif; ?>
<?php if ($params->get('show_publish_date')) : ?>
<dd class="published">
<span class="icon-calendar"></span> <?php echo JText::sprintf('COM_CONTENT_PUBLISHED_DATE_ON', JHtml::_('date', $this->item->publish_up, JText::_('DATE_FORMAT_LC3'))); ?>
</dd>
<?php endif; ?>
<?php endif; ?>
<?php if ($params->get('show_create_date')) : ?>
<dd class="create">
<span class="icon-calendar"></span> <?php echo JText::sprintf('COM_CONTENT_CREATED_DATE_ON', JHtml::_('date', $this->item->created, JText::_('DATE_FORMAT_LC3'))); ?>
</dd>
<?php endif; ?>
<?php if ($params->get('show_modify_date')) : ?>
<dd class="modified">
<span class="icon-calendar"></span>
<?php echo JText::sprintf('COM_CONTENT_LAST_UPDATED', JHtml::_('date', $this->item->modified, JText::_('DATE_FORMAT_LC3'))); ?>
</dd>
<?php endif; ?>
<?php if ($params->get('show_hits')) : ?>
<dd class="hits">
<span class="icon-eye-open"></span> <?php echo JText::sprintf('COM_CONTENT_ARTICLE_HITS', $this->item->hits); ?>
</dd>
<?php endif; ?>
</dl>
<?php if ($this->params->get('show_tags', 1)) : ?>
<?php $this->item->tagLayout = new JLayoutFile('joomla.content.tags'); ?>
<?php echo $this->item->tagLayout->render($this->item->tags->itemTags); ?>
<?php endif; ?>
<?php endif; ?>
<?php if ($params->get('show_readmore') && $this->item->readmore) :
if ($params->get('access-view')) :
$link = JRoute::_(ContentHelperRoute::getArticleRoute($this->item->slug, $this->item->catid));
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));
$link = new JUri($link1);
$link->setVar('return', base64_encode($returnURL));
endif; ?>
<p class="readmore"><a class="btn" href="<?php echo $link; ?>"> <span class="icon-chevron-right"></span>
<?php if (!$params->get('access-view')) :
echo JText::_('COM_CONTENT_REGISTER_TO_READ_MORE');
elseif ($readmore = $this->item->alternative_readmore) :
echo $readmore;
if ($params->get('show_readmore_title', 0) != 0) :
echo JHtml::_('string.truncate', ($this->item->title), $params->get('readmore_limit'));
endif;
elseif ($params->get('show_readmore_title', 0) == 0) :
echo JText::sprintf('COM_CONTENT_READ_MORE_TITLE');
else :
echo JText::_('COM_CONTENT_READ_MORE');
echo JHtml::_('string.truncate', ($this->item->title), $params->get('readmore_limit'));
endif; ?>
</a></p>
<?php endif; ?>
<?php if ($this->item->state == 0) : ?>
</div>
<?php endif; ?>
<?php echo $this->item->event->afterDisplayContent; ?>

Answer 1

Have you tried to override the template?
Please read the documentation on the link above. They also give examples of the template you just mentioned, for example editing the html/com_content/article/default.php.