- Posts: 2
COMMUNITY FORUM
- Forum
- K2 Community Forum
- English K2 Community
- K2 table layout with image item title and extra fields
K2 table layout with image item title and extra fields
- Muhammad Mansoor Yousaf
- Topic Author
- Offline
- New Member
Less
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%;"> </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 -->
<?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%;"> </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
- Offline
- Platinum Member
Less
More
- Posts: 15920
9 years 8 months ago #136410
by Krikor Boghossian
JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)
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)
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:
Let me know if that did the trick.
<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
- Topic Author
- Offline
- New Member
Less
More
- Posts: 2
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?
<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
- Offline
- Platinum Member
Less
More
- Posts: 15920
9 years 8 months ago #136440
by Krikor Boghossian
JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)
Replied by Krikor Boghossian on topic K2 table layout with image item title and extra fields
This will generate the date.
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.
<?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.
- Forum
- K2 Community Forum
- English K2 Community
- K2 table layout with image item title and extra fields