Problems with ACF Repeater - php

It's my first time working with wordpress, ACF and PHP, and well, I've
been in this trouble for days, does anyone know what's going wrong for
the Loop not working?
<div class="swiper">
<div class="swiper-wrapper">
<?php
foreach (get_field('fleet_slides') as $fleet_slide) {
$image = $fleet_slide['image_slide']['url'];
?>
<div class="img-wrapper">
<!-- Slides -->
<div class="swiper-slide">
<img src="<?php echo $image?>" />
</div>
</div>
<?php
}
?>
</div>
<!-- Additional required wrapper -->
<div class="swiper-controls">
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
</div>
</div>

I never liked this syntax:
while( have_rows('fleet_slides', 'option') ) : the_row();
I just treat them as arrays. (I have a repeater called slides with sub fields: image, html). This code works for me.
foreach (get_field('slides') as $slide) {
$image = $slide['image']['url'];
$html = $slide['html'];
?>
<div class="banner-carousel-item" style="position:relative; background-image:url(<?php echo $image; ?>)">
<div style="background:rgba(0,0,0,0.25); position: absolute; top: 0; bottom: 0; left:0; right: 0; ">
</div>
<div class="slider-content">
<div class="container h-100">
<div class="row align-items-center h-100">
<?php echo $html ?>
</div>
</div>
</div>
</div>
<?php
}
?>

Related

How do I make the card align on the same row?

