ACF Gallery - Show 4 items at a time using Bootstrap 4 - advanced-custom-fields

I'm using a Gallery field in WordPress ACF and I want to show a gallery only four at a time. Therefore, to achieve this, I grabbed some code for a multi-carousel in Bootstrap 4 and wanted to achieve this same effect using ACF Gallery and PHP.
Here's my code attempt:
<div class="row blog">
<div class="col-md-12">
<div id="blogCarousel" class="carousel slide" data-ride="carousel">
[...]
<!-- Carousel items -->
<div class="carousel-inner">
<?php
$images = get_sub_field('gallery');
$i = 0;
$j = 0;
$internal_counter = 0;
?>
<?php while ( $i < $gallery_size ): ?>
<?php if ( $i % 4 === 0 ): ?>
<div class="carousel-item <?php if ( $internal_counter === 0 ): echo 'active'; endif; ?>">
<div class="row">
// BEGIN this is the part where i'm stuck on
<?php for ( $j = 0; $j < count ( $images ); $j++ ): ?>
<div class="col-md-3">
<a href="<?php echo $images[$j]['url']; ?>" data-toggle="lightbox" data-gallery="dayhome-gallery">
<img src="<?php echo $images[$j]['sizes']['large']; ?>" alt="<?php echo $images[$j]['alt']; ?>" />
</a>
</div>
<?php endfor; ?>
// END this is the part where i'm stuck on
</div>
</div>
<?php $internal_counter++; ?>
<?php endif; ?>
<?php $i++; ?>
<?php endwhile; ?>
</div>
</div>
</div>
</div>
I've highlighted in comments above where I'm stuck on. Right now it's just displaying 8 pictures at a time for each carousel item such as this picture below:
Here's the desired effect I want:
So, in this particular gallery, I want to show only four pictures at a time. I was thinking of performing something like this:
<?php
if ( $j % 4 === 0 ):
break;
endif;
?>
... but it breaks immediately because I started $j to be 0 because I also need the zeroth item in the gallery.
Thanks for any help with my code.

SOLVED!!!
<div class="carousel-item <?php if ( $internal_counter === 0 ): echo 'active'; endif; ?>">
<div class="row">
<?php while ( $j < count( $images ) ): ?>
<div class="col-md-3">
<a href="<?php echo $images[$j]['url']; ?>" data-toggle="lightbox" data-gallery="dayhome-gallery">
<img src="<?php echo $images[$j]['sizes']['large']; ?>" alt="<?php echo $images[$j]['alt']; ?>" />
</a>
</div>
<?php if ( ++$j % 4 === 0 ): ?>
<?php break; ?>
<?php endif; ?>
<?php endwhile; ?>
</div>
</div>
I had to make sure I put ++$j to pre-iterate my variable before comparing it to a modulus of 4.

Related

Showing random post from specific category on Wordpress

