Changing Style Module - css

I need to format the display module from the current state to the second state in the photo below is another image transfer.
The last line displays the image in a standard module, I need to display the image on the primary line.
pic 1 :
pic 2 :
module template code :
<?php // no direct access
defined('_JEXEC') or die('Restricted access'); ?>
<table border="0" width="100%">
<?php
if($list[1]->disposition=="h")
echo "<tr>";
$i=0;
foreach ($list as $item) :
$order=explode("-",$item->ordering);
$cntorder=count($order);
if($i < $item->count_pic) {
if($list[1]->disposition=="v"||!$list[1]->disposition)
print "<tr>";
?>
<td valign="top" class="thumbsup-image latestnews<?php echo $item->css?>">
<?php
if($item->front) {
if($item->show_thumb) {
if($item->link_thumb)
echo "<a target='_blank' href=\"".$item->link."\">";
echo $item->imgbig;
if($item->link_thumb)
echo "</a>";
}
for($j=0;$j<$cntorder;$j++){
if($order[$j]=="t"&&$item->show_title) {
if($item->link_title)
echo "<a target='_blank' href=\"".$item->link."\" class=\"newsmod".$item->css."\">";
echo "<H1>";
echo "<li class=\"newsmod".$item->css."\">".$item->title."</li>";
echo "</H1>";
if($item->link_title)
echo "</a>";
}
if($order[$j]=="i"&&$item->show_intro){
if($item->link_intro)
echo "<a href=\"".$item->link."\" class=\"thumbsup-intro".$item->css."\">";
echo $item->introtext;
if($item->link_intro)
echo "</a>";
if($item->show_readmore){
echo "<a href=\"".$item->link."\">";
echo JText::_('more');
echo "</a>";
}
}
if($order[$j]=="d"&&$item->show_date) {
echo "<div class=\"thumbsup-date".$item->css."\">".JHTML::_('date', $item->created, $item->date_f)."</div>";
}
if($order[$j]=="a"&&$item->show_author) {
echo "<div class=\"thumbsup-author".$item->css."\">";
JText::printf('Written by',$item->author);
echo "</div>";
}
if($order[$j]=="h"&&$item->show_hits) {
echo "<div class=\"thumbsup-hits".$item->css."\">";
JText::printf('Hits',$item->hits);
echo " ".$item->hits;
echo "</div>";
}
}
} else {
if($item->show_thumb){
if($item->link_thumb)
echo "<a target='_blank' href=\"".$item->link."\" class=\"thumbsup-thumb".$item->css."\">";
echo $item->imgsmall." ";
if($item->link_thumb)
echo "</a>";
}
if($item->imgcolumn)
print "</ul><td valign=\"top\" class=\"latestnews".$item->css."\">";
for($j=0;$j<$cntorder;$j++){
if($order[$j]=="t"&&$item->show_title) {
echo "<li class=\"newsmod".$item->css."\">";
if($item->link_title)
echo "<a target='_blank' href=\"".$item->link."\" class=\"newsmod".$item->css."\">";
echo $item->title;
if($item->link_title)
echo "</a>";
echo "</li>";
}
if($order[$j]=="i"&&$item->show_intro){
echo "<div class=\"thumbsup-intro".$item->css."\">";
if($item->link_intro)
echo "<a href=\"".$item->link."\" class=\"thumbsup-intro".$item->css."\">";
echo $item->introtext;
if($item->link_intro)
echo "</a>";
if($item->show_readmore) {
echo "<a href=\"".$item->link."\">";
echo JText::_('more');
echo "</a>";
}
echo "</div>";
}
if($order[$j]=="d"&&$item->show_date) {
echo "<div class=\"thumbsup-date".$item->css."\">".JHTML::_('date', $item->created, $item->date_f)."</div>";
}
if($order[$j]=="a"&&$item->show_author) {
echo "<div class=\"thumbsup-author".$item->css."\">";
JText::printf('Written by',$item->author);
echo "</div>";
}
if($order[$j]=="h"&&$item->show_hits) {
echo "<div class=\"thumbsup-hits".$item->css."\">";
JText::printf('Hits',$item->hits);
echo " ".$item->hits;
echo "</div>";
}
}
} ?>
</ul>
<?php if($list[1]->disposition=="v"||!$list[1]->disposition)
print "</tr>";
?>
<?php } else {
if($list[1]->disposition=="v"||!$list[1]->disposition)
print "<tr>";
?>
<ul valign="top" class="latestnews<?php echo $item->css?>">
<?php
for($j=0;$j<$cntorder;$j++){
if($order[$j]=="t"&&$item->show_title) {
echo "<li class=\"newsmod".$item->css."\">";
if($item->link_title)
echo "<a target='_blank' href=\"".$item->link."\" class=\"newsmod".$item->css."\">";
if($item->front) echo "<H1>";
echo $item->title;
if($item->front) echo "</H1>";
if($item->link_title)
echo "</a>";
echo "</li>";
}
if($order[$j]=="i"&&$item->show_intro){
echo "<div class=\"thumbsup-intro".$item->css."\">";
if($item->link_intro)
echo "<a href=\"".$item->link."\" class=\"thumbsup-intro".$item->css."\">";
echo $item->introtext;
if($item->link_intro)
echo "</a>";
if($item->show_readmore) echo JText::_('more');
echo "</div>";
}
if($order[$j]=="d"&&$item->show_date) {
echo "<div class=\"thumbsup-date".$item->css."\">".JHTML::_('date', $item->created, $item->date_f)."</div>";
}
if($order[$j]=="a"&&$item->show_author) {
echo "<div class=\"thumbsup-author".$item->css."\">";
JText::printf('Written by',$item->author);
echo "</div>";
}
if($order[$j]=="h"&&$item->show_hits) {
echo "<div class=\"thumbsup-hits".$item->css."\">";
JText::printf('Hits',$item->hits);
echo " ".$item->hits;
echo "</div>";
}
}
?>
</ul>
<?php if($list[1]->disposition=="v"||!$list[1]->disposition)
print "</tr>";
?>
<?php } ?>
<?php $i++; endforeach;
if($list[1]->disposition=="h")
print "</tr>";
?>
</table>

