I am a fresher in wordpress and I was trying to dynamic a structure. I want someone who can guide me to show images serial wise in the loop.
Here is the structure:
<section class="beers-img">
<div class="container">
<?php
$add_gallery_images =get_post_meta(get_the_ID(), 'add_gallery_images', true);
$add_gallery_images = array_values($add_gallery_images);
// print_r($add_gallery_images);
$countimages = count($add_gallery_images);
for($x = 0; $x < $countimages; $x++) {
?>
<div class="row <?php echo ($x % 2 == 0 ) ? '' : 'flex-row-reverse'; ?>">
<div class="col-lg-5">
<div class="beers-img-wraper">
<img src="<?php echo $add_gallery_images[$x]; ?>">
</div>
</div>
<div class="col-lg-7">
<div class="beers-img-wraper">
<img src="<?php echo $add_gallery_images[$x]; ?>">
</div>
</div>
</div>
<?php } ?>
</div>
</section>
But in the loop, same image is displaying in col-lg-5 and col-lg-7. And in the next row it shows the second image twice, and in the next row it shows the third image.
I want to show first image in col-lg-5 and second image in col-lg-7, third image in next row first col-lg-5 and so on.
Can anyone guide me on how will I do that?
Related
I've created a list of logos with ACF repeater field. I'd like to have the 10 first logos displayed in my template and the others in an expand collapse. I've almost managed to make it work but the problem is that it's creating an expand collapse every 10 entries while I only want to have 1 containing everything after 10.
<div class="row"><!-- open first .row -->
<?php
while (have_rows('partenaires')) {
the_row();
$partner_image = get_sub_field('logo_partenaire');
if (($count%10) == 0 && $count > 0) { ?>
</div><!-- close last .row -->
</div><!-- close last .section -->
<a role="button" class="text-center" data-toggle="collapse" href="#collapsePartners" aria-expanded="false" aria-controls="collapsePartners"><?php _e( 'Et bien d\'autres', 'oleandre' ); ?></a>
<div class="collapse" id="collapsePartners"><!-- open next .section -->
<div class="row"><!-- open next .row -->
<?php
} // end if 10
?>
<div class="col-lg-2 col-xs-6 col-sm-6">
<div>
<img class="img-responsive" src="<?php echo $partner_image['url']; ?>" alt="<?php echo $partner_image['alt'] ?>" />
</div>
</div>
<?php
// increment count
$count++;
} // end while have_rows
?>
</div><!-- close last .row -->
</div><!-- close lase .section -->
<?php
} // end if have_rows
?>
</div>
:)
I have made a Wordpress site, which I have migrated from local to a server. I have created a one pager with images in the bottom that links to the different post of my site. I have used the plugin Advanced custom fields in order to make my site editable.
After a lot of searching online, I found that it was not possible to add custom fields to your index php directly but that you could make a template in which you copied all your old code from the index.php into.
I got it to work on my local host by going to Settings - Readings in my wordpress admin panel an under set my homepage displays as static - Homepage (which is the name of my template).
But when I try to do the same thing on the server site, the screen goes white... Maybe it is something with the file structure?
I've taken a screen shot of whole the files are located in my FTP (Cyberduck). I don't know if its enough to help..
Thanks in advance
<div class="section" id="section2">
<div class="row">
<div class="col-12 col-md-6 col-lg-6" id="left">
<img src="<?php echo get_stylesheet_directory_uri(); ?>/imgs/pen.png" id="pen" class="img-fluid animation" alt="Responsive-image"/>
<lol><h2 id="About">3 Facts</h2></lol>
</div>
<div class="col-12 col-md-6 col-lg-6" id="right">
<div class="image_field d-none d-md-block"> <!-- image field-->
<?php $post_image = get_field('avatar_image')['sizes']['large']; ?>
<img src = "<?php echo $post_image; ?> " id="avatarimage" class="img-fluid" alt="Responsive image">
</div>
<div class="col-md-12 col-lg-12">
<img src="<?php echo get_stylesheet_directory_uri(); ?>/imgs/Onefinal.svg" id="One"/> <!-- class="img-fluid" alt="Responsive-image" -->
<div class="container" id=text>
<?php
$my_query = new WP_Query('pagename=hej');
while ($my_query->have_posts() ) : $my_query->the_post();
the_content();
endwhile;
wp_reset_postdata();
?>
</div>
</div>
Template of the static homepage should be stored in a file called front-page.php which needs to be placed in /wp-content/themes/elnino directory.
Copy code of your template (except comment with template name) and paste it inside front-page.php file.
<div class="section" id="section2">
<div class="row">
<div class="col-12 col-md-6 col-lg-6" id="left">
<img src="<?php echo get_stylesheet_directory_uri(); ?>/imgs/pen.png" id="pen" class="img-fluid animation" alt="Responsive-image" />
<lol>
<h2 id="About">3 Facts</h2>
</lol>
</div>
<div class="col-12 col-md-6 col-lg-6" id="right">
<div class="image_field d-none d-md-block">
<!-- image field-->
<?php $post_image = get_field('avatar_image')['sizes']['large']; ?>
<img src="<?php echo $post_image; ?> " id="avatarimage" class="img-fluid" alt="Responsive image">
</div>
<div class="col-md-12 col-lg-12">
<img src="<?php echo get_stylesheet_directory_uri(); ?>/imgs/Onefinal.svg" id="One" />
<!-- class="img-fluid" alt="Responsive-image" -->
<div class="container" id=text>
<?php
$my_query = new WP_Query('pagename=hej');
while ($my_query->have_posts() ) : $my_query->the_post();
the_content();
endwhile;
wp_reset_postdata();
?>
</div>
</div>
Currently for a blog of mine I'm using HR Easy Blog WordPress theme. There I have a problem on how to remove the HR Easy Blog logo on the home page. I tried several methods but nothing worked for me.enter image description here
You need to go to your theme's header.php file and remove or comment below code:
<div class="header hidden-xs clearfix">
<div class="container">
<div class="row">
<div class="col-lg-4">
<div class="logo pull-left">
<?php $logo = (get_option('hires_logo') <> '') ? get_option('hires_logo') : get_template_directory_uri().'/images/logo.png'; ?><img src="<?php echo $logo; ?>" alt="<?php bloginfo('name'); ?>" id="logo"/>
</div>
</div>
<div class="col-lg-8">
<?php /* Home Ad #1 */
if( get_option('hires_ad_480_60_enable') == 'on'){
echo '<div class="pull-right top-ads">';
echo get_option('hires_ad_480_60_code');
echo "</div>";
} ?>
</div>
</div>
</div>
</div>
Some random columns collapse while using the foundation zurb grid, why?
<div class="small-centered">
<div class="row small-12 small-centered">
<?php foreach ($videos as $video): ?>
<div class="column small-6 medium-4 large-4">
<div>short text</div>
<img src="https://placehold.it/150x150" />
</div>
<?php endforeach; ?>
</div>
</div>
The blank area is not an empty div.
EDIT: here is the html and css output
Edit:
you need to add an .end to your last element. use a counter and modify your foreach loop like this (you might need to adjust it a little bit:
<?php
$i = 0;
$len = count($videos);
foreach ($videos as $video):
if ($i == $len - 1) {
echo '<div class="column large-4 end">'; //this is the last
} else {
echo '<div class="column large-4">'; // if not last-echo normally...
} ?>
<div>short text</div>
<img src="https://placehold.it/150x150" />
</div>
<?php $i++;
endforeach; ?>
I am working with a WP website and in my template I am running the loop like this:
<!-- START LOOP -->
<?php while ( have_posts() ) : the_post(); ?>
<div class="row" style="margin:15px 0;">
<div class="twelve columns">
<div class="four columns">
<a href="<?php the_permalink(); ?>">
<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail( 'medium' );
} else {
echo 'No Preview Available';
}
?>
</a>
</div>
<div class="eight columns">
<h3><?php the_title() ?></h3>
<p><?php the_excerpt() ?></p>
<p><?php echo esc_html( get_post_meta( get_the_ID(), 'portfolio_website', true ) ); ?></p>
</div>
</div>
</div>
<hr />
<?php endwhile; ?>
Because this is a responsive website, I am trying to get a grid column look. The problem I am having is how I can insert a div with a class or "row container" after every third item?
I know I probably just confused the crap out of you because I confuse myself but in short the html would look like this:
<div class="row container">
<!-- item 1 -->
<div class="twelve columns">
<div class="four columns">IMAGE HERE</div>
<div class="eight columns">TEXT HERE</div>
</div>
<!-- item 2 -->
<div class="twelve columns">
<div class="four columns">IMAGE HERE</div>
<div class="eight columns">TEXT HERE</div>
</div>
<!-- item 3 -->
<div class="twelve columns">
<div class="four columns">IMAGE HERE</div>
<div class="eight columns">TEXT HERE</div>
</div>
<!-- item 4 -->
<div class="twelve columns">
<div class="four columns">IMAGE HERE</div>
<div class="eight columns">TEXT HERE</div>
</div>
</div>
and so on, instead I would like it to display in a grid so the HTML should look more like this:
<div class="row container">
<!-- row 1 -->
<div class="twelve columns">
<div class="four columns">
<!-- item 1 -->
<div class="four columns">IMAGE HERE</div>
<!-- item 2 -->
<div class="four columns">IMAGE HERE</div>
<!-- item 3 -->
<div class="four columns">IMAGE HERE</div>
</div>
</div>
<!-- row 2 -->
<div class="twelve columns">
<div class="four columns">
<!-- item 4 -->
<div class="four columns">IMAGE HERE</div>
<!-- item 5 -->
<div class="four columns">IMAGE HERE</div>
<!-- item 6 -->
<div class="four columns">IMAGE HERE</div>
</div>
</div>
</div>
I can do everything else Im just not sure how to implement the below so I get the results I pasted above? I have found this online and feel like it is a step in the right direction:
<?php ($i % 3) == 0 ?>
Your feelings are right.
You can use the $current_post property of the WP_Query class to get the index of the post currently displayed in the loop, and then use the modulus operator to make sure you are targeting multiples of three.
So your loop could look like this:
<div class="row container">
<!-- row -->
<div class="twelve columns">
<div class="four columns">
<?php while ( have_posts() ) : the_post(); ?>
<!-- item -->
<div class="four columns">IMAGE HERE</div>
<?php if( $wp_query->current_post % 3 == 0 ) : ?>
</div>
</div>
<!-- row -->
<div class="twelve columns">
<div class="four columns">
<?php endif; ?>
<?php endwhile; ?>
</div>
You might need to improve this implementation. Specifically, make sure that, whatever happens, your HTML closes correctly.
What I needed was a counter:
<!-- START LOOP -->
<?php $counter = 1 ?>
<div class="row" style="margin:15px 0;">
<div class="twelve columns">
<?php while ( have_posts() ) : the_post(); ?>
<div class="four columns">
<a href="<?php the_permalink(); ?>">
<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail( 'medium' );
} else {
echo 'No Preview Available';
}
?>
</a>
</div>
<?php if ($counter % 3 == 0){echo '</div></div></hr /><div class="row" style="margin:15px 0;"><div class="twelve columns">';} ?>
<?php $counter++ ;
endwhile; ?>
</div>
</div>
<?php
$currentPage = get_query_var('paged');
// General arguments
$posts = new WP_Query(array(
'post_type' => 'post', // Default or custom post type
'posts_per_page' => 11, // Max number of posts per page
'paged' => $currentPage
));
// Content display
$i = 0;
if ($posts->have_posts()) :
while ($posts->have_posts()) :
$posts->the_post();
if( $i % 3 == 0 )
echo '<section class="columns">';
echo "<div class='column'>";
?>
<h2><?php the_title(); ?></h2>
<p><?php the_excerpt(); ?></p>
<?php
echo "</div>";
$i++;
if( $i % 3 == 0 )
echo '</section>';
endwhile;
endif;
?>
<?php
// Bottom pagination (pagination arguments)
echo "<div class='page-nav-container'>" . paginate_links(array(
'total' => $posts->max_num_pages,
'prev_text' => __('<'),
'next_text' => __('>')
)) . "</div>";
?>