I’m using the below code to show two images (which I've set up with Advanced Custom Fields) from a random post from in the category ‘homepage’ on each refresh. It doesn’t appear to be working however and when I google it there are so many different ways to do it! Does anybody know if mine looks correct? I’m concerned I might be missing a closing tag or something minor.
<div class="feature-container">
<?php
$args = array(
'posts_per_page' => 1,
'orderby' => 'rand',
'category_name' => 'homepage',
);
$loop = new WP_Query($args);
while ($loop->have_posts()) : $loop->the_post();
if( have_rows('images') ):
while ( have_rows("images") ) :
the_row();
if ( get_sub_field( 'image' ) ): ?>
<a href="<?php echo $link['url']; ?>" target="<?php echo $link['target']; ?>">
<div class="image feature-item">
<div class="overlay" style="background-color:<?php the_sub_field('hover_colour');?>">
<div class="caption pm-big">
<?php
$link = get_sub_field('link');
if( $link ): ?>
<?php echo $link['title']; ?>
<?php endif; ?>
</div>
</div>
<img src="<?php the_sub_field('image');?>" alt="" style="display: block;">
</div>
</a>
<?php else: ?>
<!-- no images found -->
<?php endif;
endwhile;
else :
// no images found
endif;
endwhile; ?>
</div>

magento homepage and other pages headers are different

In magento backend, I though no matter homepage or other pages should use the same header file. However, when I change the logo picture for header in backend, only homepage's header picture was changed successfully, other pages are not showing the picture correctly.
Basically what I did is, there are two rows in header, so I put half of the logo on left of the first row and and the other half of the logo on left of the second row, so it seems like a bigger logo.
homepage pic
what it should be
catalog and product view page
in catalog and product view page(bottom part of the logo is not changed)
in secondary catalog page, the upper part of the logo is missing, and bottom part of the logo is not changed.
code path: design/frontend/theme/template/page/html/header.phtml
<div class="header-top">
<img src="media/images/logoUp.jpg" style="width:500px;height:60px;">
<div class="header-top-search-wrapper">
<?php echo $this->getChildHtml('topSearch') ?>
<?php /*TODO: ?><a class="advanced-search-link" href="<?php echo Mage::getURL('') ?>catalogsearch/advanced/"><?php print $this->__('Advanced Search') ?></a><?php */?>
</div>
<?php echo $this->getChildHtml('currency') ?>
<?php echo $this->getChildHtml('store_language') ?>
<?php if ($tmp_html = $this->getChildHtml('i_block_header_top_help')): ?> <?php //Predefined CMS block ?>
<div class="header-top-help-wrapper"><?php echo $tmp_html; ?></div>
<?php endif; ?>
<?php if ($tmp_html = $this->getChildHtml('i_block_header_top_links')): ?> <?php //Predefined CMS block ?>
<div class="header-top-links-wrapper"><?php echo $tmp_html; ?></div>
<?php endif; ?>
</div>
//<?php if ($this->getIsHomePage()):?>
<h1 class="logo"><strong><?php echo $this->getLogoAlt() ?></strong><img src="media/images/logoDown.jpg" style="width:500px;height:60px;"></h1>
//<?php else:?>
// <strong><?php echo $this->getLogoAlt() ?></strong><img src="<?php echo $this->getLogoSrc() ?>" alt="<?php echo $this->getLogoAlt() ?>" />
// <?php endif?>
<div class="header-left">
<?php if ($tmp_html = $this->getChildHtml('i_block_header_contact')): ?> <?php //Predefined CMS block ?>
<div class="header-contact-wrapper"><?php echo $tmp_html; ?></div>
<?php endif; ?>
<?php if ($tmp_html = $this->getChildHtml('i_block_header_banner')): ?> <?php //Predefined CMS block ?>
<div class="header-banner-wrapper"><?php echo $tmp_html; ?></div>
<?php endif; ?>
</div> <!-- end: header-left -->
<div class="header-right">
<div class="header-right-secondary">
<p class="welcome-msg"><?php echo $this->getWelcome() ?> <?php echo $this->getAdditionalHtml() ?></p>
<?php echo $this->getChildHtml('topContainer'); ?>
</div>
<div class="user-menu">
<?php // Show custom link, if enabled ?>
<?php if ($themeHelper->getCfg('header/links_custom_link_enabled')): ?>
<?php
$_customLinkPath = $themeHelper->getCfg('header/links_custom_link_path');
$_customLinkAnchor = $themeHelper->getCfg('header/links_custom_link_anchor');
$_customLinkTitle = $themeHelper->getCfg('header/links_custom_link_title');
?>
<ul>
<li class="user-menu-item user-menu-custom">
<?php echo $_customLinkAnchor; ?>
</li>
</ul>
<?php endif?>
<?php echo $this->getChildHtml('topLinks') ?>
<?php // If customer is not logged in: show "Sign Up" link, if enabled ?>
<?php if (Mage::getSingleton('customer/session')->isLoggedIn() == false): ?>
<?php if ($themeHelper->getCfg('header/links_signup_enabled')): ?>
<ul>
<li class="user-menu-item user-menu-signup">
<?php echo $this->__('Sign Up') ?>
</li>
</ul>
<?php endif?>
<?php endif?>
<ul>
<li id="mini-cart" class="user-menu-item user-menu-cart">
<?php echo $this->getChildHtml('cart_sidebar') ?>
</li>
</ul>
</div>
</div> <!-- end: header-right -->
The above code is for header's part.
I'm quite confused, shouldn't all pages use the same header file? why they appear differently?
Thank you
I know the problem now.
The reason why secondary categories can't get the image is because the url is hostname/categoryName/image.jpg
So the url is not valid here anymore. Should have use dynamic url here.

How to show the message “No Products” when there's no products in my custom block?

I need to show the message "No Products" or "There are no products matching the selection" when there's nothing to show in my block.
<?php
$manufacturer = Mage::registry('current_product')->getMerchantName();
$productCollection = Mage::getModel('catalog/product')->getCollection()
->addAttributeToSelect('*')
->addAttributeToFilter('merchant_name',$manufacturer);
$productCollection->getSelect()->order('RAND()');
$productCollection->getSelect()->limit(5);
foreach ($productCollection as $_product)
?>
<img src="<?php echo $this->helper('catalog/image')->init($_product, 'thumbnail')->resize(228) ?>" width="228" height="228" alt="<?php echo $this->htmlEscape($_product->getName()) ?>" />
<div class="product-details">
<p class="product-name"><?php echo $this->htmlEscape($_product->getName()) ?></p>
<?php
$merchant_name = $_product->getAttributeText('merchant_name');
if ($merchant_name){?>
<div>by <?php echo $merchant_name;?> </div>
<?php }
else if ($_product->getIsEbayaffiliate()) { ?>
<div>by eBay</div>
<?php }
else { ?>
<div>by Home Done</div>
<?php } ?>
Also I need to add getPriceHtml to the above code to show the product price.
I have tried <?php echo $this->getPriceHtml($_item, true) ?>
There you go:
(Advice: use closed tags like <?php if(): ?> for better readability)
<?php if(is_array($productCollection) && count($productCollection) ): ?>
<?php foreach ($productCollection as $_product): ?>
<img src="<?php echo $this->helper('catalog/image')->init($_product, 'thumbnail')->resize(228) ?>" width="228" height="228" alt="<?php echo $this->htmlEscape($_product->getName()) ?>" />
<div class="product-details">
<p class="product-name"><?php echo $this->htmlEscape($_product->getName()) ?></p>
<?php $merchant_name = $_product->getAttributeText('merchant_name'); ?>
<?php if ($merchant_name):?>
<div>by <?php echo $merchant_name;?> </div>
<?php elseif($_product->getIsEbayaffiliate()): ?>
<div>by eBay</div>
<?php else: ?>
<div>by Home Done</div>
<?php endif; ?>
</div>
<?php endforeach; ?>
<?php else: ?>
// here goes whatever you want to display if no products found in list
<?php endif; ?>

Why is my <?php the_post_thumbnail(); ?> not bringing up any images on my wordpress page?

my code is
<?php
// Template Name: homepage
get_header(); ?>
<div id="content" class="full-width">
<?php
query_posts(array(
'post_type' => 'avada_portfolio',
'showposts' => 2
) );
?>
<?php while (have_posts()) : the_post(); ?>
<h2><?php the_title(); ?></h2>
<img src=" <?php the_post_thumbnail('medium'); ?>">
<p><?php echo get_the_excerpt(); ?></p>
<?php
endwhile; //resetting the page loop
wp_reset_query(); //resetting the page query
?>
<h1 class="entry-title"><?php the_title(); ?></h1> <!-- Page Title -->
<?php
// TO SHOW THE PAGE CONTENTS
while ( have_posts() ) : the_post(); ?> <!--Because the_content() works only inside a WP Loop -->
<div class="entry-content-page">
<?php the_content(); ?> <!-- Page Content -->
</div><!-- .entry-content-page -->
<?php
endwhile; //resetting the page loop
wp_reset_query(); //resetting the page query
?>
<?php get_footer(); ?>
I have added the <?php add_theme_support( 'post-thumbnails' ); ?> to functions however it just shows a broken image on my home page :(
All my images are uploaded onto my wordpress site and set as featured images on the custom post!
thanks
the_post_thumbnail('medium') this function will return img tag with feature image.
So you can get image following two ways:-
<img src=" <?php echo wp_get_attachment_url(get_post_thumbnail_id( $post->ID ), 'medium' ); ?>">
OR just this function :- <?php the_post_thumbnail('medium'); ?>
Hope this will help you.
<img src=" <?php the_post_thumbnail('medium'); ?>">
This does not work in <img src="">. For me this worked:
<img src=" <?php echo wp_get_attachment_url(get_post_thumbnail_id( get_the_ID() ), 'thumbnail' ); ?>" class="media-object" style="width:73px; height:73px">
write "the_post_thumbnail('medium');" out of the image tag
Like this:
<?php while (have_posts()) : the_post(); ?>
<h2><?php the_title(); ?></h2>
<?php the_post_thumbnail('medium'); ?>
<p><?php echo get_the_excerpt(); ?></p>
<?php
endwhile; //resetting the page loop
wp_reset_query(); //resetting the page query
?>

how i can do featured post slider set category based?

my featured post slider set as a tags. i want it set category base. how i can do it?my site http://techgajot.com
my featured post slider html code?
<script type="text/javascript">
//<![CDATA[
jQuery(window).load(function() {
jQuery('#featured').flexslider({
slideshowSpeed: 6000,
directionNav:false,
pauseOnHover:true,
manualControls: '.flexslide-custom-controls li a',
controlsContainer: '.container'
});
});
//]]>
</script>
<div class="featured">
<div class="container">
<div id="featured" class="flexslider">
<ul class="slides">
<?php
$count = 1;
$featurecount = get_option('solostream_features_number');
$my_query = new WP_Query("tag=featured&showposts=$featurecount");
while ($my_query->have_posts()) : $my_query->the_post();
$do_not_duplicate[] = $post->ID; ?>
<li id="narrow-feature-post-<?php echo $count; ?>"<?php echo solostream_featureclass(); ?>>
<div class="slide-container clearfix">
<?php if ( get_post_meta( $post->ID, 'video_embed', true ) ) { ?>
<div class="feature-video">
<div class="video"><?php echo get_post_meta( $post->ID, 'video_embed', true ); ?></div>
</div>
<?php } else { ?>
<div class="feature-image">
<?php solostream_feature_image(); ?>
</div>
<?php } ?>
<div class="flex-caption">
<div class="excerpt">
<h2 class="post-title"><?php the_title(); ?></h2>
<?php if ( 'post' == get_post_type() ) { ?>
<?php include (TEMPLATEPATH . "/postinfo.php"); ?>
<?php } ?>
<?php the_excerpt(); ?>
<p class="readmore"><a class="more-link" href="<?php the_permalink() ?>" rel="nofollow" title="<?php _e("Permanent Link to", "solostream"); ?> <?php the_title(); ?>"><?php _e("সম্পূর্ন অংশ", "solostream"); ?></a></p>
</div>
</div>
</div>
</li>
<?php $count = $count + 1 ?>
<?php endwhile; ?>
</ul>
</div>
<div class="controls-container clearfix">
<ul class="flexslide-custom-controls clearfix">
<?php
$count = 1;
$featurecount = get_option('solostream_features_number');
$my_query = new WP_Query("tag=featured&showposts=$featurecount");
while ($my_query->have_posts()) : $my_query->the_post();
$do_not_duplicate[] = $post->ID; ?>
<li><?php echo $count; ?></li>
<?php $count = $count + 1 ?>
<?php endwhile; ?>
</ul>
</div>
</div>
</div>
how i can do it. my featured post slider tags now= featured. when i put "featured" any post tags option then it show featured post. now i want it like category base. i select here any category.then that category all post show featured post.
If I understood you right ( difficult ike #dda noted ) Changing this line :
$my_query = new WP_Query("tag=featured&showposts=$featurecount");
to
$my_query = new WP_Query("category_name=featured&showposts=$featurecount");
Will make the same query from tag to category using name ..
If you use ID , then
$query = new WP_Query( 'cat=2,7,23,35' );
Or all posts that share this category :
$query = new WP_Query( 'category_name=staff' );
Read more HERE ON THE CODEX