Keyword

K2 table layout with image item title and extra fields

  • Muhammad Mansoor Yousaf
  • Muhammad Mansoor Yousaf's Avatar Topic Author
  • Offline
  • New Member
More
9 years 8 months ago #136405 by Muhammad Mansoor Yousaf
K2 table layout with image item title and extra fields was created by Muhammad Mansoor Yousaf
I am using K2 to build a tabular display of data. I created the code with the help of different forums and succeded in creating tabular layout for K2. The only problem is I want to display xsmall image and date in two different columns. Here is the code i am using in category.php. Please guide how can i display item image and date along with other fields.

<?php
/**
* @version 2.6.x
* @package K2
* @author JoomlaWorks www.joomlaworks.net
* @copyright Copyright (c) 2006 - 2014 JoomlaWorks Ltd. All rights reserved.
* @license GNU/GPL license: www.gnu.org/copyleft/gpl.html
*/

// no direct access
defined('_JEXEC') or die;
?>

<?php if($this->params->get('catTitle')): ?>
<!-- Category title -->
<h2><?php echo $this->category->name; ?><?php if($this->params->get('catTitleItemCounter')) echo ' ('.$this->pagination->total.')'; ?></h2>
<?php endif; ?>
<hr>
<?php if($this->params->get('catDescription')): ?>
<!-- Category description -->
<p><?php echo $this->category->description; ?></p>
<?php endif; ?>


<?php
$this->items = array_merge($this->leading, $this->primary, $this->secondary, $this->links);
?>

<!-- Start K2 Category Layout -->
<div id="k2Container" class="itemListView<?php if($this->params->get('pageclass_sfx')) echo ' '.$this->params->get('pageclass_sfx'); ?>">
<div style= "color: #000;" class="table-responsive">
<table class="table table-striped" width="100%">
<tr style="text-align: center; vertical-align: center;">
<th style="text-align: center; vertical-align: center;"><h6>Image</h6></th>

<th style="text-align: left; vertical-align: center;"><h6>Organization</h6></th>

<th style="text-align: left; vertical-align: center;"><h6>Location</h6></th>
<th style="text-align: right; vertical-align: center;"><h6>Newspaper</h6></th>

<th style="text-align: right; vertical-align: center;"><h6>Date</h6></th>
</tr>
<?php foreach($this->items as $item): ?>
<tr>

<td style="text-align: left; width: 10%;">&nbsp; </td>

<td style="text-align: left; width: 25%;"><a href="<?php echo $item->link; ?>"> <?php echo $item->title ;?></a></td>
<td style="text-align: center; width: 10%;"><?php echo $item->extraFields->Location->value ;?></td>

<td style="text-align: right; width: 10%;"><?php echo $item->extraFields->Newspaper->value ;?></td>

<td style="text-align: right; width: 10%;"><?php echo $item->extraFields->Date->value ;?></td>
</tr>
<?php endforeach; ?>
</table>
</div>
</div>
<!-- Pagination -->
<?php if(count($this->pagination->getPagesLinks())): ?>
<div class="k2Pagination pagination pagination-mini">
<?php if($this->params->get('catPagination')) echo $this->pagination->getPagesLinks(); ?>
<div class="clr"></div>
<?php if($this->params->get('catPaginationResults')) echo $this->pagination->getPagesCounter(); ?>
</div>
<?php endif; ?>

</div>
</div>
<!-- End K2 Category Layout -->

Please Log in or Create an account to join the conversation.

  • Krikor Boghossian
  • Krikor Boghossian's Avatar
  • Offline
  • Platinum Member
More
9 years 8 months ago #136410 by Krikor Boghossian
Replied by Krikor Boghossian on topic K2 table layout with image item title and extra fields
This is the code that generates the image (with a link)
<a href="<?php echo $this->item->link; ?>" title="<?php if(!empty($this->item->image_caption)) echo K2HelperUtilities::cleanHtml($this->item->image_caption); else echo K2HelperUtilities::cleanHtml($this->item->title); ?>">
			    	<img src="<?php echo $this->item->image; ?>" alt="<?php if(!empty($this->item->image_caption)) echo K2HelperUtilities::cleanHtml($this->item->image_caption); else echo K2HelperUtilities::cleanHtml($this->item->title); ?>" style="width:<?php echo $this->item->imageWidth; ?>px; height:auto;" />
			    </a>


The image is handled from the category's settings.
Since you merged the primary, secondary etc items you might need to hardcode a size.

Example:
<a href="<?php echo $this->item->link; ?>" title="<?php if(!empty($this->item->image_caption)) echo K2HelperUtilities::cleanHtml($this->item->image_caption); else echo K2HelperUtilities::cleanHtml($this->item->title); ?>">
	<img src="<?php echo $this->item->imageXSmall; ?>" alt="<?php if(!empty($this->item->image_caption)) echo K2HelperUtilities::cleanHtml($this->item->image_caption); else echo K2HelperUtilities::cleanHtml($this->item->title); ?>" />
</a>

Let me know if that did the trick.

JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)

Please Log in or Create an account to join the conversation.

  • Muhammad Mansoor Yousaf
  • Muhammad Mansoor Yousaf's Avatar Topic Author
  • Offline
  • New Member
More
9 years 8 months ago - 9 years 8 months ago #136416 by Muhammad Mansoor Yousaf
Replied by Muhammad Mansoor Yousaf on topic K2 table layout with image item title and extra fields
I already did this trick before asking on thi s forum but It didn't worked. Let me show you where I added this code. I might entered in wrong place.

<td style="text-align: left; width: 10%;"><a href="<?php echo $this->item->link; ?>" title="<?php if(!empty($this->item->image_caption)) echo K2HelperUtilities::cleanHtml($this->item->image_caption); else echo K2HelperUtilities::cleanHtml($this->item->title); ?>">
<img src="<?php echo $this->item->imageXSmall; ?>" alt="<?php if(!empty($this->item->image_caption)) echo K2HelperUtilities::cleanHtml($this->item->image_caption); else echo K2HelperUtilities::cleanHtml($this->item->title);?>" />
</a> </td>

and one more thing you didn't informed me about adding date?
Last edit: 9 years 8 months ago by Muhammad Mansoor Yousaf. Reason: additonal information added

Please Log in or Create an account to join the conversation.

  • Krikor Boghossian
  • Krikor Boghossian's Avatar
  • Offline
  • Platinum Member
More
9 years 8 months ago #136440 by Krikor Boghossian
Replied by Krikor Boghossian on topic K2 table layout with image item title and extra fields
This will generate the date.
<?php if($this->item->params->get('catItemDateCreated')): ?>
      <!-- Date created -->
      <span class="liItemDateCreated catItemDateCreated">
        <?php echo JHTML::_('date', $this->item->created , JText::_('K2_DATE_FORMAT_LC2')); ?>
      </span>
      <?php endif; ?>

You can download the latest version of K2 and open the category_item.php file and c/p all the elements you need in your table cells.

Finally I would suggest that you K2's default image code.

JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)

Please Log in or Create an account to join the conversation.


Powered by Kunena Forum