i use this code to show thumbnails'posts on my categories :
<?php the_post_thumbnail('thumbnail', array('class' => 'alignleft')); ?>
But I would like to turn them into link.
I try this code :
<?php if ( has_post_thumbnail()) : ?>
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" >
<?php the_post_thumbnail(); ?>
</a>
<?php endif; ?>
But the text no longer appears to the right of the image, and the image is too large.
How to fix it plz ?
( source : http://codex.wordpress.org/Function_Reference/the_post_thumbnail )
try this:
<?php $imageClass = array ( 'class' => "alignleft",); ?>
<?php if ( has_post_thumbnail()) : ?>
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" >
<?php the_post_thumbnail('thumbnail', $imageClass); ?>
</a>
<?php endif; ?>
Related
I'm pretty new about coding, and i'm trying to build a Wordpress custom theme.
I'm stacked on the logo section and I really can't understand what i'm doing wrong:
<?php if ( get_theme_mod('apc_logo_image', '') != '' ): ?>
<img class="animate" src="<?php echo get_template_directory_uri(); ?>/img/logo.png" alt="logo sito">
<?php elseif ( is_front_page() && is_home() ) : ?>
<img class="animate" src="<?php echo get_theme_mod( 'apc_logo_image', '' ); ?>" alt="<?php echo get_theme_mod( 'apc_logo_alt_text', '' ); ?>">
<?php else : ?>
<h1 class="site-title"><?php bloginfo( 'name' ); ?></h1>
<?php endif; ?>
I would like to do the follow:
If I upload an images from Customizer, than it would be visible as logo.
If don't and i have a logo in a specific path like: /assets/logo ecc... than it should be visible like logo.
if don't, then I would like to see the name of the website as it should be.
So working code:
<?php
$logoFile = $_SERVER['DOCUMENT_ROOT'] . '/wp-content/themes/' . wp_get_theme()->get('TextDomain') . '/assets/images/logo/logo.png';
if ( (bool)get_theme_mod('apc_logo_image')) : ?>
<img class="animate" src="<?php echo get_theme_mod( 'apc_logo_image'); ?>" alt="<?php echo get_theme_mod( 'apc_logo_alt_text'); ?>">
<?php else : ?>
<?php if ( file_exists($logoFile) ) : ?>
<img class="animate" src="<?php echo '/wp-content/themes/' . wp_get_theme()->get('TextDomain') . '/assets/images/logo/logo.png'?>" alt="logo sito">
<?php else : ?>
<h1 class="site-title"><?php bloginfo( 'name' ); ?></h1>
<?php endif; ?>
<?php endif ?>
Can't find the solution of combining wp_trim_words and wp_strip_all_tags inside loop.
This is what I have now:
<?php if ( $the_query->have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<div class="news-el">
<a href="<?php the_permalink(); ?>">
<div class="news-content">
<h3><?php echo get_the_title(); ?></h3>
<?php echo wp_strip_all_tags( get_the_content() );?>
</div>
<span><b>More...</b></span>
</a>
</div>
<?php endwhile; ?>
<?php endif; ?>
Should I create an additional function?
Just nest the functions...
<?php if ( $the_query->have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<div class="news-el">
<a href="<?php the_permalink(); ?>">
<div class="news-content">
<h3><?php echo get_the_title(); ?></h3>
<?php echo wp_trim_words( wp_strip_all_tags( get_the_content(), 55 ) );?>
</div>
</a>
</div>
<?php endwhile; ?>
<?php endif; ?>
The function will output "..." to the end of the text block of 55 words in this example so you don't really need the span tag. You can customise by specifying a third parameter to the function wp_trim_words as to what you want to appear after the trimmed words.
I have tried to code my wordpress theme as simple as possible but I don't really understand why I can't display an image from Advanced Custom Field into a modal box using Featherlight.js (http://noelboss.github.io/featherlight/)
Here is my online page http://www.skuar.com
This is my single.php code, which simply display the image custom field
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<?php
$image = get_field('image');
if( !empty($image) ): ?>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
<?php endif; ?>
<?php endwhile; ?>
<?php endif; ?>
and this is the wp loop content
<div id="post">
<a href ="<?php the_permalink(); ?>">
<div class="img" href="<?php
$image = get_field('image');
if( !empty($image) ): ?>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
<?php endif; ?>" data-featherlight="image">
<?php
$image = get_field('image');
if( !empty($image) ): ?>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
<?php endif; ?>
</div>
</a>
</div>
I just would like to open the image in a lightbox...
Is that make sense?
Thanks!
In invalid double quotes in your code. Try this code:
<div id="post">
<a href ="<?php the_permalink(); ?>">
<div class="img" href="<?php $image = get_field('image');
if( !empty($image) ): ?>
<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>
<?php endif; ?>" data-featherlight="image">
</div>
</a>
</div>
i want to make categories gallery. so i have one category called gallery, i create some post with gallery images. in gallery category page i want to display each post 4 picture. picture will take from advancedcustomfields gallery field. bellow is my current category-gallery page code, image not coming but title and more link working fine. would guys tell me what how to do ?
<?php get_header(); ?>
<div class="contentarea">
<div class="wapper">
<div class="content clearfix">
<?php
while ( have_posts() ) :
the_post();
$images = get_field('gallery_picture');
?>
<h2><a href="<?php the_permalink(); ?>">
<?php the_title(); ?>
</a></h2>
<img src="<?php echo $image['sizes']['thumbnail']; ?>" alt="<?php echo $image['alt']; ?>" /> Gallery </div>
<?php endwhile; ?>
</div>
</div>
</div>
<?php get_footer(); ?>
i solve this problem. so want to share with other. this for category page. bellow is code
<?php
while ( have_posts() ) :
the_post();
?>
<h2><a href="<?php the_permalink(); ?>">
<?php the_title(); ?>
</a></h2>
<?php
$images = get_field('gallery_picture');
$max = 5;
$i = 0;
if( $images ): ?>
<ul>
<?php foreach( $images as $image ): $i++; ?>
<?php if( $i > $max){ break; } ?>
<li> <img src="<?php echo $image['sizes']['thumbnail']; ?>" alt="<?php echo $image['alt']; ?>" /> </li>
<?php endforeach; ?>
</ul>
<?php endif; ?>
Gallery </div>
<?php endwhile; ?>
I'm using ACF pro repeater fields, which renders individual images per row. However it shows all images until it wraps to the next line:
<div class="client-logo-web-wrapper"><?php $logo_images = get_field( 'logo' ); ?>
<?php if ( $logo_images ) : ?>
<?php foreach ( $logo_images as $logo_image ): ?>
<a href="<?php echo $logo_image['url']; ?>">
<img src="<?php echo $logo_image['sizes']['thumbnail']; ?>" alt="<?php echo $logo_image['alt']; ?>" />
</a>
<p><?php echo $logo_image['caption']; ?></p>
<?php endforeach; ?>
<?php endif; ?>
<?php if ( have_rows( 'logo_gallery' ) ) : ?>
<?php while ( have_rows( 'logo_gallery' ) ) : the_row(); ?>
<?php $client_logo = get_sub_field( 'client_logo' ); ?>
<?php if ( $client_logo ) { ?>
<div class="client-logo"><img src="<?php echo $client_logo['url']; ?>" alt="<?php echo $client_logo['alt']; ?>" />
</div>
<?php } ?>
<?php endwhile; ?></div>
<?php else : ?>
<?php // no rows found ?>
<?php endif; ?>
Instead I would like to display a set number of images (for ex. 4) per row. Thanks!
You need to define the limit, and the break the loop once you reach that limit. Also, you can also set the max number of items in your ACF field definition.
Try the following with the limit set:
<?php
$show = 4;
$count = 0;
?>
<?php if ( $logo_images ) : ?>
<?php foreach ( $logo_images as $logo_image ): ?>
<?php $count++; ?>
<a href="<?php echo $logo_image['url']; ?>">
<img src="<?php echo $logo_image['sizes']['thumbnail']; ?>" alt="<?php echo $logo_image['alt']; ?>" />
</a>
<p><?php echo $logo_image['caption']; ?></p>
<?php if ($count > $show) { break; } ?>
<?php endforeach; ?>
<?php endif; ?>