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
Related
my functions file
<?php
add_theme_support( 'post-thumbnails' );
add_image_size( 'custom-size', 600, 110 );
like this
index file a mean loop
<div class="konu-resim"><a href="<?php the_permalink(); ?>" alt="<?php the_title_attribute(); ?>"><img src="<?php
if ( has_post_thumbnail() )
the_post_thumbnail();
else
echo '<img src="' . trailingslashit( get_stylesheet_directory_uri() ) . 'images/deneme.jpg' . '" alt="" />';
?>
i try this one but doesnt work
i want default thumbnail with post url
Use like this
1) add following code in your functions.php file
<?php
add_filter( 'post_thumbnail_html', 'my_post_thumbnail_html' );
function my_post_thumbnail_html( $html ) {
if ( empty( $html ) )
$html = '<img src="' . trailingslashit( get_stylesheet_directory_uri() ) . 'images/default-thumbnail.jpg' . '" alt="" />';
return $html;
}
?>
2) display like (if future image not set in back end then it'll display default image )
<?php
if ( has_post_thumbnail() )
the_post_thumbnail();
else
echo '<img src="' . trailingslashit( get_stylesheet_directory_uri() ) . 'images/default-thumbnail.jpg' . '" alt="" />';
?>
Try this:
if ( has_post_thumbnail() ){
the_post_thumbnail();
} else {
echo '<img src="'.get_stylesheet_directory_uri().'/images/deneme.jpg" alt="" />';
}
Try this please
<?php
add_theme_support( 'post-thumbnails' );
add_image_size( 'custom-size', 600, 110 );`
like this
index file a mean loop
<div class="konu-resim"><a href="<?php the_permalink(); ?>" alt="<?php the_title_attribute(); ?>"><?php if ( has_post_thumbnail() ) {
the_post_thumbnail();
} else { ?>
<img src="<?php bloginfo('template_directory'); ?>images/deneme.jpg" alt="<?php the_title(); ?>" /></a></div>
To Reffer :enter link description here
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 ?>
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++;
} ?>
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>';
}
?>
In my Index.php template file I have the following code which should show a featured post if it's sticky and then loop through the remaining posts below. However on the second loop shows anything and the sticky post does not appear...
The post has definitely been made sticky and second loop has successfully hidden it but the first loop just doesn't acknowledge it :/ it's not set to private and is marked as published.
Can anyone see any issues with the code? Thanks
<?php get_header(); ?>
<div class="clearfix">
<?php if(is_home()) { //if home then show the featured post and others ?>
<div class="main-column">
<?php
$sticky = get_option( 'sticky_posts' );
$sticky_query = new WP_Query( 'p=' . $sticky[0] );
// The Loop
while ( $sticky_query->have_posts() ) : $sticky_query->the_post(); ?>
<div class="featured">
<article class="clearfix">
<h2><?php echo $post->post_title ?></h2>
<p class="who-when">by <?php echo get_the_author_meta('first_name'); ?> <?php echo get_the_author_meta('last_name') ?> on <?php echo get_the_date() ?> </p>
<?php if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
echo '<a href="'.get_permalink().'">';
the_post_thumbnail();
echo '</a>';
} else {
echo '<img src="'. get_bloginfo('template_directory') .'/images/thumb-placeholder.png" alt="Blog thumbnail" />';
}?>
<p><?php the_excerpt_max_charlength(300) ?></p>
</article>
</div>
<?php endwhile; ?>
<div class="articles">
<?php $query = new WP_Query( array( 'post__not_in' => get_option( 'sticky_posts' ), 'posts_per_page' => 10 ) );
$count = 0;
while ( $query->have_posts() ) : $query->the_post();
$count++; ?>
<div <?php if($count % 2 == 0) echo 'class="no-margin"' ?>>
<article>
<h2><?php echo $post->post_title ?></h2>
<p class="who-when">by <?php echo get_the_author_meta('first_name'); ?> <?php echo get_the_author_meta('last_name') ?> on <?php echo get_the_date() ?> </p>
<?php if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
echo '<a href="'.get_permalink().'">';
the_post_thumbnail();
echo '</a>';
} else {
echo '<img src="'. get_bloginfo('template_directory') .'/images/thumb-placeholder.png" alt="Blog thumbnail" />';
}?>
<p><?php the_excerpt_max_charlength(150) ?></p>
</article>
</div>
<?php if($count % 2 == 0) echo '<hr/>' ?>
<?php endwhile; ?>
</div>
<?php }else if(is_search() || is_category || is_tag()){ //if other than home (search, tag, category) then show normal list (no featured style) ?>
<div class="main-column search">
<?php
$count = 0;
if(is_search()){
echo '<h1>Search Results</h1>';
} elseif(is_author()){ ?>
<?php $curauth = (isset($_GET['author_name'])) ? get_user_by('slug', $author_name) : get_userdata(intval($author)); ?>
<h1><?php echo $curauth->user_firstname; ?> <?php echo $curauth->user_lastname; ?></h1>
<div class="archive-meta">
<p><?php echo $curauth->user_description; ?></p>
</div>
<?php } else if(is_category()){ ?>
<h1><?php single_cat_title( '', true ); ?></h1>
<?php
$category_description = category_description();
if ( ! empty( $category_description ) )
echo '<div class="archive-meta">' . $category_description . '</div>';
?>
<?php }else if (is_tag()){
echo '<h1>'.the_tag().'</h1>';
}
if ( have_posts() ) : while ( have_posts() ) : the_post();
$count++; ?>
<div>
<article>
<h2><?php echo $post->post_title ?></h2>
<p class="who-when">by <?php echo get_the_author_meta('first_name'); ?> <?php echo get_the_author_meta('last_name') ?> on <?php echo get_the_date() ?> </p>
<?php if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
echo '<a href="'.get_permalink().'">';
the_post_thumbnail();
echo '</a>';
} else {
echo '<img src="'. get_bloginfo('template_directory') .'/images/thumb-placeholder.png" alt="Blog thumbnail" />';
}?>
<p><?php the_excerpt_max_charlength(300) ?></p>
</article>
</div>
<?php endwhile; else: ?>
<p>Sorry, no posts matched your criteria.</p>
<?php endif; ?>
<?php } ?>
</div>
<?php get_sidebar(); ?>
</div>
<?php get_footer(); ?>
Changing the code to:
$sticky_query = new WP_Query( 'p=' . $sticky[1] );
fixes the problem but I don't know why???