For some reason the data-mainsrc attribute isn't outputting anything. I'm trying to get it to output the image url.
<?php $thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'home-thumb' );$url = $thumb['0']; ?>
Did I format the code incorrectly?
Full code
<!-- Start the loop -->
<?php $home_query = new WP_Query('post_type=projects');
while($home_query->have_posts()) : $home_query->the_post(); ?>
<article class="project">
<img width="375" height="375" src="<?php bloginfo( 'template_url' ); ?>/img/loading.gif" data-mainsrc="<?php $thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'home-thumb' );$url = $thumb['0']; ?>" class="attachment-home-thumb" alt="<?php the_title(); ?>">
<div class="overlay">
<a class="post-link expand" href="#" rel="<?php the_ID(); ?>">+</a>
</div>
</article>
<?php endwhile; ?>
<?php wp_reset_postdata(); // reset the query ?>
</div><!-- #projects-list -->
you are not echoing anything, just storing in a variable, so this
data-mainsrc="<?php
$thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'home-thumb' );
$url = $thumb['0']; ?>"
probably ends up looking like this once it is evaluated by php
data-mainsrc=""
The functions that start with get_... only return a value, unlike the functions that start with the_... which echo it.
so how about this
<?php
$thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'home-thumb');
$url = $thumb['0'];
?>
<img width="375" height="375" src="<?php bloginfo( 'template_url' ); ?>/img/loading.gif" data-mainsrc="<?php
echo $url; ?>" class="attachment-home-thumb" alt="<?php the_title(); ?>">
Related
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.
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>
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; ?>
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
?>
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