COMMUNITY FORUM

Keyword
  1. Forum
  3. K2 Community Forum
  5. English K2 Community
  7. Please help me figure out how to make this layout

Please help me figure out how to make this layout

  • Uldis
  • Uldis's Avatar Topic Author
  • Offline
  • Senior Member
More
12 years 2 months ago - 12 years 2 months ago #62950 by Uldis
Please help me figure out how to make this layout was created by Uldis
hello,

I have managed to make this category layout using custom template, please see image below.


You can also see this on site - Site


But I would really want to have a layout like this, please see image below,


The problem I'm facing is that in K2 you can only assign 1 extra field to each category :(

I found this module for k2 Link
I'm hoping that it may be possible using this mod, but I'm not quite sure how it works, there aren't a lot of information about this mod.
Attachments:

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

More
12 years 2 months ago #62951 by william white
Replied by william white on topic Re: Please help me figure out how to make this layout
I havent tried the module yet, but i would try to get a template and position the content area to the left with two grid positions to the left and publish two seperate modules one in each grid position...

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

More
12 years 2 months ago #62952 by Aaron
Replied by Aaron on topic Re: Please help me figure out how to make this layout
I am actually building a template in a similar manner.

Since I do not know your level of php or css coding, I will throw up some of the code and if you have problems putting into your template, you can repost...

1. Image aligned via float: left left in css - do not float: clear after this
2. Not sure if you are using a DIV to align next to the image.. if so, you float: left as well. Do not clear before or after this step
3. Extra field 1 also float left and no clear afterward
4. Extra field 2 float left and then you can clear afterward.
Optionally, you can float:right the 2 extra fields without clearing in between.

- Consider FLOAT like building columns and rows... without clearing, another column is formed and a new row if you do clear.


Okay.. so now the code:

You said you already had the image, text and field 1 set.. It sounds like, though you have not broken down the fields individually... here is how I did it based on research on this board and help through other posts:

You start with creating the arrays.. one for using the IDs and I found it helpful to create one for the names too:
					

					


Aaron :)

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

  • Uldis
  • Uldis's Avatar Topic Author
  • Offline
  • Senior Member
More
12 years 2 months ago - 12 years 2 months ago #62953 by Uldis
Replied by Uldis on topic Re: Please help me figure out how to make this layout
Thank you for responses guys!

Williams idea would be simple to implement, but I would have to create A LOT of modules since I will need quite a few items with 2 extra fields.

Aaron, css part in perfectly understandable, php at the moment is my biggest problem, I can sometimes understand what the code does, and paste it where I need too but thats about it :( I really want to find time to learn php, but that another story.

I probably haven't broken down fields individually, I used mostly css to achieve this layout - Site

I'm assuming that code would go into - category_item.php

But how would I control the content of second extra field ? As I would need it different for each item.

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

More
12 years 2 months ago #62954 by Aaron
Replied by Aaron on topic Re: Please help me figure out how to make this layout
Uldis,

Why don't you post your category_item.php.. I will take a peek..
Aaron :)

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

  • Uldis
  • Uldis's Avatar Topic Author
  • Offline
  • Senior Member
More
12 years 2 months ago - 12 years 2 months ago #62955 by Uldis
Replied by Uldis on topic Re: Please help me figure out how to make this layout
I added first piece of code on line 21 and second on line 164.
<?php
/**
 * @version		$Id: category_item.php 1251 2011-10-19 17:50:13Z joomlaworks $
 * @package		K2
 * @author		JoomlaWorks http://www.joomlaworks.gr
 * @copyright	Copyright (c) 2006 - 2011 JoomlaWorks Ltd. All rights reserved.
 * @license		GNU/GPL license: http://www.gnu.org/copyleft/gpl.html
 */

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

// Define default image size (do not change)
K2HelperUtilities::setDefaultImage($this->item, 'itemlist', $this->params);

?>

<!-- Start K2 Item Layout -->
<div class="catItemView group<?php echo ucfirst($this->item->itemGroup); ?><?php echo ($this->item->featured) ? ' catItemIsFeatured' : ''; ?><?php if($this->item->params->get('pageclass_sfx')) echo ' '.$this->item->params->get('pageclass_sfx'); ?>">