I'm trying to display MySQL query in each card but how do I print the cards inline? It is now printing below one another but I want them to be on the same row horizontally.
<?php
$output="";
while($row = mysqli_fetch_array($result))
{
$id = $row['courseID'];
$name = $row['courseName'];
$category = $row['category'];
$description = $row['description'];
$output.=
"
<div class='col-sm-12'>
<div class='col-md-4 mb-5'>
<div class='card h-100'>
<div class='card-body'>
<h4 class='card-title'>$name</h4>
<p class='card-text'>$id</p>
<p class='card-text'>$description</p>
</div>
<div class='card-footer'><a href='#' class='btn btn-primary'>Assign</a></div>
</div>
</div>";
}
$output .= "</div></div>";
echo $output;
?>
just move your while into this :
<div class="container">
<div class="row">
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
<div class="container">
<div class="row">
<!--from here-->
<div class="col-lg-4 col-md-6 col-sm-12 mb-5 mt-5">
<div class="card">
<div class="card-body">
<div class="card-title">
<h1>title</h1>
</div>
<div class="card-text">
<h5>body</h5>
<a class="btn btn-outline-primary rounded-0 float-end" href="" name="readmore">Read more</a>
</div>
</div>
</div>
</div>
<!--to here-->
</div>
</div>
duplicate the code between (from here) and (to here)
here is a for loop example I used a while ago:
<div class="container">
<div class="row">
<?php for ($i=0; $i < count($user_elements[0]) ; $i++):?>
<div class="col-lg-4 col-md-6 col-sm-12 mb-5 mt-5">
<div class="card">
<img class="card-img-top" src="<?php if(isset($user_elements)){echo "../private/uploads/".$thumbnail[$i];}?>">
<div class="card-body">
<div class="card-title">
<h1><?php echo $user_elements[4][$i];?></h1>
</div>
<div class="card-text">
<h5><?php echo $user_elements[5][$i];?></h5>
<a class="btn btn-outline-primary rounded-0 float-end" href="readmore.php?Post=<?php echo $user_elements[0][$i];?>" name="readmore">Read more</a>
</div>
</div>
</div>
</div>
<?php endfor?>
</div>
</div>
create a parent div with container as a class add one more div to that parent div with row as a class then add your cards in that row classed div.
ex:
<div class="container">
<div class="row">
//your cards div
</div>
</div>
Use this snippet. Grid can be better with grid-gap.
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-column-gap: 0.5rem;
grid-row-gap: 0.5rem;
padding: 10px;
}
.grid-item {
background-color: #999;
border: 1px solid #fff;
padding: 20px;
font-size: 30px;
text-align: center;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
</div>
</body>
</html>
You can make a new div before your while loop and join the
As you can see below, you will make a new div named cards
<?php
$output="<div class='cards' style='white-space:nowrap'>";
while($row = mysqli_fetch_array($result))
{
$id = $row['courseID'];
$name = $row['courseName'];
$category = $row['category'];
$description = $row['description'];
$output.=
"
<div class='col-sm-12' style='display:inline-block'>
<div class='col-md-4 mb-5'>
<div class='card h-100'>
<div class='card-body'>
<h4 class='card-title'>$name</h4>
<p class='card-text'>$id</p>
<p class='card-text'>$description</p>
</div>
<div class='card-footer'><a href='#' class='btn btn-primary'>Assign</a></div>
</div>
</div>";
}
$output .= "</div></div>";
echo $output;
?>
I hope by using this code the cards will align in same line.

the_field in wordpress not outputting in html depending on the order of pages

I have something that I just can't understand. I did a one page layout site in wordpress. It consist of one template-index.php that only have one mainContainer div and about 6 include_once template-. Then in the admin section of wordpress I used advanced custom fields to create the different fields all related to template-index.php.
Everything shows up just fine except for the text on the last frame or last include if you will. But here is the strange thing. If I change the order of the last two includes both text shows up just fine and then when I change the order back the last include loose it's text again.
I checked the code, every php tag is closed just fine, the include before also. I don't know. Did something like this ever happen to one of you? What could it be?
Thanks
edit:
here is a bit of code.
So the index page is pretty simple:
<?php
/* Template Name: index template */
?>
<?php get_header(); ?>
<div class="mainContainer"id='fullpage'>
<?php include_once 'template-about.php'; ?>
<?php include_once 'template-theDesign.php'; ?>
<?php include_once 'template-theApp.php'; ?>
<?php include_once 'template-getApp.php'; ?>
<?php include_once 'template-community.php'; ?>
<?php include_once 'template-contact.php'; ?>
</div>
<?php get_footer(); ?>enter code here
the last two includes look like this:
<?php
/* Template Name: Bob community template */
?>
<!-- <div id="section-5"> -->
<div class="sectionContainer community section" id='section_five'>
<div class="container main">
<div class="vertical100 firstSection col-md-12 topSection ">
<section class='worldMap animation col-md-6'>
<div class="imgContainer">
<div class="wordpressImg">
<img class='worldMap' src="<?php echo get_template_directory_uri(); ?>/img/worldmap.png" />
</div> <!-- wordpressImg -->
</div><!-- imgContainer -->
</section>
<section class="explications col-md-6">
<div class="communityExplication">
<div class="wordpressTexte">
<?php the_field('community_text'); ?>
<div class="stories">
<?php
$args = array( 'post_type' => 'stories', 'posts_per_page' => 8, 'orderby' => 'rand' );
$loop = new WP_Query($args);
$posts = $loop->posts;
if(have_posts()) {
$first = true; ?>
<div class="storieAligner">
<div class="stories-container ">
<?php
$count = 0;
while($loop->have_posts() ) : $loop->the_post();
$randomPost = $posts[$count];
$image = get_field('images');
$temoignage = get_field('temoignage');
?>
<!-- <div class="storiePhoto"> -->
<div class='storiesThumbs' style='background-image: url("<?php echo $image['url']; ?>")' data-temoignage="<?php echo $temoignage; ?>"></div>
<div class="categorie"></div>
<!-- </div> -->
<?php $count++; endwhile; ?>
</div> <!-- stories-container -->
<div class="fullStorie hiddenStorie">
<div class="back"></div>
<div class="leftDiv">
<div class="leftContent">
</div>
</div>
<div class="rightDiv">
<div class="rightContent"></div>
</div>
</div>
</div> <!-- storieAligner -->
<?php }; ?> <!-- if have_posts -->
</div> <!-- stories -->
<div class="linkContainer" ><a class='formToggle pinkButton roll' href="#" title="Wha you say"><span data-title='What you say'>What you say</span></a></div>
</div> <!-- wordpressTexte -->
</div> <!-- commnunityExplication -->
<!-- <div class="storiesFormContainer"> -->
<div class="storiesForm hidden">
<div class="formContainer">
<h1><?php echo __('Leave a Review of your app ', 'site'); ?></h1>
<?php echo do_shortcode('[contact-form-7 id="89" title="community-contact"]'); ?>
</div>
</div>
<!-- </div> storiesFormContainer -->
</section>
</div> <!-- get app -->
</div> <!-- main -->
and the contact template like this
<?php
/* Template Name: Contact-us template */
?>
<!-- section-6 -->
<div class="sectionContainer contact section" id='section_six'>
<div class="container main" >
<div class="vertical100 col-md-12 topSection ">
<section class='explications col-md-3'>
<div class="blockTexte">
<div class="wordpressTexte">
<?php the_field('questions'); ?>
<a class ='pinkButton roll' href="#" title="visit page"><span data-title='<?php echo __('visit page', 'site'); ?>'><?php echo __('visit page', 'site'); ?></span></a>
</div>
</div>
</section>
<section class="formulaire col-md-9">
<div class="formContainer">
<div class="wordpressForm">
<?php echo do_shortcode('[contact-form-7 id="44" title="contact-us"]'); ?>
</div>
</div>
</section>
</div> <!-- knowBob -->
</div>
So what could be wrong?
P.s. I know there's a bit a french and english in the code. I usually write what comes up first in my head.
You need to reset the post data to the original query using wp_reset_postdata after you're done looping through a custom query:
<div class="stories-container ">
<?php
$count = 0;
while($loop->have_posts() ) : $loop->the_post();
$randomPost = $posts[$count];
$image = get_field('images');
$temoignage = get_field('temoignage');
?>
<!-- <div class="storiePhoto"> -->
<div class='storiesThumbs' style='background-image: url("<?php echo $image['url']; ?>")' data-temoignage="<?php echo $temoignage; ?>"></div>
<div class="categorie"></div>
<!-- </div> -->
<?php $count++; endwhile; wp_reset_postdata(); ?><!-- this line here -->
</div> <!-- stories-container -->
Otherwise the $post object will remain the last post of the $loop query, causing any other behind the scenes requests for post data down the road (in your case get_field) to reference the wrong post until you hit the outer loop again.

Jump to next section in while loop

OK, this is a bit complicated so Ill try my best to explain it:
I have a while loop which has a next link, before I just had it in standard html, so it was farely simple, on click of the class 'arrow' it would just to the next section e.g:
$i = 0;
while ( have_rows('sections') ) : the_row();
$sectionName = $i++;
?>
<section id="<?php echo $sectionName; ?>" class="full-bg-image" style="background-image: url('<?php the_sub_field('section_image'); ?>')">
<div class="image divider" id="partnersImg" style="background-image: url('<?php the_sub_field('section_image'); ?>')">
<div class="wrapper">
<div class="overlay" style="color: <?php the_field('section_text_colour','options'); ?>">
<?php the_sub_field('divider_text'); ?>
</div>
</div>
</div>
<div class="sectionContent">
<div class="wrapper">
<div class="centerContent">
<div class="contentWrapper">
<div class="text animation-element" data-sr="enter center wait 0.5s, no reset" style="background-color: <?php the_field('text_block_bg_colour','options'); ?>; color: <?php the_field('text_block_text_colour','options'); ?>">
<?php the_sub_field('section_text'); ?>
<div class="arrowContainer"></div>
</div>
<div class="clr"></div>
</div>
</div>
</div>
</div>
</section>
<?php endwhile;
The sectionName variable is set for each item name that is added in the wordpress admin however the issue comes when my above code shows and the anchor is linking too itself and not the next section, I would like to know how to link it to the next section and if its the last section then to have a anchor which links to the first.
<section id="0">
<div class="arrowContainer"></div>
</section>
<section id="1">
<div class="arrowContainer"></div>
</section>
<section id="2">
<div class="arrowContainer"></div>
</section>
<section id="3">
<div class="arrowContainer"></div>
</section>
In this case I am using Advanced Custom Fields repeater and not posts.

Image slider not working

I am building a page where I am fetching images in a loop for each form name.Now suppose there are four forms,so there will be four slider consecutively one below the other.Now the problem I am facing is that when I am fetching the first slider images are only visible others are not,others are blank.I thing because the slider are not unique because the slider div id are same for all within the while loop.Can any one guide me how to solve this...and make each slider unique.
<div id="now_slider">
<?php
include( "connect.php");
$a=mysql_query( "Select * from bang where active=1");
$i=0;
while($res=mysql_fetch_array($a)) {
$name=$res[ "t"];
$pdf=$res[ "pt"];
$id=$res[ "f"];
?>
<h1><?php echo $name; ?><span></span></h1>
<br />
<!-- DC Flick Slider Start -->
<div style="width: 100%; margin:0 auto; padding: 0px 0; position:relative;">
<!-- navigation controls-->
<div class="navig-photo-stack ps">
<a class="prev"></a>
<a class="next"></a>
</div>
<section id="slide">
<div id="ps-slider" class="ps-slider">
<!-- Slide 1 -->
<div id="ps-albums">
<?php $b=mysql_query( "Select * from fim where f='$id'"); while($res1=mysql_fetch_array($b)) { $img=$res1[ "im"]; ?>
<div class="ps-album" style="opacity:0;">
<img src="forms/<?php echo $img; ?>" />
<div class="ps-desc">
<!--<div class="ps-head">
<h3></h3>
</div>-->
<!--<div class="ps-cont"> <span> </span> </div>-->
</div>
</div>
<?php } ?>
</div>
</div>
</section>
<!-- /section slide -->
</div>
<?php if($pdf!="" ) { ?>
<h2><center>To Download the Form Click Below<br /><img src="images/pdf.png" alt="" width=80 height=80 /></center></h2>
<?php } ?>
<!-- DC Flick Slider End -->
<div class="clear"></div>
<?php } ?>
</div>

Splitting article on multiple images

I got an article that is read from the database. Which is in a wrapper, I needed an image to be full width (so even wider than the wrapper) while still being in the article. So I split it on the image tag like the code below.
However this prevents a user from adding multiple images. When I add another image tag it doesn't show the image.
How can I split the article not just on one image but every image?
All data (text, img tags) is in 'introtext'.
For example:
<p>Part one of the article</p>
//Here the article is split on all img tags that are there.
<img src="#">
<img src="#">
<img src="#">
<img src="#">
<p>Part two of the article</p>
The below code only works when I add one image tag.
<div class="container relative" style="padding: 0px;">
<div class="row">
<div class="col-sm-12">
<div class="blog-item mb-20 mb-xs-40">
<!-- Text -->
<div class="blog-item-body">
<?
$introtext = $contenti[0]['introtext'];
$splitartikel = preg_split('/(<img[^>]+\>)/i', $introtext, -1, PREG_SPLIT_DELIM_CAPTURE);
echo $splitartikel[0];
?>
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid relative" style="padding: 0px;">
<div class="row">
<div class="col-sm-12">
<div class="middleimage">
<?
echo $splitartikel[1];
?>
</div>
</div>
</div>
</div>
<div class="container relative" style="padding: 0px;">
<div class="row">
<div class="col-sm-12">
<div class="blog-item mb-20 mb-xs-40">
<!-- Text -->
<div class="blog-item-body">
<?
echo $splitartikel[2];
?>
</div>
</div>
</div>
</div>
</div>
The query:
// Articles
$content = "SELECT * FROM `lb_content` WHERE alias = '".$conn->real_escape_string($_GET['alias'])."' ";
$contentcon = $conn->query($content);
$contenti = array();
while ($contenti[] = $contentcon->fetch_array());
I also tried looping the middle part, but this also loops the text before and after the image, while I only want to have the option to have multiple images.
Like this:
<?php foreach($splitartikel as $part) : ?>
<div class="container-fluid relative" style="padding: 0px;">
<div class="row">
<div class="col-sm-12">
<div class="middleimage">
<?php echo $part; ?>
</div>
</div>
</div>
</div>
<?php endforeach ?>
Maybe I need to do some sort of foreach loop for every image tag?

Categories