Related

Add Space to Pagination Hyperlinks

I am trying to add spaces to pagination Numbers
my php looks like this
echo "<ul class='pagination'>";
echo "<a style=text-decoration:none href='dashboard.php?page=".($page-1)."' class='button'>Previous</a>";
for ($i=1; $i<=$total_pages; $i++) {
echo "<a style=text-decoration:none href='dashboard.php?page=".$i."'>".$i."</a>";
};
echo "<a style=text-decoration:none href='dashboard.php?page=".($page+1)."' class='button'>NEXT</a>";
echo "</ul>";
And the output looks somewhat like this
Previous12345678NEXT
How do i add spaces?
echo "<ul class='pagination'>";
echo "<a style=text-decoration:none href='dashboard.php?page=".($page-1)."' class='button'>Previous</a>";
echo ' ';
for ($i=1; $i<=$total_pages; $i++) {
echo "<a style=text-decoration:none href='dashboard.php?page=".$i."'>".$i."</a>";
echo ' ';
};
echo "<a style=text-decoration:none href='dashboard.php?page=".($page+1)."' class='button'>NEXT</a>";
echo "</ul>";
Try below code.
<?php
echo "<ul class='pagination'>";
echo "<a style=text-decoration:none href='dashboard.php?page=".($page-1)."' class='button'>Previous </a>";
for ($i=1; $i<=5; $i++) {
echo "<a style=text-decoration:none href='dashboard.php?page=".$i."'>".$i." </a>";
};
echo "<a style=text-decoration:none href='dashboard.php?page=".($page+1)."' class='button'>NEXT</a>";
echo "</ul>";
?>
if In website use bootstrap then add pull-left and pull-right class in a tag for example :
echo "<ul class='pagination'>";
echo "<a style="text-decoration:none" href='dashboard.php?page=".($page-1)."' class='button pull-left'>Previous</a>";
for ($i=1; $i<=$total_pages; $i++) {
echo "<a style=text-decoration:none href='dashboard.php?page=".$i."'>".$i."</a>";
};
echo "<a style="text-decoration:none" href='dashboard.php?page=".($page+1)."' class='button pull-right'>NEXT</a>";
echo "</ul>";
if you dont have bootstrap then use this code
echo "<ul class='pagination'>";
echo "<a style="text-decoration:none; float:left" href='dashboard.php?page=".($page-1)."' class='button'>Previous</a>";
for ($i=1; $i<=$total_pages; $i++) {
echo "<a style=text-decoration:none href='dashboard.php?page=".$i."'>".$i."</a>";
};
echo "<a style="text-decoration:none; float:right" href='dashboard.php?page=".($page+1)."' class='button '>NEXT</a>";
echo "</ul>";

