i just setup isotope manually into my website after that i dynamic it with the help of get_terms and get_ther_terms condition here is the full code
<div class="main_page">
<div class="portfolio_section">
<div class="controls">
<button type="button" class="control" data-filter="all">All</button>
<?php
$cat_list = get_terms('filters');
foreach ($cat_list as $cat) :
?>
<button type="button" class="control" data-filter=".<?php echo $cat->slug;?>"><?php echo $cat->name; ?></button>
<?php endforeach; ?>
</div>
<div class="container pasresnt">
<?php
$mixitup = new WP_Query(array(
'post_type' => 'portfolio',
'posts_per_page' => -1,
));
?>
<?php while ($mixitup->have_posts()) : $mixitup->the_post() ; ?>
<div class="mix <?php
$cat_slug = get_the_terms($post->ID, 'filters');
foreach ($cat_slug as $cat_sl) {
echo $cat_sl->slug;
}
?>">
<?php the_post_thumbnail('portfolio-small'); ?>
</div>
<?php endwhile; ?>
<div class="mix green">
<a href="<?php echo get_template_directory_uri(); ?>/img/mahi.jpg"><img src="<?php echo get_template_directory_uri(); ?>/img/mahi.jpg"
alt=""></a>
</div>
</div>
</div>
</div>
Here is the highlights in normal static image popup come correctly with this code
<a href="<?php echo get_template_directory_uri(); ?>/img/mahi.jpg"><img src="<?php echo get_template_directory_uri(); ?>/img/mahi.jpg"
alt=""></a>
but in dynamic this images popup doesn't work for me .the last static one is as example which is work perfectly but this line code which is the images come from portfolio custom post options this pop up not working
<?php the_post_thumbnail('portfolio-small'); ?>
`
You are using the_post_thumbnail for the href. That outputs the html to display the image, but you only want the URL to put into the href attribute of your link, so use get_the_post_thumbnail_url() instead.
So instead of this:
<?php the_post_thumbnail('portfolio-small'); ?>
You should use this:
<a href="<?php echo get_the_post_thumbnail_url(get_the_ID(), 'portfolio-small'); ?>" target="_blank">
<?php the_post_thumbnail('portfolio-small'); ?>
</a>
Related
The featured thumbnail image is supposed to just show the single thumbnail image of the post but instead it pulls every post image and displays them instead for every post. Instead of just the post thumbnail. This is the code for it and also what it looks like on the page:
<?php $featured_image = new WP_Query('page_id=ID'); ?>
<?php while ($featured_image->have_posts()) : $featured_image->the_post(); ?>
<?php if (function_exists('has_post_thumbnail') && has_post_thumbnail()) { ?>
<?php $img_src = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), array(302, 170)); ?>
<div class="the-image">
<img src="<?php echo $img_src[0]; ?>" />
</div>
<?php }; ?>
<?php endwhile; ?>
thats the code for servering the image and heres what happens on the main page (I have 2 posts currently and a featured test image for both of them, the scaling works but as you can see, it puts both images, on both posts...)
I'm not sure if it needs to be inside my loop for the title and excerpt, or outside of it (currently inside).
Here is the full code for the recent posts sidebar:
<div class="col-lg-4 d-none d-lg-block">
<h3 style="text-align: center; font-weight: 700;">Recent Posts</h3>
<?php
$result = wp_get_recent_posts(array(
'numberposts' => 10,
'category' => '',
'post_status' => 'publish',
));
foreach( $result as $p ){
?>
<div class="paddingarea text-dark">
<?php if (function_exists('has_post_thumbnail') && has_post_thumbnail()) { ?>
<?php $img_src = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), array(302, 170)); ?>
<div class="the-image">
<img src="<?php echo $img_src[0]; ?>" />
</div>
<?php }; ?>
<a class="card-title" href="<?php echo get_permalink($p['ID']) ?>" style="font-weight: 600;"><?php echo $p['post_title']?></a><br />
<p class="card-text"><?php echo excerpt(10); ?></p>
</div>
<?php
}
?>
</div>
Try this, it's simple and it's working for me:
<?php
$result = wp_get_recent_posts(array(
'numberposts' => 10,
'category' => '',
'post_status' => 'publish',
));
foreach( $result as $p ){
?>
<div class="paddingarea text-dark">
<div class="the-image">
<img src="<?php echo get_the_post_thumbnail_url($p['ID'], array(302, 170)); ?>" />
</div>
<a class="card-title" href="<?php echo get_permalink($p['ID']) ?>" style="font-weight: 600;"><?php echo $p['post_title']?></a><br />
<p class="card-text"><?php //echo excerpt(10); ?></p>
</div>
<?php
}
?>
I'm a newbie and I'm creating an homepage where there are 4 blocks from this loop:
<?php $query = new WP_Query( [
'post_type' => 'cases',
'nopaging' => false,
'posts_per_page' => '4',
] ); ?>
<?php if ( $query->have_posts() ) : ?>
<div class="container-fluid">
<div class="roundedframe">
<?php while ( $query->have_posts() ) : $query->the_post(); ?>
<div id="case-study-box" style="background-image: url('<?php the_post_thumbnail_url(); ?>');" class="col-lg-6 col-sm-12">
<a class="portfolio-box " href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<div><img src="<?php echo $slideCentralImage['url']; ?>"></div>
<div class="project-name">
<h2><?php the_title(); ?></h2>
</div>
<div class="portfolio-excpert">
<p><?php the_excerpt(); ?></p>
</div>
</div>
</div>
</a>
</div>
<?php endwhile; ?>
</div>
</div>
<?php endif; ?>
<?php wp_reset_postdata(); ?>
Each block is a portfolio item which has many custom fields created with Advanced Custom Fields.
What I need is to get and display them on hover like a "caption".
Actually only the_title and the_permalinkg are working, but I don't know how to get the logo and the excerpt of them.
How can I achieve it?
You can use <?php echo get_field('whateverField');?> and do not forget to change return value image URL.
You can use get_field('<field_name>') to return or the_field('<field_name>') to print the values. You can read more here - https://www.advancedcustomfields.com/resources/displaying-custom-field-values-in-your-theme/.
Just add like this <div><img src="<?php the_field('slide_central_image'); ?>"></div>, where slide_central_image is your image field name. Don't forgot to change 'Return Value' to 'Image URL'.
I'm trying to make wp list pages with thumbnails and other good stuff. But when i add the_permalink to my titles thumbnails etc and click on them, they are just refreshing the parent page and not getting the title(page) url. I'll insert what I have maybe someone knows how to fix it? Will be happy for any help ! THANKS
What I have
<div id="archive-thumbnails-listing" >
<?php $pages = get_pages(array('child_of' => 352)); ?>
<?php foreach ($pages as $page): ?>
<div class="thumb22">
<div class="thumb20"><a href="<?php the_permalink(); ?>">
<?php echo get_the_post_thumbnail($page->ID, 'full'); ?></a></div>
<div class="thumb19"><?php echo $page->post_title; ?></div>
</div>
<?php endforeach; ?>
</div>
try this: echo get_the_permalink($page->ID);
<div class="thumb19"><?php echo $page->post_title; ?></div>
</div>
I have try all the functions related to print categories that the codex provide, but i havent found any way that works for me.
Im trying to print the categories slug for put it inside a class.
I want to print the category of the actual post in div with the class proyect, so then i can use it to filter with isotope.
<!-- feature posts -->
<div id="container">
<?php $the_query = new WP_Query('showposts=5&orderby=post_date&order=DESC'); ?>
<?php while ($the_query->have_posts()) : $the_query->the_post();
$id = get_the_ID(); ?>
<div class="proyect <?php wp_get_post_categories($id); ?>">
<div class="view view-tenth">
<a style="display:block;" href="<?php the_permalink(); ?>">
<article> <?php if ( function_exists("has_post_thumbnail") && has_post_thumbnail() ) { the_post_thumbnail('', array("class" => "")); } ?></article>
</a>
<div class="mask">
<h2><?php echo substr(strip_tags(get_the_title()),0,35); ?></h2></a>
<p class="fecha-post"><?php the_time('F j, Y'); ?></p>
<?php echo substr(strip_tags(get_the_content()),0,100); ?>
<a class="info" href="<?php the_permalink(); ?>">Ver más...</a>
</div>
</div>
</div>
<?php endwhile;?>
</div>
<!-- #feature post -->
From http://wordpress.org/support/topic/getting-category-slug-from-posts-in-the-loop:
<li class="<?php foreach(get_the_category() as $category) { echo $category->slug . ' ';} ?>">
You should be able to use:
$cats = wp_get_post_categories($post->ID);
This will be an array of the categories associated with this post. Then you can loop through them and do whatever you need.
I'm trying to finish 'themeing' my Wordpress / jQuery / JS slider; I currently have it where it successfully grabs the most recent Wordpress posts, but doesn't fully cycle through them in the main 'featured window'? (JavaScript error?) Also, I've yet to be able to successfully add the 'featured_image' to allow setting the image used in the 'featured window'.
I've gotten this far via some help at the base question: 'Themeing' my Slider in WP with PHP
Below is the code I'm using:
<?php
/**
* #package WordPress
* #subpackage Default_Theme
*/
$pagePtr="home";
include # ("header.php");
//get_header(); ?>
<div id="content">
<?php
/**
* #package WordPress
* #subpackage Default_Theme'
*/
//get_header(); ?>
<div id="content">
<?php if (have_posts()) : ?>
<!--Your slider code goes here-->
<?php
$args = array(
'numberposts' => 5,
'orderby' => 'post_date',
'order' => 'DESC'
);
$posts_array = get_posts( $args );
?>
<div id="featured" >
<ul class="ui-tabs-nav">
<?php
$i = 1;
foreach ($posts_array as $post) : setup_postdata($post);
?>
<li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-<?php echo $i; ?>"><img src="<?php echo $featured_image; ?>" alt=""/><span><?php the_title(); ?><br /><p class="info" style="padding-left:10px;"><?php the_excerpt(); ?></p></span></li>
<?php $i++;
endforeach; ?>
</ul>
<?php
$i = 1;
foreach ($posts_array as $post) : setup_postdata($post);
?>
<!-- First Content -->
<div id="fragment-<?php echo $i; ?>" class="ui-tabs-panel" style="">
<img src="<?php the_post_thumbnail('slider_image'); ?>" alt="" />
<div class="info" >
<h2><a href="<?php the_permalink(); ?>" ><?php the_title(); ?></a></h2>
<p><?php the_excerpt(); ?><a href="<?php the_permalink(); ?>" >read more</a></p>
</div>
</div>
<?php $i++; endforeach; ?>
</div>
<!--Your slider code goes here-->
<!-- End Featured Lists Image Slider -->
<?php endif; ?>
<?php if($featured_image= get_post_meta($post->ID, "featured_image", true)) { ?>
<div class="postThumbnail"><img src="<?php echo $featured_image; ?>" height="190" width="125" border="0" /></div>
<?php } ?>
The Live Version via my test site: http://tinyurl.com/7q3o97u
Notice how the right side boxes are working correctly, and bringing in the recent posts - but for some reason the main area / left larger window, is not acting same?? How can I get this working properly??
I'm not sure it's the fundamental cause of your problem, but this line:
<img src="<?php the_post_thumbnail('slider_image'); ?>" alt="" />
is causing a problem in the markup. It renders:
<img src="<img width="940" height="340" src="http://www.osmproduction.com/RIF/wp-content/uploads/2012/03/MaxBrooksRecordedAttacks-940x340.png" class="attachment-slider_image wp-post-image" alt="MaxBrooksRecordedAttacks" title="MaxBrooksRecordedAttacks" />" alt="" />
which isn't right. the_post_thumbnail returns a full HTML img tag, not just the image URL. Try replacing
<img src="<?php the_post_thumbnail('slider_image'); ?>" alt="" />
with
<?php the_post_thumbnail('slider_image'); ?>