Joomla K2 Extra Fields: Differentiated Display - php

I am currently trying to tweak the item.php file into displaying the extra fields separately instead of in a group. I found som code snippets here & there, not really helping as I think they may be outdated.
For instance: This page:
http://steffenjungersen.moloch.dk/nugent-be-goode
I would like "Info" to show on top of the item underneath the bold intro-text.
Also, I would like the "Karakter" (a drop down menu extra field) to display as stars from 1-6
Using the category names I gave these extra fields, I came up with this for the "Karakter" one in item.php:
<?php if(isset($this->item->extra_fields[rating]) && ($this->item->extra_fields[rating] >= 0 || $this->item->extra_fields[rating] <=6)): ?>
<span class="starsbox stars<?php echo $this->item->extra_fields[rating]; ?>"></span>
<?php endif; ?>
And then this in my k2.css file:
.starsbox {
width: 96px;
height: 16px;
display: inline-block;
background: url(images/stars.png) no-repeat;
}
.stars6 {
background-position: 0px 0px;
}
.stars5 {
background-position: -16px 0px;
}
...etc
That didn't work.
Similarly, I tried calling the "Info" field into an independent position and placing it at the top. No reaction.
So i removed the whole item->extra_fields as $key=>$extraField): ?> block and then the extra fields just went away.
Can anyone point me in the right direction here?
Thank you :-)
-astrid

Okay. I got some help from my friends. Here's how far it got us (if anyone should wonder).
In order to have the extra fields displayed independently, you need to split them up. So replace the "foreach ..." line in you item.php with this:
<!-- START: Call to prepare extra fields -->
<?php
//convertArray to use ids as key
$extrafields = array();
foreach($this->item->extra_fields as $item)
{
$extrafields[$item->id] = $item->value;
}
?>
<!-- END: Call to prepare extra fields -->
Then, to call the extra field you need in, do this:
<?php if(isset($extrafields[X]) === true):?>
<?php echo $extrafields[X]; ?>
<?php endif; ?>
Where X is the numeric ID of the extra field.
Now here comes the fun part. I wanted to create a 1-6 stars rating system for my client who is a music journalist. He should be able to select a rating from a dropdown, and this value should be displayed as stars in the item view.
I decided to use the css and sprite based article rating system which comes with K2 - then I could "recycle" the nice star images and the css already created.
Heres how it looks:
<?php if(isset($extrafields[3]) === true):?>
<ul class="itemRatingList">
<li class="itemCurrentRating" id="itemCurrentRating<?php echo $this->item->id; ?>" style="width:<?php echo round($extrafields[3]*100/6); ?>%;"></li>
<li><?php if(isset($extrafields[3]) == 1):?>1</li><?php endif; ?>
<li><?php if(isset($extrafields[3]) == 2):?>2</li><?php endif; ?>
<li><?php if(isset($extrafields[3]) == 3):?>3</li><?php endif; ?>
<li><?php if(isset($extrafields[3]) == 4):?>4</li><?php endif; ?>
<li><?php if(isset($extrafields[3]) == 5):?>5</li><?php endif; ?>
<li><?php if(isset($extrafields[3]) == 6):?>6</li><?php endif; ?>
</ul>
<?php endif; ?>
When I at some point can manage to get my hands down, I will look into replacing the a tags with span or something. And I might get around to correcting the text thing. But now it works.
Best regards,
Astrid

Related

Iterating Active class to two row nav bar in WordPress