Create custom category navigation wordpress

I want to create a custom category navigation 3 level in wordpress.
I don't want to use php wp_nav_menu(), because i need to add cateogry thumbnail inside the navigation.
I found this code :
<?php // Create category navigation with posts for each subcat
$categories = get_categories();
$catID = $cat->cat_ID;
foreach ($categories as $cat) {
if($cat->category_parent == 0){ //If is a top level category
$subcategories = get_categories('child_of='. $cat->cat_ID);
if (count($subcategories)>0){ ?>
<li class="haschild"><a><?php echo $cat->name; ?><span class="image"><img src="<?php echo z_taxonomy_image_url($cat->term_id); ?>" /></span></a>
<?php } /* end if has subcats */
else { // else; does not have childen ?>
<li><?php echo $cat->name; ?><span class="image"><img src="<?php echo z_taxonomy_image_url($cat->term_id); ?>" /></span></li>
<?php } //end else ?>
<?php // Get the subcats !!! THIS RETURNS ALL DECENDING LEVELS.
$subcategories = get_categories('child_of='. $cat->cat_ID);
if (count($subcategories)>0){
echo "<ul class='sub-menu'>";
foreach ($subcategories as $scat) { ?>
<li><?php echo $scat->name; ?><span class="image"><img src="<?php echo z_taxonomy_image_url($scat->term_id); ?>" /></span></li>
<?php
echo "";
}
echo "</ul> </li>"; // Close the Child UL DIV and parent LI
} //endif has subcats ?>
<?php } //end if parent ?>
<?php } //end foreach ?>
But it doesn't work on 3 level, just on 2 level.
you can look the menu directly on my website : http://www.designsd.fr/ap/
Do you have an idea to change it ?
Here is the updated code with a new loop level:
<?php // Create category navigation with posts for each subcat
$categories = get_categories();
$catID = $cat->cat_ID;
foreach ($categories as $cat) {
if($cat->category_parent == 0){ //If is a top level category
$subcategories = get_categories('child_of='. $cat->cat_ID);
if (count($subcategories)>0){ ?>
<li class="haschild"><a><?php echo $cat->name; ?><span class="image"><img src="<?php echo z_taxonomy_image_url($cat->term_id); ?>" /></a></span>
<?php } /* end if has subcats */
else { // else; does not have childen ?>
<li><?php echo $cat->name; ?><span class="image"><img src="<?php echo z_taxonomy_image_url($cat->term_id); ?>" /></span></li>
<?php } //end else ?>
<?php // Get the subcats !!! THIS RETURNS ALL DECENDING LEVELS.
$subcategories = get_categories('child_of='. $cat->cat_ID);
if (count($subcategories)>0){
echo "<ul class='sub-menu'>";
foreach ($subcategories as $scat) {
$child_subcategories = get_categories('child_of='. $scat->cat_ID);
if (count($child_subcategories)>0){ ?>
<li class="test"><a><?php echo $scat->name; ?><span class="image"><img src="<?php echo z_taxonomy_image_url($scat->term_id); ?>" /></span></a>
<?php } else { ?>
<li><?php echo $scat->name; ?><span class="image"><img src="<?php echo z_taxonomy_image_url($scat->term_id); ?>" /></span>
<?php }
if (count($child_subcategories)>0){
echo "<ul class='sub-menu'>";
foreach ($child_subcategories as $sscat) { ?>
<li><?php echo $sscat->name; ?><span class="image"><img src="<?php echo z_taxonomy_image_url($sscat->term_id); ?>" /></span></li>
<?php }
echo '</ul>';
}
?>
</li>
<?php;
}
echo "</ul> </li>"; // Close the Child UL DIV and parent LI
} //endif has subcats ?>
<?php } //end if parent ?>
<?php } //end foreach ?>

Wrap elements within iteration wordpress

