Keyword

K2 Category Layout

  • JxnGraphix
  • JxnGraphix's Avatar Topic Author
  • Offline
  • Junior Member
More
7 years 7 months ago #157261 by JxnGraphix
K2 Category Layout was created by JxnGraphix
Hi,


I am trying to achieve a grid layout similar to Netflix's home page on desktop devices. When an item is clicked, a new row is created below the existing row. In that new row, item details are displayed (introtext, extra fields, video, links). I have tried going about this using several different methods. The hurdle is combining the category.php and category_item.php files to make it work. Is it possible to combine the files? If so, how do I go about doing it? I am currently using a template override. I'm also open to other suggestions to achieve the same layout. Any help is appreciated!

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

  • Krikor Boghossian
  • Krikor Boghossian's Avatar
  • Offline
  • Platinum Member
More
7 years 7 months ago #157271 by Krikor Boghossian
Replied by Krikor Boghossian on topic K2 Category Layout
You could do it all in the category_tem.php file.
The image is always shown and on click with a jQuery event the rest of the data are shown.

You can clone the data into a container outside the grid in order to achieve the same effect.
Closing the container would destroy the data.

Another approach would be to use JSON feeds and via an AJAX request to populate the data in a separate container.

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

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

  • JxnGraphix
  • JxnGraphix's Avatar Topic Author
  • Offline
  • Junior Member
More
7 years 7 months ago - 7 years 7 months ago #157283 by JxnGraphix
Replied by JxnGraphix on topic K2 Category Layout
Thanks Krikor! How would I go about combing the two files? When I tried adding the code from category_item.php to category.php, it produced and error. When I adding vice versa, it still includes the code from category.php. Do I need an include or require statement?

I also tried using sessions. This seems to be the better route because I don't need to combine the files and I can manipulate the html to produce the extra div; however, using the code below and setting $info to "test" works but when I set it to the value below, nothing is returned and there is no error.

category_item.php
<?php
// Start the session
session_start();

$info = $this->item->extraFields->SizeRange->name;

// Set session variables
$_SESSION["additional_info"] = $info;
?>

category.php
<?php
// Start the session
session_start();

// Echo session variables that were set on previous page
echo $_SESSION["additional_info"];
?>
Last edit: 7 years 7 months ago by JxnGraphix.

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

  • Krikor Boghossian
  • Krikor Boghossian's Avatar
  • Offline
  • Platinum Member
More
7 years 7 months ago #157292 by Krikor Boghossian
Replied by Krikor Boghossian on topic K2 Category Layout
This is also a choice, although imho it might cause some cluttering.
In the category.php file you 'll notice some foreach statements and this code:
				<?php
					// Load category_item.php by default
					$this->item=$item;
					echo $this->loadTemplate('item');
				?>

This is where the category_item.php file is being requested.
Instead of the template file, you can use your own code there.

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

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

  • JxnGraphix
  • JxnGraphix's Avatar Topic Author
  • Offline
  • Junior Member
More
7 years 7 months ago #157306 by JxnGraphix
Replied by JxnGraphix on topic K2 Category Layout
Thanks for the reply Krikor, but you still haven't answered any of my original questions. I tried using the category_item.php as you suggested and replacing the foreach statement with my own code but neither worked. Could you please provide more detail as to what code to use when replacing the foreach statement? Also, can you provide any insight regarding the session_start() errors? Thanks in advance!

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

  • Krikor Boghossian
  • Krikor Boghossian's Avatar
  • Offline
  • Platinum Member
More
7 years 7 months ago #157322 by Krikor Boghossian
Replied by Krikor Boghossian on topic K2 Category Layout
Instead of loading the template file (using the category_item.php) you can merge these files.

Do not replace the foreach statement. Place your code inside the foreach statement.

I don't think you need the session solution since you can achieve the same layout much simpler.

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

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

  • JxnGraphix
  • JxnGraphix's Avatar Topic Author
  • Offline
  • Junior Member
More
7 years 7 months ago #157343 by JxnGraphix
Replied by JxnGraphix on topic K2 Category Layout
Thanks! But when I tried adding the category_item.php to the category.php file, the image titles display fine but the item image code below does not display the images at all. Any suggestions?
<?php if($this->item->params->get('catItemImage') && !empty($this->item->image)): ?>
  <!-- Item Image -->
  <div class="uk-panel uk-panel-box uk-panel-box-hover">
    <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>
  </div>
<?php endif; ?>

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

  • Krikor Boghossian
  • Krikor Boghossian's Avatar
  • Offline
  • Platinum Member
More
7 years 7 months ago #157351 by Krikor Boghossian
Replied by Krikor Boghossian on topic K2 Category Layout
Did you strip the $this->item=$item; part?
Does the <?php echo $this->item->link; ?> code produce anything?

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

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

  • JxnGraphix
  • JxnGraphix's Avatar Topic Author
  • Offline
  • Junior Member
More
7 years 7 months ago #157354 by JxnGraphix
Replied by JxnGraphix on topic K2 Category Layout
No, I did not strip that part. No, it does not produce anything. See below for exact code used...
<?php if((isset($this->leading) || isset($this->primary) || isset($this->secondary) || isset($this->links)) && (count($this->leading) || count($this->primary) || count($this->secondary) || count($this->links))): ?>
		<!-- Item list -->
		<div class="itemList">

			<?php if(isset($this->leading) && count($this->leading)): ?>
			<!-- Leading items -->
			<div id="itemListLeading" class="uk-grid uk-grid-medium" data-uk-grid-margin="">
				<?php foreach($this->leading as $key=>$item): ?>

					<?php
					// Define a CSS class for the last container on each row
					if((($key+1)%($this->params->get('num_leading_columns'))==0) || count($this->leading)<$this->params->get('num_leading_columns'))
						$lastContainer= ' itemContainerLast';
					else
						$lastContainer='';
					?>

					<div class="uk-width-1-5 itemContainer<?php echo $lastContainer; ?>"<?php echo (count($this->leading)==1); ?>>
						<?php
							// Load category_item.php by default
							$this->item = $item;
						?>

							<!-- Start K2 Item Layout -->
							<div class=" group<?php echo ucfirst($this->item->itemGroup); ?>">

								<div class="catItemHeader uk-text-center uk-text-truncate">
								  <?php if($this->item->params->get('catItemTitle')): ?>
								  <!-- Item title -->
								  <span class="catItemTitle">
								  	<?php if ($this->item->params->get('catItemTitleLinked')): ?>
										<a href="<?php echo $this->item->link; ?>">
								  		<?php echo $this->item->title; ?>
								  	</a>
								  	<?php endif; ?>

								  </span>
								  <?php endif; ?>

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

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

					</div>

					<?php if(($key+1)%($this->params->get('num_leading_columns'))==0): ?>
						<div class="uk-width-1-1 uk-panel uk-panel-box"></div>
					<?php endif; ?>
				
				<?php endforeach; ?>
			</div>
			<?php endif; ?>

		</div>
	<?php endif; ?>

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

  • Krikor Boghossian
  • Krikor Boghossian's Avatar
  • Offline
  • Platinum Member
More
7 years 7 months ago #157388 by Krikor Boghossian
Replied by Krikor Boghossian on topic K2 Category Layout
Is there a link to the dev site?

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