I'm working with a WordPress site, using the ACF plugin and I have navigation that is in two rows. The first row <li> NEEDS to be class="active" to second row even show up. I can get either the first row to show up as active, or second but not both.
To make things more fun, there is no reliable way to figure this using child-pages (it was tried). Some of nav objects are parent pages and I have no power over that.
And since the goal is to get this working with templates, hardcoding page names isn't an option either..
I somehow have to to "go back" in code if inner <li> is marked as active.
ACF fields:
ACF has upper nav with name, link and sub-navigation repeater.
and sub-navigation repeater has name and link for every sub-page.
In code there is <li> tags inside <li> tags iterated using ACF repeater and while have rows. $lang_code is used to figure from where to pull header texts.
<?php
$lang = get_locale();
$curr_page = get_permalink(); ?>
<nav role="navigation">
<ul class="navigation">
<?php if (have_rows('navigation', $lang_code)) :
while(have_rows('navigation', $lang_code)) : the_row() ?>
<li class="<?php if($curr_page == get_sub_field('link') ){ echo 'active'; } ?>">
<?php the_sub_field('name') ?>
<ul class="sub-navigation">
<?php if (have_rows('sub-navigation', $lang_code)) :
while(have_rows('sub-navigation', $lang_code)) : the_row() ?>
<li class="<?php if($curr_page == get_sub_field('link')){ echo 'active'; } ?>"><?php the_sub_field('name') ?></li>
<?php endwhile; //end sub while
endif; //end sub if ?>
</ul>
</li>
<?php
endwhile; // End navigation while
endif; // End navigation if
</ul>
</nav>
https://imgur.com/a/Ws8YA
Pictures, first one: FAQ is class="active", but since Support is not, nothing is shown. The second picture is while support is class="active", showing second row of links (with support active since they happen to be same page).
I've tried all kinds of parent iterating and counters in nav columns, but I still have no working answer.
I am considering going jQuery + PHP or something like that.
Try using jQuery:
$('.sub-navigation li.active').parents('li').addClass('active');
Code above add .active class to parent <li> of child that has .active class.

Upgrade to Jquery Mobile 1.3.0 causes element to be forced to bottom

I have recently decided to upgrade my web app to implement the new jQuery Mobile Panel widget.
After changing to 1.3.0, a <p>element on a page in my app is being forced to the bottom. When I reverted back to 1.2.0, the element stayed at the top of the listview like I want it to.
A snippet of my source:
<?php include ('header.php'); ?>
<?php print ' <p style="text-align: center;">Welcome, <span style="font-weight:bold; color: orange;">'.$_SESSION['username'].'</span>! Your user ID is <span style="font-weight:bold; color: orange;">'.$_SESSION['user_id'].'</span>.</p>'; ?>
<div data-role="content" id="assignment_list">
<!-- create 2 foreach loops, 1 for classes to be listed and organized by id in list dividers and another for listing individual assignments within each class -->
<ul data-role="listview">
<!--classes loop-->
<?php foreach ($userclasses as $class) : ?>
<li data-role="list-divider"><?php echo $class['class_name']; ?></li>
<?php $assignments=get_assignments_by_class($class['class_id']); ?>
<?php foreach ($assignments as $assignment) : ?><!--assignments loop-->
<?php print'<li>'.$assignment['assign_title'].'</li>';?>
<?php endforeach; ?> <!--/assignments loop-->
<?php endforeach; ?> <!--/classes loop-->
</ul>
</div><!--/data-role="content"-->
<?php include 'footer.php'; ?>
My goal is to display the user with a message that greets them and signifies they have logged in successfully. I want the message to appear above the listview that displays assignments. It worked fine, but When I changed to jQuery Mobile 1.3.0, the message is now displayed at the bottom of my page, after the listview.
I have tried putting the message inside of the content div but it appears cut off.
Any thoughts? Thanks!
why don't you print the <?php print ' <p style="text-align: center;">Welcome, <span style="font-weight:bold; color: orange;">'.$_SESSION['username'].'</span>! Your user ID is <span style="font-weight:bold; color: orange;">'.$_SESSION['user_id'].'</span>.</p>'; ?> line inside the content div before the listview?
I hope that will solve the issue.
Also I hope you are using jQuery 1.9.X?

Scroll bar not working

I'm trying to produce list of recently added item in cart and the code goes like this
<ol style = "overflow: -moz-scrollbars-vertical; overflow-y: scroll;">
<?php foreach($_items as $_item): ?>
<?php echo $this->getItemHtml($_item) ?>
<?php endforeach; ?>
</ol>
I'm getting the items but the scroll not working. Please help me. I'm a budding developer.
If you want to have vertical scroll after certain height of ol container use below listed code
<ol style = "overflow-y: scroll;">
use overflow:auto property of css instead of scroll, and give some height for your list.
Specify a height there like this
<ol style = "overflow: -moz-scrollbars-vertical; overflow-y: scroll;height:50px;">
<?php foreach($_items as $_item): ?>
<?php echo $this->getItemHtml($_item) ?>
<?php endforeach; ?>
</ol>

