I am helping a friend coding a movie website with wordpress. He wants to show the filmcast (using Advanced Custom Fields, Repeater Field) on each movie page as follows:
The first three actors (with name as permalink, role and pic) should be displayed openly in a row of three and the rest of them inside a toggle, which can be opend with a “see more” link and closed with a “see less” link.
This is the example, he showed me to understand what he whishes it should look like: https://www.moviepilot.de/movies/the-justice-league
I am working on it since days and have the code ALMOST working. But coding, especially Java Script and ACF are pretty new to me, so I can’t find a solution for two problems:
I have ALL actors inside the toggle now (how to get the first three actors outside the toggle?)
I have only a static button which opens and closes the toggle, but not a “see more” link to open the toggle and a “see less” to close it (as on the example movie page).
I tried every code snippet I found with google, here and on the ACF website. But it seems I am totaly lost. Every help will be very much appreciated!!!
Here is the code I have so far:
<style>
#filmcast-toggle {
width: 100%;
padding: 80px 0;
display: none;
}
</style>
<button onClick="myFunction()">Show/Hide Cast</button>
<div id="filmcast-toggle">
<div class="filmcast-element">
//Page-Element ACF Filmcast
<?php $i = 0; ?>
<?php
// check if the repeater field has rows of data
if( have_rows('filmcast') ):
// loop through the rows of data
while ( have_rows('filmcast') ) : the_row(); ?>
<?php if($i == 0) { echo '<div class="filmcast-row">'; } ?>
<div class="filmcast-half">
<div class="filmcast-person">
<?php $posts = get_sub_field('filmcast-person');
if( $posts ): ?>
<?php foreach( $posts as $post): setup_postdata($post); ?>
<div class="filmcast-image">
<?php the_post_thumbnail ( array (120, 140)); ?>
</div>
<div class="filmcast-name">
<a href="<?php echo get_permalink($post->ID); ?>">
<?php echo get_the_title($post->ID); ?></a>
</div>
<div class="filmcast-rolle">
<?php the_sub_field('filmcast-rolle'); ?>
</div>
<?php endforeach; wp_reset_postdata (); ?>
<?php endif;?>
</div>
</div>
<?php $i++; if($i == 3) { $i = 0; echo '</div>'; } ?>
<?php endwhile; ?>
<?php if($i > 0) { echo '</div>'; } ?>
<?php else :
// no rows found
endif; ?> </div>
</div>
<script>
function myFunction() {
var x = document.getElementById('filmcast-toggle');
if (x.style.display === 'none'|| x.style.display == '') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
</script>
Related
Situation
I'm creating a custom Wordpress website where I want to show the most recent articles grouped by day and have it scroll infinitely when you've reached the bottom of your screen.
Problem
I don't know how to continue with the date you were on without breaking the layout.
I've seen many code that involve having infinite scroll, but none of them really worked for me since it also needs to match the design.
Here is the design:
The image pretty much explains what I need to create and so I've written the following code:
<div class="recent">
<?php
$args = array(
'posts_per_page' => -1,
'orderby' => 'date'
);
$myQuery = new WP_Query($args);
$date = '';
$postCount = 0;
$newDay = false;
if ( $myQuery->have_posts() ) : while ( $myQuery->have_posts() ) : $myQuery->the_post();
$postCount++;
if ( $date != get_the_date() ) {
if ( $postCount != 1 ) {
$newDay = false;
if (!$newDay) {
?></div><?php
}
?>
</div>
<?php
}
?>
<div class="recent__articles">
<?php
$newDay = true;
$date = get_the_date();
?>
<div class="recent__header">
<img class="header__icon" src="<?php echo get_home_url() ?>/wp-content/themes/insane/assets/images/time.svg" alt="time-icon">
<?php echo $date; ?>
</div>
<?php
if ($newDay) {
?>
<div class="articles__wrapper"><?php
}
}
?>
<div class="recent__article">
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
<figure class="article__image">
<?php if ( has_post_thumbnail() ) :
the_post_thumbnail();
else : ?>
<img src="<?php echo get_home_url() ?>/wp-content/themes/insane/assets/images/article-placeholder.png" alt="image-placeholder">
<?php endif ?>
</figure>
<div class="article__meta">
<span class="article__cat">
<?php
foreach((get_the_category()) as $category){
echo $category->name;
}
?>
</span>
<h2 class="article__title"><?php echo get_the_title() ?></h2>
<div class="article__date">
<?php echo esc_html( time_difference( get_the_time('U'), current_time('timestamp') ) ); ?>
</div>
</div>
</a>
</div>
<?php
endwhile; endif;
wp_reset_postdata();
?>
</div>
Top part where I check the date and increment the postCount is so I can group the articles of that day in separate div and style it accordingly.
Now all I need is to check wether I've reached the bottom and continue with where I left off.
Any help with the directions I need to be going is much appreciated.
Thank you!
I've fixed my problem in combination with the Ajax Load More plugin.
I hope this will help others facing the same problem as I did.
If anybody sees improvement in my code, I'd much appreciate it.
Tested on: MacOS - Chrome/Safari/Firefox & iOS - Chrome/Safari
I've installed the Ajax Load More plugin
They have a Repeat Templates section which is basically the while loop in php and I've added the following code (a bit stripped from what I've showed here above).
<?php $postCount++;
if ( $date != get_the_date() ) {
if ( $postCount != 1 ) {
$newDay = false;
if (!$newDay) {
?></div><?php
}
?>
</div>
<?php
}
?>
<div class="recent__articles">
<?php
$newDay = true;
$date = get_the_date();
?>
<div class="recent__header">
<img class="header__icon" src="<?php echo get_home_url() ?>/wp-content/themes/insane/assets/images/time.svg" alt="time-icon">
<?php echo $date; ?>
</div>
<?php
if ($newDay) {
?>
<div class="articles__wrapper"><?php
}
}
?>
<div class="recent__article">
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
<figure class="article__image">
<?php if ( has_post_thumbnail() ) :
the_post_thumbnail();
else : ?>
<img src="<?php echo get_home_url() ?>/wp-content/themes/insane/assets/images/article-placeholder.png" alt="image-placeholder">
<?php endif ?>
</figure>
<div class="article__meta">
<span class="article__cat">
<?php
foreach((get_the_category()) as $category){
echo $category->name;
}
?>
</span>
<h2 class="article__title"><?php echo get_the_title() ?></h2>
<div class="article__date">
<?php echo esc_html( time_difference( get_the_time('U'), current_time('timestamp') ) ); ?>
</div>
</div>
</a>
</div>
I've a .php file that I load in somewhere els that looks like this:
<div class="recent">
<?php
$date = '';
$postCount = 0;
$newDay = false;
echo do_shortcode("[ajax_load_more post_type='post' posts_per_page='2' scroll_distance='0']");
?>
</div>
Now for the last part I've written the following in jQuery:
// Ajax load more fix
function ajaxShowMore() {
var oldXHR = window.XMLHttpRequest;
function newXHR() {
var realXHR = new oldXHR();
realXHR.addEventListener("readystatechange", function() {
if (realXHR.readyState === 4) { // When the Ajax call is finished new content is loaded
var oldRecentHeaders = $('.recent__header'); // Store all previous recent headers in variable
setTimeout(function() { // Set a timeout, since it goes a bit to fast to store the data
var newRecentHeaders = $('.recent__header'); // Store all the headers in a variable
newRecentHeaders.splice(0, oldRecentHeaders.length); // Splice it, so you only get the new added headers
if (newRecentHeaders.first().text() === oldRecentHeaders.last().text()) { // Check if the first of new header date is the same as the last of the old header date
var newArticles = newRecentHeaders.first().parent().find('.articles__wrapper').children(); // Store all the articles
newRecentHeaders.first().parent().remove(); // Remove the first new added articles
oldRecentHeaders.last().parent().find('.articles__wrapper').append(newArticles); // Add them here
}
}, 10);
}
}, false);
return realXHR;
}
window.XMLHttpRequest = newXHR;
}
So for me this specific solution works, based on the classes and structure of my project I've set.
I hope this helps
I've flexible content based on wordpress page which gives our client opportunities to configure pop-ups in specific page by himselfs.
So the problem is that on one page we've quite a few, let's say infinity numbers of rows of content.
Every specific row has a unique ID created by counting "$i++;".
I'm trying to create a script which will give me the possibility to create unique pop-ups for unique flexible content automatically, based on numbers of current rows.
Here is PHP code
<div class="row">
<?php if( have_rows('service_component') ): $i = 0; ?>
<?php while( have_rows('service_component') ): the_row(); $i++; ?>
<div class="six columns">
<img onclick="openRightMenu()" src="<?php the_sub_field("feature_image"); ?>">
<h3><?php the_sub_field("title"); ?></h3>
<div class="servicesHidden sidenav" id="right_slider_<?php echo $i; ?>">
×
<?php the_sub_field("services"); ?>
</div>
</div>
<?php endwhile; ?>
<?php endif; ?>
</div>
Code above works correctly: content is generated and every div is unique:
<div class="servicesHidden sidenav" id="right_slider_<?php echo $i; ?>">
So next step is to create javascript. Code below also works properly, but only on one unique ID.
<script>
function openRightMenu() {
document.getElementById("right_slider_1").style.width = "33%";
document.getElementById("main").style.marginRight = "33%";
document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
}
function closeRightMenu() {
document.getElementById("right_slider_1").style.width = "0";
document.getElementById("main").style.marginRight = "0";
document.body.style.backgroundColor = "white";
}
</script>
Question is: how to modify function above to to let it display and hide unique content endlessly?
You could pass the id into the function
function openRightMenu(id) {
document.getElementById(id).style.width = "33%";
...
}
And in your html
<img onclick="openRightMenu('right_slider_<?php echo $i; ?>')" src="<?php the_sub_field("feature_image"); ?>">
i am making a php project social media like facebook. in timeline page a i want to show ther user post like text, image or video or all these. i am confuse to make a code.
my uploading code is this
if(isset($text)){
$flagt=1;
}
if(isset($name)){
$flagi=1;
}
if(isset($video)){
$flagv=1;
}
if($flagt==0 && $flagi==0 && $flagv==0) {
echo "nothing to upload";
}
else{
$sql="insert into post(u_id,p_text,p_image,p_video)values('{$_SESSION['id']}',";
$val=0;
if ($flagt==1) {
$val="'$text'";
}
if ($flagi==1 && $flagt==1) {
$val.=",'$name'";
upload('image','../user_uploads');
}
if ($flagt==1 && $flagi==1 && $flagv==1) {
$val.=",'$video'";
upload('image','../user_uploads');
upload('video','../video');
if ($flagt==1 && $flagi ==0 && $flagv==1) {
$val.=",'$video'";
upload('video','../video');
if ($flagt==0 && $flagi ==1 && $flagv==1) {
$val.=",'$video'";
upload('image','../user_uploads');
upload('video','../video');
}
}
}
$sql.=$val.")";
}
any one can help me?
i want to show this data at my timeline page
using php pdo fetch data from database.
$stmt = $this->_db->prepare('SELECT u_id,p_text,p_image,p_video FROM post ORDER BY count DESC');
$stmt->execute();
$posts = $stmt->fetchAll();
now use $posts to show data in timeline page.
<?php if (isset($posts)): ?>
<?php foreach ($posts as $post): ?>
<!-- posts -->
<div class="clearfix">
<p><?php echo $post['p_text']; ?></p>
<?php if (isset($post['p_image'])): ?>
<img src='<?php echo $post['p_image']; ?>'>
<?php endif ?>
<?php if (isset($post['p_video'])): ?>
<img src='<?php echo $post['p_video']; ?>'>
<?php endif ?>
</div>
<?php endforeach ?>
<?php endif ?>
I have experimented with some plugins and some tutorials, but most tutorial available deal with infinite load, adaptations of the Ajax Load more button, or are not relevant to WordPress sites, and even these are not very useful to the question.
What I hope to achieve is a set of rows with Load More buttons. For example:
ROW 1 (3 posts from Cat=1)
[Load More]
ROW 2 (3 posts from Cat=2)
[Load More]
where each Load More press loads 6 more from that Category.
The code I have for the 3 post rows is:
<div class="container">
<?php $posts = get_posts( "cat=1&numberposts=3" ); ?>
<?php if( $posts ) : ?>
<?php foreach( $posts as $post ) : setup_postdata( $post ); ?>
<?php $column = ($column == '') ? 'first' : (($column == 'first') ? 'middle' : (($column == 'middle') ? 'last' : 'first' )); ?>
<div class="post <?php echo $column; ?>" id="post-<?php the_ID(); ?>" >
<a href="<?php echo get_permalink($post->ID); ?>" >
<h3><?php echo $post->post_title; ?></a></h3>
<?php if ( has_post_thumbnail()) : the_post_thumbnail('columner-thumb'); endif; ?>
</div>
<?php endforeach; ?>
<?php endif; ?>
</div>
Is there a way to add into this code a Load More button to display more from the category?
Thank you for any help on this javascript question.
After hours of research and try and errors I start my first question here.
If it can be done with wordpress syntax even better. Otherwise I think I'm near to the solution.
I want a custom gallery on a wordpress template page but with the post image from certain categories with the content from it. So far so good.
In my designerin.php template I give every images a class img-x.
class="img-<?php echo $img_counter; ?>
And the content get the id img-x
id="img-<?php echo $post_counter; ?>
The counter is just an increment. So image 1 has class img-1, image 2 img-2 and so on.
Now I want the related content of that image created in the wordpress editor showing up when you are clicking on this specific image.
Say you click on image 5 and want the content from image 5.
I'm stucked on the step where I say (in jQuery), that display the content
if .img-x == #img-x {
display the_content()
}
Enough said - here is my jQuery code:
$(".large-img-wrapper").hide();
$('.gallery li').on('click', function(e) {
e.preventDefault();
var largeImgLink = $(this).find('a').attr('href');
$(".large-img-wrapper").first().fadeIn();
var imgContent = $('#img-5').html();
$('#large-img').remove();
$('#append-id').remove();
$(".large-img").append('<img id="large-img" src="' + largeImgLink + '">').fadeIn();
$(".large-img").append('<div id="append-id">' + imgContent + '</div>').fadeIn();
$(".large-img-container .img-title").remove();
});
The var imgContent was just a test. Every image shows up the content from image 5 at the moment.
My template page code:
<div class="row content full-width">
<div class="cats row">
Alle Kategorien
<?php query_posts( 'category_name=designerin&posts_per_page=-1'); if (have_posts()) : while (have_posts()) : the_post();
$categories = get_the_category();
$separator = ' ';
$output = '';
if($categories){
foreach($categories as $category) {
$output .= $category->cat_name;
}
}
$cat_name = get_category(get_query_var('cat'))->name;
?>
<?php echo trim($output); ?>
<?php endwhile; ?>
<?php endif; ?>
<?php wp_reset_query(); ?>
</div>
<ul class="row small-block-grid-3 medium-block-grid-5 large-block-grid-8 gallery">
<?php $img_counter = 0; ?>
<?php query_posts( 'category_name=designerin&posts_per_page=-1'); if (have_posts()) : while (have_posts()) : the_post();
$img_counter++;
$thumb_id = get_post_thumbnail_id();
$thumb_url_array = wp_get_attachment_image_src($thumb_id, 'thumbnail', true);
$large_url_array = wp_get_attachment_image_src($thumb_id, 'large', true);
$thumb_url = $thumb_url_array[0];
$large_url = $large_url_array[0];
$categories = get_the_category();
$separator = ' ';
$output = '';
if($categories){
foreach($categories as $category) {
$output .= $category->cat_name;
}
}
?>
<li>
**<img src="<?php echo $thumb_url; ?>" alt="<?php echo the_title(); ?>">**
</li>
<?php endwhile; ?>
<?php endif; ?>
<?php wp_reset_query(); ?>
</ul>
<?php $post_counter = 0; ?>
<?php query_posts( 'category_name=designerin&posts_per_page=-1'); if (have_posts()) : while (have_posts()) : the_post();
$post_counter++;
?>
**<ul class="large-img-wrapper">
<li>
<div class="large-img-container">
<div class="large-img"></div>
<div class="img-content" id="img-<?php echo $post_counter; ?>">
<div class="img-title">
<?php echo the_title(); ?>
</div>
<div class="img-text">
<?php echo the_content(); ?>
</div>
</div>
</div>
</li>
</ul>**
<?php endwhile; ?>
<?php endif; ?>
<?php wp_reset_query(); ?>
</div>
The first query is for filtering the categories by slug.
My last attempt feels so near..
var inc = '5';
var objClass = $(this).find("a").hasClass( "img-" + inc );
console.log(objClass);
When I'm clicking on the 5th image I get "true". But how can I get the X (inc) related to my template php code?
Sorry for my english and possible bad code
If i'm understanding correctly this might help
$('.gallery li').on('click', function(e) {
e.preventDefault();
var className = $(this).find('a').attr('class');
var imgContent = $('#'+className).html();
});