I created a loop of posts from terms having a block for each term like the following:
-
Term title
Featured image of one post from that term
List of all posts for that term
-
Right now I'm using 3 terms so it's 3 blocks with that content. The idea is that when you hover the title of one of the posts from a term, the featured image changes to the one from the post hovered.
It is (kind of) working but when I hover a post title, all images change instead of just the one in the block they belong to. I think it is because I somehow need to use unique ID's instead of classes for the Jquery but I don't know how to translate the ID to the Jquery (I'm learning to code in the process of building things)
PHP Code
//Loop throug each taxonomy terms,
foreach ( $terms as $term ) {
//Query argument for post
$args = array(
'post_type' => 'technology', // Or Custom Post Type,
'order' => 'DESC',
'orderby' => 'date',
'taxonomy' => $tax,
'term' => $term->slug, // Query posts for each term based on term slug
'orderby' => 'date',
'order' => 'ASC',
);
$query = new WP_Query( $args );
$posts = $query->get_posts();
$cat_icon = get_term_meta( $term->term_id, 'category-icon', true );
$cat_iconUrl = ( ( $cat_icon != '' ) ? wp_get_attachment_url( $cat_icon ) : '' );
?>
<div class="container-fluid tech-cat-item py-5">
<div class="container">
<div class="row align-items-center pb-3">
<div class="col-1">
<img class="img-fluid" src="<?php echo $cat_iconUrl; ?>">
</div>
<div class="col-11">
<h3><?php echo $term->name;?></h3>
</div>
</div>
<?php
$ga_item = array(
'post_type' => 'technology', // Or Custom Post Type,
'taxonomy' => $tax,
'term' => $term->slug, // Query posts for each term based on term slug
'posts_per_page' => '1',
'orderby' => 'date',
'order' => 'ASC',
);
$ga_query = new WP_Query( $ga_item );
$ga_posts = $query->get_posts();
if ( $ga_query->have_posts() ) {
while ( $ga_query->have_posts() ) {
$ga_query->the_post(); ?>
<div class="row ga-panel py-5">
<div class="col-12">
<?php
$ga_url = get_the_post_thumbnail_url($post->ID,'full'); ?>
<img id="<?php the_ID($post->ID); ?>" class="img-fluid ga-img" src="<?php echo esc_url($ga_url);?>">
</div>
</div>
<?php }
}
wp_reset_query();
?>
<div class="row">
<?php
if ( $posts ) {
foreach ( $posts as $post ) { ?>
<div class="col-4 ga-links py-1">
<a id="<?php the_ID($post->ID); ?>" href="<?php the_permalink( $post->ID ); ?>" data-swap="<?php the_post_thumbnail_url($post->ID,'full'); ?>" > <?php echo $post->post_title; ?></a>
</div>
<?php
}
}
?>
</div>
</div>
</div>
<?php }
wp_reset_query();
?>
EDIT
I found how to use variable for the ID in the jquery, but now the jquery is only working on the first img instance. No matter what link I hover into, the image changes but at the first image....
New Jquery code:
jQuery(document).ready(function () {
jQuery('.ga-links a').hover(function(){
var id = jQuery('.ga-img').attr("id");
jQuery('#' + id).attr('src',this.getAttribute('data-swap'));
console.log(id);
});
})
(any other advice on cleaning up code, or better approaches are appreciated. I'm learning and this weird query is the best approach to what I was trying to do lol)
I created a loop of posts from terms having a block for each term like the following:
-
Term title
Featured image of one post from that term
List of all posts for that term
-
Right now I'm using 3 terms so it's 3 blocks with that content. The idea is that when you hover the title of one of the posts from a term, the featured image changes to the one from the post hovered.
It is (kind of) working but when I hover a post title, all images change instead of just the one in the block they belong to. I think it is because I somehow need to use unique ID's instead of classes for the Jquery but I don't know how to translate the ID to the Jquery (I'm learning to code in the process of building things)
PHP Code
//Loop throug each taxonomy terms,
foreach ( $terms as $term ) {
//Query argument for post
$args = array(
'post_type' => 'technology', // Or Custom Post Type,
'order' => 'DESC',
'orderby' => 'date',
'taxonomy' => $tax,
'term' => $term->slug, // Query posts for each term based on term slug
'orderby' => 'date',
'order' => 'ASC',
);
$query = new WP_Query( $args );
$posts = $query->get_posts();
$cat_icon = get_term_meta( $term->term_id, 'category-icon', true );
$cat_iconUrl = ( ( $cat_icon != '' ) ? wp_get_attachment_url( $cat_icon ) : '' );
?>
<div class="container-fluid tech-cat-item py-5">
<div class="container">
<div class="row align-items-center pb-3">
<div class="col-1">
<img class="img-fluid" src="<?php echo $cat_iconUrl; ?>">
</div>
<div class="col-11">
<h3><?php echo $term->name;?></h3>
</div>
</div>
<?php
$ga_item = array(
'post_type' => 'technology', // Or Custom Post Type,
'taxonomy' => $tax,
'term' => $term->slug, // Query posts for each term based on term slug
'posts_per_page' => '1',
'orderby' => 'date',
'order' => 'ASC',
);
$ga_query = new WP_Query( $ga_item );
$ga_posts = $query->get_posts();
if ( $ga_query->have_posts() ) {
while ( $ga_query->have_posts() ) {
$ga_query->the_post(); ?>
<div class="row ga-panel py-5">
<div class="col-12">
<?php
$ga_url = get_the_post_thumbnail_url($post->ID,'full'); ?>
<img id="<?php the_ID($post->ID); ?>" class="img-fluid ga-img" src="<?php echo esc_url($ga_url);?>">
</div>
</div>
<?php }
}
wp_reset_query();
?>
<div class="row">
<?php
if ( $posts ) {
foreach ( $posts as $post ) { ?>
<div class="col-4 ga-links py-1">
<a id="<?php the_ID($post->ID); ?>" href="<?php the_permalink( $post->ID ); ?>" data-swap="<?php the_post_thumbnail_url($post->ID,'full'); ?>" > <?php echo $post->post_title; ?></a>
</div>
<?php
}
}
?>
</div>
</div>
</div>
<?php }
wp_reset_query();
?>
EDIT
I found how to use variable for the ID in the jquery, but now the jquery is only working on the first img instance. No matter what link I hover into, the image changes but at the first image....
New Jquery code:
jQuery(document).ready(function () {
jQuery('.ga-links a').hover(function(){
var id = jQuery('.ga-img').attr("id");
jQuery('#' + id).attr('src',this.getAttribute('data-swap'));
console.log(id);
});
})
(any other advice on cleaning up code, or better approaches are appreciated. I'm learning and this weird query is the best approach to what I was trying to do lol)
Share Improve this question edited May 11, 2020 at 0:13 artist learning to code asked May 10, 2020 at 20:56 artist learning to codeartist learning to code 3311 gold badge5 silver badges18 bronze badges 6- Can I have the URL of the page where the code is working? – made2popular Commented May 10, 2020 at 22:12
- I'm working on a client site and I don't have permission to post the url publicly and I couldnt use the chat :( – artist learning to code Commented May 10, 2020 at 23:01
- Based on a temporary variable you can define 3 jquery individually so it only works for its own block. – made2popular Commented May 11, 2020 at 10:01
- but how? I think I've tried so hard that I'm blocked lol and the best approach would be to have just one jquery that serves the loop, what if they add another category then there would be 4 variables not 3 :( – artist learning to code Commented May 11, 2020 at 13:58
- Well, it's hard to give the exact solution without looking at the frontend URL. But as per my knowledge try to declare a temporary counter which will serve as the CSS class in each iteration and use that CSS class in your jquery to define the particular block/section. – made2popular Commented May 11, 2020 at 18:03
1 Answer
Reset to default 3 +50I think you could the code working, if you used the current term as the selector as there's only one featured image and multiple links for each term.
For example, first add the term to the image classes,
<img class="img-fluid ga-img ga-img-<?php echo $term->slug; ?>" src="<?php echo esc_url($ga_url);?>">
Then add the term to every post link,
<a href="<?php the_permalink( $post->ID ); ?>" data-swap="<?php the_post_thumbnail_url($post->ID,'full'); ?>" data-term="<?php echo $term->slug; ?>" >
<?php echo $post->post_title; ?>
</a>
Now you should be able to use the term as selector in jQuery,
jQuery(document).ready(function () {
jQuery('.ga-links a').hover(function() {
var currentTerm = jQuery(this).data('term'),
swapImage = jQuery(this).data("swap");
jQuery('.ga-img-' + currentTerm).attr('src', swapImage);
});
});