<!-- Call to prepare extra field IDs --> 
          <?php 
     //convertArray to use ids as key
          $extrafieldsid = array();
          foreach($this->item->extra_fields as $itemid)
          {    
          $extrafieldsid[$itemid->id] = $itemid->value;
          }   
          ?>
<!-- Call to prepare extra field labels -->
           <?php 
     //convertArray to use labels as key
          $extrafieldslabels = array();
          foreach($this->item->extra_fields as $itemlabel)
          {    
          $extrafieldslabels[$itemlabel->id] = $itemlabel->name;
          }   
          ?>

	<!-- Plugins: BeforeDisplay -->
	<?php echo $this->item->event->BeforeDisplay; ?>

	<!-- K2 Plugins: K2BeforeDisplay -->
	<?php echo $this->item->event->K2BeforeDisplay; ?>

	<div class="catItemHeader">
		<?php if($this->item->params->get('catItemDateCreated')): ?>
		<!-- Date created -->
		<span class="catItemDateCreated">
			<?php echo JHTML::_('date', $this->item->created , JText::_('K2_DATE_FORMAT_LC2')); ?>
		</span>
		<?php endif; ?>

	  <?php if($this->item->params->get('catItemTitle')): ?>
	  <!-- Item title -->
	  <h3 class="catItemTitle">
			<?php if(isset($this->item->editLink)): ?>
			<!-- Item edit link -->
			<span class="catItemEditLink">
				<a class="modal" rel="{handler:'iframe',size:{x:990,y:550}}" href="<?php echo $this->item->editLink; ?>">
					<?php echo JText::_('K2_EDIT_ITEM'); ?>
				</a>
			</span>
			<?php endif; ?>

	  	<?php if ($this->item->params->get('catItemTitleLinked')): ?>
			<a href="<?php echo $this->item->link; ?>">
	  		<?php echo $this->item->title; ?>
	  	</a>
	  	<?php else: ?>
	  	<?php echo $this->item->title; ?>
	  	<?php endif; ?>

	  	<?php if($this->item->params->get('catItemFeaturedNotice') && $this->item->featured): ?>
	  	<!-- Featured flag -->
	  	<span>
		  	<sup>
		  		<?php echo JText::_('K2_FEATURED'); ?>
		  	</sup>
	  	</span>
	  	<?php endif; ?>
	  </h3>
	  <?php endif; ?>

		<?php if($this->item->params->get('catItemAuthor')): ?>
		<!-- Item Author -->
		<span class="catItemAuthor">
			<?php echo K2HelperUtilities::writtenBy($this->item->author->profile->gender); ?> <a rel="author" href="<?php echo $this->item->author->link; ?>"><?php echo $this->item->author->name; ?></a>
		</span>
		<?php endif; ?>
  </div>

  <!-- Plugins: AfterDisplayTitle -->
  <?php echo $this->item->event->AfterDisplayTitle; ?>

  <!-- K2 Plugins: K2AfterDisplayTitle -->
  <?php echo $this->item->event->K2AfterDisplayTitle; ?>

	<?php if($this->item->params->get('catItemRating')): ?>
	<!-- Item Rating -->
	<div class="catItemRatingBlock">
		<span><?php echo JText::_('K2_RATE_THIS_ITEM'); ?></span>
		<div class="itemRatingForm">
			<ul class="itemRatingList">
				<li class="itemCurrentRating" id="itemCurrentRating<?php echo $this->item->id; ?>" style="width:<?php echo $this->item->votingPercentage; ?>%;"></li>
				<li><a href="#" rel="<?php echo $this->item->id; ?>" title="<?php echo JText::_('K2_1_STAR_OUT_OF_5'); ?>" class="one-star">1</a></li>
				<li><a href="#" rel="<?php echo $this->item->id; ?>" title="<?php echo JText::_('K2_2_STARS_OUT_OF_5'); ?>" class="two-stars">2</a></li>
				<li><a href="#" rel="<?php echo $this->item->id; ?>" title="<?php echo JText::_('K2_3_STARS_OUT_OF_5'); ?>" class="three-stars">3</a></li>
				<li><a href="#" rel="<?php echo $this->item->id; ?>" title="<?php echo JText::_('K2_4_STARS_OUT_OF_5'); ?>" class="four-stars">4</a></li>
				<li><a href="#" rel="<?php echo $this->item->id; ?>" title="<?php echo JText::_('K2_5_STARS_OUT_OF_5'); ?>" class="five-stars">5</a></li>
			</ul>
			<div id="itemRatingLog<?php echo $this->item->id; ?>" class="itemRatingLog"><?php echo $this->item->numOfvotes; ?></div>
			<div class="clr"></div>
		</div>
		<div class="clr"></div>
	</div>
	<?php endif; ?>

  <div class="catItemBody">

	  <!-- Plugins: BeforeDisplayContent -->
	  <?php echo $this->item->event->BeforeDisplayContent; ?>

	  <!-- K2 Plugins: K2BeforeDisplayContent -->
	  <?php echo $this->item->event->K2BeforeDisplayContent; ?>

	  <?php if($this->item->params->get('catItemImage') && !empty($this->item->image)): ?>
	  <!-- Item Image -->
	  <div class="catItemImageBlock">
		  <span class="catItemImage">
		    <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>
		  </span>
		  <div class="clr"></div>
	  </div>
	  <?php endif; ?>

	  <?php if($this->item->params->get('catItemIntroText')): ?>
	  <!-- Item introtext -->
	  <div class="catItemIntroText">
	  	<?php echo $this->item->introtext; ?>
	  </div>
	  <?php endif; ?>

	  <?php if($this->item->params->get('catItemExtraFields') && count($this->item->extra_fields)): ?>
	  <!-- Item extra fields -->
	  <div class="catItemExtraFields">
	  	<h4><?php echo JText::_('K2_ADDITIONAL_INFO'); ?></h4>
	  	<ul>
			<?php foreach ($this->item->extra_fields as $key=>$extraField): ?>
			<?php if($extraField->value): ?>
			<li class="<?php echo ($key%2) ? "odd" : "even"; ?> type<?php echo ucfirst($extraField->type); ?> group<?php echo $extraField->group; ?>">
				<span class="catItemExtraFieldsLabel"><?php echo $extraField->name; ?></span>
				<span class="catItemExtraFieldsValue"><?php echo $extraField->value; ?></span>
			</li>
			<?php endif; ?>
			<?php endforeach; ?>
			</ul>
	    <div class="clr"></div>
	  </div>
	  <?php endif; ?>
	  
		<!-- Extra Fields -->
		<div class="extrafield">
				  <strong><?php echo $extrafieldslabels[1];?>: </strong><?php echo $extrafieldsid[1];?>
		</div>
		<div class="extrafield">
				  <strong><?php echo $extrafieldslabels[2];?>: </strong><?php echo $extrafieldsid[2];?>
		</div>
		<div class="clr"></div>
		 
		<!-- End Extra Fields -->	  

	  <!-- Plugins: AfterDisplayContent -->
	  <?php echo $this->item->event->AfterDisplayContent; ?>

	  <!-- K2 Plugins: K2AfterDisplayContent -->
	  <?php echo $this->item->event->K2AfterDisplayContent; ?>

	  <div class="clr"></div>
  </div>

  <?php if(
  $this->item->params->get('catItemHits') ||
  $this->item->params->get('catItemCategory') ||
  $this->item->params->get('catItemTags') ||
  $this->item->params->get('catItemAttachments')
  ): ?>
  <div class="catItemLinks">

		<?php if($this->item->params->get('catItemHits')): ?>
		<!-- Item Hits -->
		<div class="catItemHitsBlock">
			<span class="catItemHits">
				<?php echo JText::_('K2_READ'); ?> <b><?php echo $this->item->hits; ?></b> <?php echo JText::_('K2_TIMES'); ?>
			</span>
		</div>
		<?php endif; ?>

		<?php if($this->item->params->get('catItemCategory')): ?>
		<!-- Item category name -->
		<div class="catItemCategory">
			<span><?php echo JText::_('K2_PUBLISHED_IN'); ?></span>
			<a href="<?php echo $this->item->category->link; ?>"><?php echo $this->item->category->name; ?></a>
		</div>
		<?php endif; ?>

	  <?php if($this->item->params->get('catItemTags') && count($this->item->tags)): ?>
	  <!-- Item tags -->
	  <div class="catItemTagsBlock">
		  <span><?php echo JText::_('K2_TAGGED_UNDER'); ?></span>
		  <ul class="catItemTags">
		    <?php foreach ($this->item->tags as $tag): ?>
		    <li><a href="<?php echo $tag->link; ?>"><?php echo $tag->name; ?></a></li>
		    <?php endforeach; ?>
		  </ul>
		  <div class="clr"></div>
	  </div>
	  <?php endif; ?>

	  <?php if($this->item->params->get('catItemAttachments') && count($this->item->attachments)): ?>
	  <!-- Item attachments -->
	  <div class="catItemAttachmentsBlock">
		  <span><?php echo JText::_('K2_DOWNLOAD_ATTACHMENTS'); ?></span>
		  <ul class="catItemAttachments">
		    <?php foreach ($this->item->attachments as $attachment): ?>
		    <li>
			    <a title="<?php echo K2HelperUtilities::cleanHtml($attachment->titleAttribute); ?>" href="<?php echo $attachment->link; ?>">
			    	<?php echo $attachment->title ; ?>
			    </a>
			    <?php if($this->item->params->get('catItemAttachmentsCounter')): ?>
			    <span>(<?php echo $attachment->hits; ?> <?php echo ($attachment->hits==1) ? JText::_('K2_DOWNLOAD') : JText::_('K2_DOWNLOADS'); ?>)</span>
			    <?php endif; ?>
		    </li>
		    <?php endforeach; ?>
		  </ul>
	  </div>
	  <?php endif; ?>

		<div class="clr"></div>
  </div>
  <?php endif; ?>

	<div class="clr"></div>

  <?php if($this->item->params->get('catItemVideo') && !empty($this->item->video)): ?>
  <!-- Item video -->
  <div class="catItemVideoBlock">
  	<h3><?php echo JText::_('K2_RELATED_VIDEO'); ?></h3>
		<?php if($this->item->videoType=='embedded'): ?>
		<div class="catItemVideoEmbedded">
			<?php echo $this->item->video; ?>
		</div>
		<?php else: ?>
		<span class="catItemVideo"><?php echo $this->item->video; ?></span>
		<?php endif; ?>
  </div>
  <?php endif; ?>

  <?php if($this->item->params->get('catItemImageGallery') && !empty($this->item->gallery)): ?>
  <!-- Item image gallery -->
  <div class="catItemImageGallery">
	  <h4><?php echo JText::_('K2_IMAGE_GALLERY'); ?></h4>
	  <?php echo $this->item->gallery; ?>
  </div>
  <?php endif; ?>

  <div class="clr"></div>

	<?php if($this->item->params->get('catItemCommentsAnchor') && ( ($this->item->params->get('comments') == '2' && !$this->user->guest) || ($this->item->params->get('comments') == '1')) ): ?>
	<!-- Anchor link to comments below -->
	<div class="catItemCommentsLink">
		<?php if(!empty($this->item->event->K2CommentsCounter)): ?>
			<!-- K2 Plugins: K2CommentsCounter -->
			<?php echo $this->item->event->K2CommentsCounter; ?>
		<?php else: ?>
			<?php if($this->item->numOfComments > 0): ?>
			<a href="<?php echo $this->item->link; ?>#itemCommentsAnchor">
				<?php echo $this->item->numOfComments; ?> <?php echo ($this->item->numOfComments>1) ? JText::_('K2_COMMENTS') : JText::_('K2_COMMENT'); ?>
			</a>
			<?php else: ?>
			<a href="<?php echo $this->item->link; ?>#itemCommentsAnchor">
				<?php echo JText::_('K2_BE_THE_FIRST_TO_COMMENT'); ?>
			</a>
			<?php endif; ?>
		<?php endif; ?>
	</div>
	<?php endif; ?>

	<?php if ($this->item->params->get('catItemReadMore')): ?>
	<!-- Item "read more..." link -->
	<div class="catItemReadMore">
		<a class="k2ReadMore" href="<?php echo $this->item->link; ?>">
			<?php echo JText::_('K2_READ_MORE'); ?>
		</a>
	</div>
	<?php endif; ?>

	<div class="clr"></div>

	<?php if($this->item->params->get('catItemDateModified')): ?>
	<!-- Item date modified -->
	<?php if($this->item->modified != $this->nullDate && $this->item->modified != $this->item->created ): ?>
	<span class="catItemDateModified">
		<?php echo JText::_('K2_LAST_MODIFIED_ON'); ?> <?php echo JHTML::_('date', $this->item->modified, JText::_('K2_DATE_FORMAT_LC2')); ?>
	</span>
	<?php endif; ?>
	<?php endif; ?>

  <!-- Plugins: AfterDisplay -->
  <?php echo $this->item->event->AfterDisplay; ?>

  <!-- K2 Plugins: K2AfterDisplay -->
  <?php echo $this->item->event->K2AfterDisplay; ?>

	<div class="clr"></div>