Show class only specific page

I'm using Drupal 7 and my theme is Omega. I have got a class "mask" and its css code:
.mask {
background:url("../img/header_mask.png") repeat-x scroll 0 0 transparent;
height:200px;
position:absolute;
top:0;
width:100%!important;
z-index:101
}
I'm create a class on Omega theme options for show content top but my div show every page. So, I want show this class only node pages.
This is my node.tpl.php:
<div id="node-<?php print $node->nid; ?>" class="<?php print $classes; ?> clearfix"<?php print $attributes; ?>>
<?php print $user_picture; ?>
<?php print render($title_prefix); ?>
<?php if (!$page): ?>
<h2<?php print $title_attributes; ?>><?php print $title; ?></h2>
<?php endif; ?>
<?php print render($title_suffix); ?>
<?php if ($display_submitted): ?>
<div class="submitted">
<?php print $submitted; ?>
</div>
<?php endif; ?>
<div class="content"<?php print $content_attributes; ?>>
<?php
// We hide the comments and links now so that we can render them later.
hide($content['comments']);
hide($content['links']);
print render($content);
?>
</div>
<?php print render($content['links']); ?>
<?php print render($content['comments']); ?>
</div>
Where add my "mask" class in this code?
If you only want this rule to apply ONLY to node types then change it to:
.node .mask {
...
}
Drupal adds information about the specific node being viewed as well as the node type in a div in the html. You can use Firebug or just viewing the page html to figure out how you may want to restrict your rule based on the classes present for different content types.
If the content type you want this rule to apply to has a machine name of 'event', for example, you'll see that Drupal adds the class 'node-event' to each node of that type, and you can use that to restrict your rule even further:
.node-event .mask {
...
}
Hope that puts you in the right direction!

Horizontal div layout within a foreachloop

I am trying to integrate a small section on an existing website, my problem seems simple, but I can't seem to get my head around it. Here is how I want it to look like:
alt text http://img691.imageshack.us/img691/329/layouth.jpg
Blue = #pagecontainer
Red = #sectioncontainer
Yellow = .post
pagecontainer { height: 100%; width: 900px;}
post container {width: 900px;}
.post {width: 210px;}
Four posts are getting pulled in from WordPress using:
<?php if (have_posts()) : ?>
<?php query_posts('category_name=Category&posts_per_page=4'); ?>
<?php while (have_posts()) : the_post(); update_post_caches($posts); ?>
<div class="post">
<?php the_content() ?>
</div>
<?php endwhile; ?>
The posts will be a fixed width, but a varied height. The problem is, I cannot put spacers in-between, without the last post pushing a div underneath, and I cannot use margins because the first and last div are bumped up against the page container.
I could probably use something like
.post {margin-right: 20px;}
.post:last-child {margin: 0 !important;}
...but this just seems messy and I would rather avoid using the child pseudo selectors.
Any ideas on a tidier solution?
You can use a $count
Something like:
<?php $count = 0; ?>
<?php while (have_posts()) : the_post(); update_post_caches($posts); ?>
<?php $count++; ?>
<?php if ($count < 5) {
$class = 'post';
} else {
$class = 'post-last';
} ?>
<div class="<?php echo $class; ?>">
<?php the_content() ?>
</div>
<?php endwhile; ?>
Then just set your 'post' class in the CSS to have the margin of 20px and 'post-last' to not have a margin
Try to use margin-based solution, but instead of :last-child trick that is unfortunately isn't cross-browser, set parent's margin at right side to equivalent negative value:
.post {margin-right: 20px;}
.secioncontainer {margin-right: -20px;}
Also make sure that there will be no spaces in-between of the .posts. You could modify the markup so that it is written in one line without spaces:
<?php while (have_posts()) : the_post(); update_post_caches($posts); ?><div class="post"><?php the_content() ?></div><?php endwhile; ?>
Or use CSS technique like:
.secioncontainer {font-size: 0px;}
.post {font-size: /*your normal value*/;}

Categories