I am trying to get an effect like on this site so that when I click a div, jquery takes the id of the current clicked div and stores it in a variable.
$(function (){
$('.project-wrapper').click(function() {
var id = $(this).attr('id');
jQuery.ajax({
type: 'post',
url:'wp-content/themes/MartinFjeldUpdated/header.php',
dataType : 'HTML',
data:{"id" : id},
success: function(rs)
{
$(".display-video-image-graphic-fade").fadeIn(500);
}
});
});
});
Then I would like to get that variable to a php variable so that is automatically change the content I want to fade in simply by clicking the thumbnail of a post.
<?php
$paged = $_post['id'];
$args= array(
'id' => $paged,
);
query_posts($args);; if (have_posts()) : while (have_posts()) : the_post(); ?>
<div data-id="<?php echo get_the_ID();?>" class="display-video-image-graphic-fade">
<div class="display-outer-frame">
<div class="display-middle-frame">
<div class="video-frame">
<div id="slider">
<ul class="slides">
<?php the_content(); ?>
</ul>
</div>
</div>
<div class="title">
<h3 class="title-head"> <?php echo the_title(); ?></h3>
</div>
<div class="options">
<div class="inliner back-forth">
<div id="left" class="arrows">
<img src="wp-content/themes/MartinFjeldUpdated/images/left.pdf">
</div>
<div id="right" class="arrows">
<img src="wp-content/themes/MartinFjeldUpdated/images/right.pdf">
</div>
</div>
<div class="inliner out-cross">
<div class="cross">
<img src="wp-content/themes/MartinFjeldUpdated/images/cross.pdf">
</div>
</div>
</div>
</div>
</div>
</div>
<?php endwhile; else : endif; ?>
Somehow it does not work.. I am a real amateur in this, so if you need more explaining, please let me know and I'll try my best.
Thanks.
Related
I've inherited a legacy CMS.
The articles at the top are parsing the correct url
https://www.tptg.co.uk/news
But when you click more articles at the bottom of the page ajax is pulling through the incorrect href ( /blog/id/post-name instead of the correct and working /
<div class="col-lg-12 col-xs-12">
<button id="load-more" class="btn btn-primary center-block more-news-btn">
more articles
</button>
</div>
</div>
<script>
$(document).ready(function() {
$("#load-more").click(function() {
var ids = new Array();
$("article").each(function(i, o) {
var id = $(o).data("blog-id");
ids.push(id);
});
ids = JSON.stringify(ids);
var searchTerm = $("input[name='searchTerm']").val();
$.ajax({
url: '<?="https://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]"?>',
context: document.body,
crossDomain: true,
data: {
excludeIDs: ids,
blockID: "blog_listing",
searchTerm: searchTerm
}
}).done(function(data) {
// if the response ends in last tag then remove the load more button
if (data.substr(data.length - 8) == '<last />')
target.hide();
$('#article-col').append(data);
});
})
})
</script>
Earlier in the template file (for the blog listing page) there is the array of the working posts which looks like this
<div id="blog-article-wrapper">
<?php if( count( $articles ) > 0 ): ?>
<div class="col-xs-12 col-lg-12 blog-columns" id="article-col">
<?php foreach( $articles as $i => $article ): ?>
<?php require( dirname(__FILE__)."/puredata_article.php"); //this is the actual article template thats shared between normal page loads and ajax requests ?>
<?php endforeach; ?>
</div>
<?php else: ?>
<p class="text-xs-center p-x-2 p-y-2">
No news to display
</p>
<?php endif; ?>
<div class="col-lg-12 col-xs-12">
<button id="load-more" class="btn btn-primary center-block more-news-btn">
more articles
</button>
</div>
</div>
Then the file mentioned there is
<?php
use Fluid\Ignite4\Config;
use \IgniteApp\viewHelpers\PageViewHelper;
?>
<div class="col-xl-4 col-lg-6 col-md-12 col-sm-12 col-xs-12">
<article class="m-b-1 blog-post" data-blog-id="<?= $article->getPrimaryKeyValue() ?>">
<?php if( $article->hasImage() ): ?>
<a href="<?= PageViewHelper::url($blogPage , $article , false ) ?>">
<?= $article->getImage()->setClasses("img-fluid blog-image") ?>
</a>
<?php endif; ?>
<h1 class="p-x-3 p-t-2 p-b-1" style="line-height: 0.8em !important;">
<a href="<?= PageViewHelper::url($blogPage , $article , false ) ?>">
<?= $article->title ?>
</a>
</h1>
<p class="teaser p-x-3 p-b-1">
<?= $article->teasercontent ?>
</p>
<hr>
<div class="wide-article-footer clearfix p-x-3 p-b-1">
<?php if( $article->getPublisher()->hasImage() ):?>
<div class="publisher-image pull-left">
<a href="<?= PageViewHelper::url( $blogListingPage , false , false , array( " author " => $article->getPublisher()->getPrimaryKeyValue() )) ?>">
<?= $article->getPublisher()->getImage()->setClasses("img-fluid") ?>
</a>
</div>
<?php endif; ?>
<div class="pull-left p-l-2 p-t-2 p-b-2">
<p>
<a style="color: #1A1A1A; font-weight: 500;" href="<?= PageViewHelper::url( $blogListingPage , false , false , array( " author " => $article->getPublisher()->getPrimaryKeyValue() )) ?>">Posted by
<?= $article->getPublisher()->user ?>
</a></br>
<?= $article->getCreated()->format("F j, Y") ?>
</p>
</div>
<div class="pull-right share-wrapper clearfix">
<?php /*
<div class="share-text visible">
<p>
<a class="share-text-link">
<i class="fa fa-share-alt" aria-hidden="true"></i> SHARE
</a>
</p>
</div> */ ?>
</div>
</div>
<!-- end wide article footer -->
</article>
</div>
Please help I'm really stuck with this one I've project searched for the /blog/ and /view-article/ permalink and in the database only the id and post names are specified.
My current blog page shows all my blog posts in a grid of 3 by 'x'. However at the top I want to display the latest blog post as some sort of a featured post and thus style it a bit different (i.e full width). I tried doing it through css with :first-child but that didn't really work well. So now I'm trying the php approach. I however have no clue how to approach this. Can anyone show me where to start? This is my current code.
<section id="blogs" class="cards-list">
<div class="container cards">
<div class="row center-xs">
<?php
if(get_post_type() == 'post') {
$currentBlog = get_the_ID();
} else {
$currentBlog = '';
}
$loopBlog = new WP_Query(array(
'post_type' => 'post',
'posts_per_page' => -1,
'post__not_in' => array($currentBlog)
));
while ( $loopBlog->have_posts() ) : $loopBlog->the_post();
$blogIntro = get_field('blog_intro');
$blogImage = get_field('blog_image');
$blogImageUrl = $blogImage['sizes']['large'];
?>
<div class="col col-xs-12 col-md-4">
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" class="card card-event">
<figure style="<?php if($blogImageUrl != '') { echo "background-image:url('".$blogImageUrl."');"; } ?>"></figure>
<div class="content">
<span class="tag"><?php the_time('M d Y'); ?></span>
<div class="link"><h3><span><?php the_title(); ?></span></h3></div>
</div>
</a>
</div>
<?php
endwhile; wp_reset_query();
?>
</div>
</div>
You should be able to use current_post inside the loop and output different markup for the first post:
while ( $loopBlog->have_posts() ) : $loopBlog->the_post();
$blogIntro = get_field('blog_intro');
$blogImage = get_field('blog_image');
$blogImageUrl = $blogImage['sizes']['large'];
?>
<?php if ($loopBlog->current_post == 0): ?>
<!-- Output some other markup for the first post here -->
<div class="container-fluid">
</div>
<?php else: ?>
<div class="col col-xs-12 col-md-4">
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" class="card card-event">
<figure style="<?php if($blogImageUrl != '') { echo "background-image:url('".$blogImageUrl."');"; } ?>"></figure>
<div class="content">
<span class="tag"><?php the_time('M d Y'); ?></span>
<div class="link"><h3><span><?php the_title(); ?></span></h3></div>
</div>
</a>
</div>
<?php endif; ?>
<?php endwhile; wp_reset_query(); ?>
This code needs to be refactored to be "dynamic" in a preview of all blog posts.
The idea of a carousel was too simple, instead I am looking to make the next buttons call the next 3 blog posts.
How would I do that?
I have resources that say I should call "echo"
<div class="blog-content-discussion glow-blue">
<div class="main-title">
All Discussions
</div>
<div class="row" style="margin-top:10px; display:flex;">
<?php
// create a back link if current page greater than 0
$curPage = 0;
if ($curPage == 0) {
?>
<div class="col-md-3">
<div class="img-box">
<img src="img/dog-paw.jpeg" height=25 width=25 />
</div>
<div></i></div>
Also the javascript is not working
$('#users').delegate('#next').delegate('#next', 'click', function() {
$(this).html('Loading...'); // Loader message
$.ajax( {
url: this.href, // URL from next link
success: function(data) {
$('#discuss').after(data).remove();
}
});
return false;});
</div>
<?php
} else {
// otherwise leave the cell empty
//echo ' ';
}
while($row1=mysqli_fetch_array($res1))
{
?>
<div class="col-md-3">
<div class="img-box">
<img src="img/dog-paw.jpeg" height=100 width=100 />
</div>
<div><?php echo $row1['post_owner']; ?></div>
</div>
<?php
}
?>
<div class="col-md-3">
<div class="img-box">
<img src="img/dog-paw.jpeg" height=25 width=25 />
</div>
<div></i></div>
</div>
</div>
</div>
I have a custom post type set up called TESTIMONIALS and two CPT categories set up which are CLIENT TESTIMONALS & CLINIC TESTIMONIALS
I am trying to display only the posts from the CLIENT TESTIMONALS CPT category.
What would I need to add to the below to achieve this?
<div role="tabpanel" class="tab-pane fade" id="profile">
<?php query_posts('post_type=testimonials'); ?>
<?php while ( have_posts() ) : the_post(); ?>
<div class="testimonial-holder wrap ">
<div class="three-quarters">
<h2>
<?php the_title(); ?>
</h2>
<div class="testi">
<?php the_content(); ?>
</div>
</div>
<div class="four-col right center">
<div class="testimonial-autor-image"> <img src="<?php the_field('author_image_or_clinic_logo'); ?>" alt="Author Image">
<div class="mt20">
<?php the_field('testimonial_author'); ?>
</div>
</div>
</div>
</div>
<?php endwhile; // end of the loop. ?>
</div>
You can use something like this.
<?php
$type = 'testimonials';
$args=array(
'post_type' => $type,
'category'=>'CPT',
'post_status' => 'publish'
);
$my_query = new WP_Query($args);
if( $my_query->have_posts() ) {
while ($my_query->have_posts()) : $my_query->the_post(); ?>
<div class="testimonial-holder wrap ">
<div class="three-quarters">
<h2>
<?php the_title(); ?>
</h2>
<div class="testi">
<?php the_content(); ?>
</div>
</div>
<div class="four-col right center">
<div class="testimonial-autor-image"> <img src="<?php the_field('author_image_or_clinic_logo'); ?>" alt="Author Image">
<div class="mt20">
<?php the_field('testimonial_author'); ?>
</div>
</div>
</div>
</div>
<?php
endwhile;
}
?>
I'm using Wordpress for my website. What I'm trying to achieve is that if I hover on a specific post, it should show the title of that very post. But what it does right now, is that if I hover on one post, it displays the title of all the posts.
The code:
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div class="post">
<div>
<div class="post-header"><a href="<?php the_permalink() ?>">
<?php if ( p75HasThumbnail($post->ID) ) { ?>
<img src="<?php echo p75GetThumbnail($post->ID, 200, 108); ?>" alt="<?php the_title(); ?>" width="200" height="108" />
<?php } ?>
</a></div>
<div class="post-content" style="display:none;">
<h2><?php the_title(); ?></h2>
</div>
<div class="post-footer">
<small>
In: <?php the_category(' | ') ?>
</small>
</div>
</div>
</div>
<!-- -->
<?php endwhile; ?>
<?php next_posts_link('<div class="post archiveTitle "><div>← Older</div></div>') ?>
<?php previous_posts_link('<div class="post archiveTitle "><div>Newer →</div></div>') ?>
<?php else : ?>
<div class="post">
<div>
<h1>Not Found</h1>
<p>Sorry, but you are looking for something that isn't here.</p>
</div>
</div>
<?php endif; ?>
JS:
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('.post-header').hover(function(){
$('.post-content').show();
}, function(){
$('.post-content').hide();
});
});
</script>
I'm not sure, if it's this, what you want to achieve:
$('.post-header').hover(function(){
$('.post-content', $(this).parent()).show();
}, function(){
$('.post-content').hide();
});
Now only the post-content of the currently hovered post is shown.