</div>
<!-- End K2 Item Layout -->

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

  • Uldis
  • Uldis's Avatar Topic Author
  • Offline
  • Senior Member
More
12 years 2 months ago - 12 years 2 months ago #62956 by Uldis
Replied by Uldis on topic Re: Please help me figure out how to make this layout
Ok, I think I understand how your code works :)

I don't need another extra field group, I just need to add another extra field, since your code retrieves extrafield spiecified in code(by id) and places it in content.

This solves my problem almost completely. If I could just find how to disable that 1 extra field in item.php. (not whole group, just that 1 extra field).
They all have same classes, so display:none; isn't an option.

And if i want to use this method only for some categories, I just create a new template and add this code, to category_item.php, right ?

Also, I changes second part of code to
<div class="extrafield2">
                                  <?php echo $extrafieldsid[7];?>
                </div>

Since I only need to retrieve field value.

Do I also need to make changes in first part of the code ?

For example, just use this part of the code
          <?php 
     //convertArray to use ids as key
          $extrafieldsid = array();
          foreach($this->item->extra_fields as $itemid)
          {    
          $extrafieldsid[$itemid->id] = $itemid->value;
          }   
          ?>

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

More
12 years 2 months ago #62957 by Aaron
Replied by Aaron on topic Re: Please help me figure out how to make this layout
Uldis,
So you are correct that you do not have to create another extra field group but you could.. this code only goes by the ID and each extra field ID is unique regardless of the field group...