I write the second piece of code
<?php
$subcategories = get_categories('&child_of=1&hide_empty=0'); // List subcategories of category '4' (even the ones with no posts in them)
foreach ($subcategories as $subcategory) {
$counter = 0;
$counter++;
?>
<?php if ($subcategory->parent == 1) {
if ($counter%2) {
echo '<div class="rowcat">';
}
?>
<!-- begin catblock -->
<div class="catblock">
<?php echo '<img src="'. z_taxonomy_image_url($subcategory->term_id) .'" />'; ?>
<?php echo sprintf('%s', get_category_link($subcategory->term_id), apply_filters('get_term', $subcategory->name));?>
</div>
<!-- end catblock -->
<?php
if ($counter%2) {
echo '</div>';
}
?>
<?php } ?>
<?php } ?>
For now each <div class="catblock"></div> wraps by <div class="rowcat"> but I want to make that each two blocks <div class="rowcat"> wrapped by <div class="rowcat">
So something I do wrong, what's this?
Move your $counter++ to the end of the loop:
<?php
$subcategories = get_categories('&child_of=1&hide_empty=0'); // List subcategories of category '4' (even the ones with no posts in them)
foreach ($subcategories as $subcategory) {
$counter = 0;
?>
<?php if ($subcategory->parent == 1) {
if ($counter%2) {
echo '<div class="rowcat">';
}
?>
<!-- begin catblock -->
<div class="catblock">
<?php echo '<img src="'. z_taxonomy_image_url($subcategory->term_id) .'" />'; ?>
<?php echo sprintf('%s', get_category_link($subcategory->term_id), apply_filters('get_term', $subcategory->name));?>
</div>
<!-- end catblock -->
<?php
if ($counter%2) {
echo '</div>';
}
}
$counter++;
} ?>
I found the right solution
<?php
$subcategories = get_categories('&child_of=1&hide_empty=0'); // List subcategories of category '4' (even the ones with no posts in them)
$counter = 0;
foreach ($subcategories as $subcategory) { ?>
<?php if ($subcategory->parent == 1) {
if ($counter%2 == 0) {
echo $counter > 0 ? "</div>" : "";
echo '<div class="rowcat">';
}
?>
<!-- begin catblock -->
<div class="catblock">
<?php echo '<img src="'. z_taxonomy_image_url($subcategory->term_id) .'" />'; ?>
<?php echo sprintf('%s', get_category_link($subcategory->term_id), apply_filters('get_term', $subcategory->name));?>
</div>
<!-- end catblock -->
<?php
}
$counter++;
} ?>

Using Packery with multiple containers?

Hi i'm trying to use the packery library for laying our a look book containing various items.
Each item has an array of images which are using packery to pack them.
I've created container divs for each but packery only seems to be working on the first one. Can anyone help me?
Here is the HTML
<?php
$args = array(
'posts_per_page' => 100);
$posts = get_posts($args);
if($posts)
{
foreach($posts as $post)
{
echo '<div class="range">'; // div for each range
?>
<h1><?php the_field('range_title'); ?></h1>
<?php
$images = get_field('range_gallery');
if( $images ):
?>
<div id="slider">
<?php foreach( $images as $image ): ?>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
<p><?php echo $image['caption']; ?></p>
<?php endforeach; ?>
</div>
<div id="carousel" class="packery">
<?php foreach( $images as $image ): ?>
<div class="item" >
<img src="<?php echo $image['sizes']['thumbnail']; ?>" alt="<?php echo $image['alt']; ?>" />
</div>
<?php endforeach; ?>
</div>
<?php endif;?>
<?php echo '</div>';
}
}
?>
Here is the very basic javascript:
jQuery(document).ready(function () {
var container = document.querySelector('.packery');
var pckry = new Packery( container, {
// options
itemSelector: '.item',
gutter: 10
});
});
You need to have each packery container have different class names. and then create a new instance of the Packery class for each packery container. I have taken your code and refactored it a bit so the html echos at the end of the loops.
<?php
$args = array('posts_per_page' => 100);
$posts = get_posts($args);
if($posts){
$html = '';
$script = '';
foreach($posts as $key => $post){
$html .= '<div class="range">'; // div for each range
$html .= '<h1>'.get_field('range_title').'</h1>';
$images = get_field('range_gallery');
if( $images ){
$html .= '<div id="slider">';
foreach( $images as $image ){
$html .= '<img src="'.$image['url'].'" alt="'.$image['alt'].'" />';
$html .= '<p>'.$image['caption'].'</p>';
}
$html .= '</div>';
$html .= '<div id="carousel" class="packery'.$key.'">';
foreach( $images as $image ){
$html .= '<div class="item" >';
$html .= '<img src="'.$image['sizes']['thumbnail'].'" alt="'.$image['alt'].'" />';
$html .= '</div>';
}
$html .= '</div>';
}
$html .= '</div>';
$script .= "jQuery(document).ready(function () {
var container".$key." = document.querySelector('.packery".$key."');
var pckry = new Packery( container".$key.", {
// options
itemSelector: '.item',
gutter: 10
});
});";
}
echo $html;
echo '<script>'.$script.'</script>';
}
?>