So... if you want to disable the extra field in item.php you have to duplicate the code in my first post in item.php and break it all down by each extra field. To "disable" an extra field, you just do not need to put it in the code...

It looks like the change you made removed the name (label) which is fine... you can remove the section "Call to prepare extra field labels" in the array code. You do not want to change the "Call to prepare extra field IDs" section though.

To use this for a particular category, just select this template for that category. Any tweaks or changes you need to make can be done in a new template and assigned according to your need.

I think I answered all the followup questions... hope this helps!
Aaron :)

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

  • Uldis
  • Uldis's Avatar Topic Author
  • Offline
  • Senior Member
More
12 years 2 months ago #62958 by Uldis
Replied by Uldis on topic Re: Please help me figure out how to make this layout
Yes, thank you, this has been extremely helpful!

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

More
12 years 1 month ago #62959 by Odin Mayland
Replied by Odin Mayland on topic Re: Please help me figure out how to make this layout
I am trying to create a row of extra fields so that in category view it appears to be a table of products.

I have pasted your code into category_item.php
The extrafields show up in the category view but I get a "Warning: Invalid argument supplied for foreach() in" for lines:
foreach($this->item->extra_fields as $itemid)
and
foreach($this->item->extra_fields as $itemlabel)

using k2.5.3

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

  1. Forum
  3. K2 Community Forum
  5. English K2 Community
  7. Please help me figure out how to make this layout

Powered by Kunena Forum