jQuery tools overlay only opening 1 element

So I am running in to an issue where I have a page in Wordpress querying a custom post type. It pull in the name and featured image. When you click the featured image it opens a popup with the content and some other info. Here is the link: http://pegasusemergencygrp.com.s164407.gridserver.com/who-we-are/meet-our-team/
This is the call in my page.php file:
<?php
query_posts(array('post_type' => 'doctors'));
if ( have_posts() ) : while ( have_posts() ) : the_post();
?>
<aside class="doctor">
<span class="photo">
<?php the_post_thumbnail('full', array('data-rel' => "#$post->ID")); ?>
</span>
<ul>
<li><?php if(get_field('linkedin')) { echo '<span><a class="linkedin" target="_blank" href='. get_field('linkedin') .'>' . get_field('linkedin') . '</a></span>'; } ?></li>
<li><a title="<?php $values = get_field('type_of_doctor'); if($values) { foreach($values as $value) { echo '<span class='. $value .'>' . $value . '</span>'; } }?>"><?php $values = get_field('type_of_doctor'); if($values) { foreach($values as $value) { echo '<span class='. $value .'>' . $value . '</span>'; } }?></a></li>
<li><?php if(get_field('email_address')) { echo '<span class="email">' . get_field('email_address') . '</span>'; } ?></li>
<li><a title="<?php echo get_field('phone'); ?>"><?php if(get_field('phone')) { echo '<span class="phone">' . get_field('phone') . '</span>'; } ?></a></li>
</ul>
<p class="title"><?php the_title(''); ?> <?php if(get_field('location')) { echo '<span>' . get_field('location') . '</span>'; } ?></p>
<article class="simple_overlay" id="<?php the_id(); ?>">
<?php the_post_thumbnail('full'); ?>
<ul>
<li><?php if(get_field('linkedin')) { echo '<span><a class="linkedin" target="_blank" href='. get_field('linkedin') .'>' . get_field('linkedin') . '</a></span>'; } ?></li>
<li><a title="<?php $values = get_field('type_of_doctor'); if($values) { foreach($values as $value) { echo '<span class='. $value .'>' . $value . '</span>'; } }?>"><?php $values = get_field('type_of_doctor'); if($values) { foreach($values as $value) { echo '<span class='. $value .'>' . $value . '</span>'; } }?></a></li>
<li><?php if(get_field('email_address')) { echo '<span class="email">' . get_field('email_address') . '</span>'; } ?></li>
<li><a title="<?php echo get_field('phone'); ?>"><?php if(get_field('phone')) { echo '<span class="phone">' . get_field('phone') . '</span>'; } ?></a></li>
</ul>
<p class="title"><?php the_title(''); ?> <?php if(get_field('location')) { echo '<span>' . get_field('location') . '</span>'; } ?></p>
<div class="clear"></div>
<hr>
<p><?php the_content(); ?></p>
</article><!--end of .simple_overlay-->
</aside><!--end of .doctor-->
<?php endwhile; endif; wp_reset_query(); ?>
Here is my JS:
jQuery(document).ready(function() {
var imgatt = jQuery("span.photo a img").attr('data-rel');
jQuery("span.photo a img").overlay({
target: imgatt,
}); });
The script is semi working, when I click on the picture it pops open the info but if I click on the 2nd picture it pops open the first items info as well. They are both generating unique ID's on the data-rel tag with the post id and the overlay article class has the matching ID.
Source: http://jquerytools.org/demos/overlay/index.html
Solved the issue. Anyone who may stumble on this it appears jQuery Tools overlay has a hard time with the data-rel attribute on the featured image. Instead I re-configured the jQuery to find the rel tag on the anchor before the featured image and call the post id on the rel tag.
WP Code:
<a rel="#<?php the_id(); ?>" href="#<?php the_id(); ?>" class="bio"><?php the_post_thumbnail('full'); ?></a>
jQuery:
// Team Bios Overlay
jQuery(document).ready(function() {
jQuery('a.bio[rel]').overlay({
mask: '#000',
effect: 'apple'
});
});
Hope this helps someone else with a similar scenario

Resources