I'm having trouble switching an ACF Image field from the default fullsize to the thumbnail image in the HTML output.
I have an Image type sub-field ID 'homepage_custom_navigation_image' within a Repeater field ID 'homepage_custom_navigation'. Any advice will be greatly appreciated.
Here's the code I have so far, which is displaying the fullsize image OK but making the download time of my page pretty long:
<div id="homepage-navigation-container">
<?php
$rows = get_field('homepage_custom_navigation');
if($rows)
{
foreach($rows as $row)
{
echo '<div class="homepage-navigation-item">
<div class="homepage-navigation-item-image">
<a href=' . $row['homepage_custom_navigation_link'] . '><img src=' . $row['homepage_custom_navigation_image'] . ' alt=' . $row['homepage_custom_navigation_title'] . '></a>
</div>
<div class="homepage-navigation-item-title">
<a href=' . $row['homepage_custom_navigation_link'] . '><h2>' . $row['homepage_custom_navigation_title'] . '</h2></a>
</div>
</div>';
}
}
?>
</div>
If you'd like to control the size of an image, I can show you how I normally output them using ACF.
<div id="homepage-navigation-container">
<?php
if(get_field('homepage_custom_navigation'))
{
while(has_sub_field){
}
foreach($rows as $row)
{
echo '<div class="homepage-navigation-item">
<div class="homepage-navigation-item-image">
<a href=' . get_sub_field('homepage_custom_navigation_link'). '>'. wp_get_attachment_image(get_sub_field('homepage_custom_navigation_image'), 'thumbnail'). '</a></div>
<div class="homepage-navigation-item-title">
<a href=' . get_sub_field('homepage_custom_navigation_link') . '><h2>' . get_sub_field('homepage_custom_navigation_title') . '</h2></a>
</div>
</div>';
}
}
?>
This is assuming that 'homepage_custom_navigation_title', 'homepage_custom_navigation_link', and 'homepage_custom_navigation_image' are all subfields within your repeater. The key is to using wp_get_attachment_image. This will use the WordPress function, that creates an image based on the ID and size value input in the parameters. 'Thumbnail' is one of the WordPress default sizes though they can be tweaked and customized in your functions.php file.
Thanks everyone for your help a guidance. I took a bit of info from each of your suggestions and came up with this as an answer:
<!-- Homepage custom navigation here -->
<div id="homepage-navigation-container">
<?php if( have_rows('homepage_custom_navigation') ): ?>
<?php while( have_rows('homepage_custom_navigation') ): the_row();
// vars
$thumb = wp_get_attachment_image_src(get_sub_field('homepage_custom_navigation_image'), 'thumbnail');
$desc = get_sub_field('homepage_custom_navigation_title');
$link = get_sub_field('homepage_custom_navigation_link');
?>
<div class="homepage-navigation-item">
<div class="homepage-navigation-item-image" style="background-image: url(<?php echo $thumb[0]; ?>); background-size: 120px auto; background-repeat: no-repeat; ">
</div>
<div class="homepage-navigation-item-title">
<h2><?php echo $desc;?></h2>
</div>
</div>
<?php endwhile; ?>
<?php endif; ?>
</div>
Try this:
<div id="homepage-navigation-container">
<?php if( have_rows('homepage_custom_navigation') ): ?>
<?php while( have_rows('homepage_custom_navigation') ): the_row();
// vars
$gal = get_sub_field('homepage_custom_navigation_image');
$desc = get_sub_field('homepage_custom_navigation_title');
$url = $gal['url'];
$title = $gal['title'];
$alt = $gal['alt'];
$size = 'thumbnail';
$thumb = $gal['sizes'][ $size ];
?>
<div class="homepage-navigation-item">
<div class="homepage-navigation-item-image">
<img src="<?php echo $thumb; ?>" alt="<?php echo $alt; ?>" /></div>
<div class="homepage-navigation-item-title">
<?php echo $desc;?></h2>
</div>
</div>
<?php endwhile; ?>
<?php endif; ?>
Just make sure that in "Return Value" you have selected "Image Object" and it should work (I have added alt for proper HTML5 and you can even add the image size if you want)
Related
I am trying to display an image in a while loop that uses a custom image size set-up in the functions.php file.
The code below is:
<?php
elseif(get_row_layout() == 'services_list'):
$image = get_sub_field('image');
// Image variables
$url = $image['url'];
// Thumbnail size attributes
$size = 'services-image';
$thumb = $image['sizes'][$size];
$width = $image['sizes'][$size . '-width'];
$height = $image['sizes'][$size . '-height'];
?>
<section class="content">
<div class="row">
<div class="columns medium-12">
<ul class="medium-block-grid-4" data-equalizer data-options="equalize_on_stack: true">
<?php
if(have_rows('services_list')):
$count = 0;
while (have_rows('services_list')) : the_row();
$count++;
?>
<li>
<a href="<?php echo get_sub_field('link'); ?>">
<img src="<?php echo get_sub_field('image'); ?>" />
<div class="service_title">
<p><?php echo get_sub_field('text'); ?></p>
</div>
</a>
</li>
<?php
endwhile;
endif;
?>
</ul>
</div>
</div>
</section>
<?php endif; ?>
However, the image path returns 'Array' in the code?
Change in your custom field return format in Image array to Image URL.
My 'hero' element is taking most of the top page, and an user would have to manually scroll past it to get to the content.
I want to change it so that clicking the links will scroll past the image and down to the posts title. At the minute, clicking the post reloads the page and the hero element is on top. But if you click 'more' tag, it scrolls nicely.
How do I make it so that clicking the link will scroll the page down in Wordpress? I don't mean 'more' tag. Maybe there is a way to update the link functions in WP so the links will create anchor like 'more' tag?
I haven`t got a code that creates a link, as they are created by WP (they are post links).
<div class="big">
</div>
<article><div class="post">
if (have_posts()) :
while (have_posts()) : the_post(); ?>
<?php the_content(); ?>
</div></article>
.big {
height: 1200px;
width: 900px;
background-color: grey;
}
JS Fiddle: https://jsfiddle.net/tvue1mwo/
single.php code:
<?php
if (is_single()) {
// Currently using get_header('posts'), so I can hide hero element by css and unhide it with js
get_header('posts');
// If I understand right, here should go the ANCHOR link?
}
else {
// Loads normal hero withou extra css class
get_header();
}
?>
<div class="main-section wrapper">
<?php
if (have_posts()) :
while (have_posts()) : the_post(); ?>
<div class="post-content u-cf">
<h2 class="post"><a href="<?php the_permalink(); ?>">
<?php the_title(); ?></a></h2>
<p class="post-info"><i class="fa fa-folder-open" aria-hidden="true"></i>
<?php
$categories = get_the_category();
$separator = ", ";
$output = '';
if ($categories) {
foreach ($categories as $category) {
$output .= '' . $category->cat_name . '' . $separator;
}
echo trim($output, $separator);
}
?>
|
<i class="fa fa-clock-o" aria-hidden="true"></i> <?php the_time('j/m/Y'); ?>
</p>
<div class="banner-image"><?php the_post_thumbnail('banner-image'); ?></div>
<?php the_content(); ?>
<?php endwhile; ?>
</div>
<?php
else :
echo '<p> No Content found</p>';
endif; ?>
</div>
<?php get_footer(); ?>
index.php:
<?php
if (have_posts()) :?>
<?php $count = 1;
while (have_posts()) : the_post(); ?>
<div class="post-content u-cf">
<?php if (has_post_thumbnail()) {
?>
<div class="post-thumbnail u-cf"><a href="<?php the_permalink(); ?>">
<?php the_post_thumbnail('small-thumbnail') ?></a>
</div>
<?php } ?>
<h2 class="post">
<a href="<?php the_permalink(); ?>">
<?php the_title(); ?>
</a>
</h2>
<p class="post-info"><i class="fa fa-folder-open" aria-hidden="true"></i>
<?php
$categories = get_the_category();
$separator = ", ";
$output = '';
if ($categories) {
foreach ($categories as $category) {
$output .= '' . $category->cat_name . '' . $separator;
}
echo trim ($output, $separator);
}
?>
|<i class="fa fa-clock-o" aria-hidden="true"></i> <?php the_time('j/m/Y'); ?>
</p>
<?php the_content(); ?>
<hr>
<?php if ( 2 === $count ) { ?>
<div class="main-content-advert">
<p>Lorem ipsum</p><p>Lorem impsum</p>
</div>
<hr>
<?php }
$count++; ?>
<?php endwhile; ?>
</div>
<?php
else :
echo '<p> No Content found</p>';
endif; ?>
If you are using index.php to display the homepage & archives, you can do the following:
<?php
/* 1. define the name of the anchor to jump to */
$anchorname = "skipheroimage";
$count = 0;
if (have_posts()) :
while (have_posts()) : the_post();
?>
<?php
$count++; /* increment the count so that each anchor is unique on the page */
/* 2. add the anchor to the permalink so it will jump directly to the anchor */
$linkwithanchor = get_permalink()."#".$anchorname.$count;
?>
<div class="post-content u-cf">
/* 3. use our $linkwithanchor variable to create the link */
<h2 class="post"><a href="<?php echo $linkwithanchor; ?>">
<?php the_title(); ?></a></h2>
/* no change to the code that was here, so keep it as it was...
... I just removed it to make my changes easier to find */
<div class="banner-image"><?php the_post_thumbnail('banner-image'); ?></div>
/* 4. add our anchor - this is where the link will jump to */
<a id="<?php echo $anchorname.$count; ?>" name="<?php echo $anchorname.$count; ?>"></a>
<?php the_content(); ?>
</div> /* NOTE - you had this in the wrong place. */
<?php endwhile; ?>
<?php
else :
echo '<p> No Content found</p>';
endif; ?>
This will create an anchor directly after the banner image, and add the anchor name to the link so that it will jump directly to it.
I have commented and numbered each step directly in the code.
You will need to do this for any templates you have that displays the links (e.g. archive.php)
I am trying to add a grid of blog posts to my homepage template. I have pulled in the content from 4 blog posts, now I just need to pull in the featured image as a background for each div.
Here is my current, half finished code, the background inline style isnt actually working right now, and I can't figure out why.
<?php /* Template Name: Home Content Template*/ ?>
<?php get_header(); ?>
<div class="row show-grid lrds-hm-grd-wrppr">
<div class="span2 lrds-hm-grd-bx lrds-hm-grd-bx-2" data-original-title="" title="" style="background url (<?php echo get_the_post_thumbnail_url($post_id1, 'full'); ?>) center center; background-size: cover; background-repeat: no-repeat;">
<?php
$post_id1 = 172;
$queried_post = get_post($post_id1);
?>
<h2><?php echo $queried_post->post_title; ?></h2>
<?php echo $queried_post->post_content; ?>
</div>
<div class="span2 lrds-hm-grd-bx lrds-hm-grd-bx-2" data-original-title="" title="" style="background url (<?php echo get_the_post_thumbnail_url($post_id2, 'full'); ?>) center center; background-size: cover; background-repeat: no-repeat;">
<?php
$post_id2 = 174;
$queried_post = get_post($post_id2);
?>
<h2><?php echo $queried_post->post_title; ?></h2>
<?php echo $queried_post->post_content; ?>
</div>
<div class="span3 lrds-hm-grd-bx lrds-hm-grd-bx-3" data-original-title="" title="" style="background url (<?php echo get_the_post_thumbnail_url($post_id3, 'full'); ?>) center center; background-size: cover; background-repeat: no-repeat;">
<?php
$post_id3 = 176;
$queried_post = get_post($post_id3);
?>
<h2><?php echo $queried_post->post_title; ?></h2>
<?php echo $queried_post->post_content; ?>
</div>
<div class="span4 lrds-hm-grd-bx lrds-hm-grd-bx-4" data-original-title="" title="" style="background url (<?php echo get_the_post_thumbnail_url($post_id4, 'full'); ?>) center center; background-size: cover; background-repeat: no-repeat;">
<?php
$post_id4 = 210;
$queried_post = get_post($post_id4);
?>
<h2><?php echo $queried_post->post_title; ?></h2>
<?php echo $queried_post->post_content; ?>
</div>
</div>
<div class="row">
<div class="col-md-2">
</div>
<div class="col-md-8">
<?php if(have_posts()) : ?>
<?php while(have_posts()) : the_post(); ?>
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<?php the_title('<h2>','</h2>'); ?>
<?php the_content(); ?>
</div>
<?php
// tags anyone?
the_tags();
?>
<?php endwhile; ?>
<?php if (!is_singular()) : ?>
<div class="nav-previous alignleft"><?php next_posts_link( 'Older posts' ); ?></div>
<div class="nav-next alignright"><?php previous_posts_link( 'Newer posts' ); ?></div>
<?php endif; ?>
<?php else : ?>
<div class="alert alert-info">
<strong>No content in this loop</strong>
</div>
<?php endif; ?>
</div>
<div class="col-md-2">
<?php
if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('Sidebar')) : // Sidebar name
?>
<?php
endif;
?>
</div>
</div>
<?php get_footer(); ?>
yes just pass it like this in all your
background url (<?php echo wp_get_attachment_url (get_post_thumbnail_id( $post_id($post_id)); ?>)
Here is an example of a working file with the background image being pulled in from the featured image of the same page, not a separate blog post (which is what I am currently trying to do on a different template)
'code'
<?php $title = trim(get_field("custom_headline"));
// check for custom title different from page name
if ($title == "") {
$title = Trim(get_the_title());
}
?>
<h2><?php echo $title; ?></h2>
<?php
global $related_du;
$rel = $related_du->show( get_the_ID(), true );
$boxTitle = array();
$boxContent = array();
$i = 0;
// Display the title of each related post
if( is_array( $rel ) && count( $rel ) > 0 ) {
foreach ( $rel as $r ) {
if ( is_object( $r ) ) {
if ($r->post_status != 'trash') {
//echo get_the_title( $r->ID ) . '<br />';
//echo get_post($post = $r->ID ) . '<br />';
$displayString = "";
$content_post = get_post($r->ID);
$boxTitle[$i] = $content_post->post_title;
$content = $content_post->post_content;
$content = apply_filters('the_content', $content);
$content = str_replace(']]>', ']]>', $content);
$boxContent[$i] = $content;
$i++;
}
}
}
}
?>
<div class="hero2box" style="background:URL(<?php the_post_thumbnail_url( 'full' ); ?>) center center; background-size: cover; background-repeat: no-repeat;">
<div class="col-sm-1"></div>
<div class="col-sm-5 tanLeft">
<h4><?php echo $boxTitle[0] ; ?></h4>
<hr class="red">
<?php echo $boxContent[0] ; ?>
</div>
<div class="col-sm-5 tanRight">
<h4><?php echo $boxTitle[1] ; ?></h4>
<hr class="red">
<?php echo $boxContent[1] ; ?>
</div>
<div class="col-sm-1"></div>
</div>
<div class="row">
<div class="col-md-2">
</div>
<div class="col-md-8">
<?php while(have_posts()) : the_post(); ?>
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<?php the_content(); ?>
<?php //echo get_post_type(); ?>
</div>
<?php
// tags anyone?
the_tags();
?>
<?php endwhile; ?>
<?php if (!is_singular()) : ?>
<div class="nav-previous alignleft"><?php next_posts_link( 'Older posts' ); ?></div>
<div class="nav-next alignright"><?php previous_posts_link( 'Newer posts' ); ?></div>
<?php endif; ?>
<?php else : ?>
<div class="alert alert-info">
<strong>No content in this loop</strong>
</div>
<?php endif; ?>
</div>
<div class="col-md-2">
<?php
if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('Sidebar')) : // Sidebar name
?>
<?php
endif;
?>
</div>
<?php
global $related;
$rel = $related->show( get_the_ID(), true );
// Display the title of each related post
if( is_array( $rel ) && count( $rel ) > 0 ) {
foreach ( $rel as $r ) {
if ( is_object( $r ) ) {
if ($r->post_status != 'trash') {
//echo get_the_title( $r->ID ) . '<br />';
//echo get_post($post = $r->ID ) . '<br />';
$displayString = "";
$content_post = get_post($r->ID);
$content = $content_post->post_content;
$content = apply_filters('the_content', $content);
$content = str_replace(']]>', ']]>', $content);
$displayString = $displayString . $content . "";
echo $displayString;
}
}
}
}
?>
'code'
Ok Solved! I had to be more simple, cuz I'm dumb sometimes. :P
<?php
$post_id1 = 172;
$queried_post = get_post($post_id1);
?>
<div class="row show-grid lrds-hm-grd-wrppr">
<div class="span2 lrds-hm-grd-bx lrds-hm-grd-bx-2" style="background:url(<?php echo wp_get_attachment_url(get_post_thumbnail_id( $post_id1)); ?>) ">
<h2><?php echo $queried_post->post_title; ?></h2>
<?php echo $queried_post->post_content; ?>
</div>
I have some code that I was trying to display only one post from the category 17. But I can't it. Anybody have any idea? my code is below. I have tried it but show all post of category 17. I want to show only one post from cat 17.
<?php
if(have_posts()):?>
<?php while(have_posts()):?>
<?php the_post();?>
<?php
$post = $wp_query->post;
if ( in_category( '17' ) ) {
?>
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
<div class="car_box shadow left">
<h1><?php the_title(); ?></h1>
<!--<img src="images/car2.png" alt="PREMIUM CARS" align="middle"/>-->
<?php
// Post Image.
if ( has_post_thumbnail() ) {
the_post_thumbnail();
}
else {
echo '<img src="' . get_bloginfo( 'stylesheet_directory' ) . '/images/thumbnail-default.jpg" />';
}
?>
<p>BMW 7 Series or simillar</p>
<div class="desc left">
<div class="passenger left">
4
</div>
<div class="suitcase left">
3
</div>
<div class="doors left">
5
</div>
<div class="gear left">
Auto
</div>
</div>
View More
</div>
</a>
<?php } ?>
<?php endwhile;?>
<?php endif;?>
Add break; in the loop after you've shown your first found post, that would be before you close the inner if statement.
I'm trying to output custom image size in my code:
<?php if(get_field('repeater-field-name')) { ?>
<?php foreach (get_field('repeater-field-name') as $row) :?>
<div class="item" onclick="location.href='<?php print $row['link'] ?>';" style="cursor: pointer;">
<div class="sisseviskaja-title"><h2><?php print $row['title'] ?></h2></div>
<div class="sisseviskaja-pilt"><img src="<?php print $row['image'] ?>" alt="" /></div>
</div>
<?php endforeach; ?>
<?php } ?>
I have tried ACF tutorial codes but i'd like to keep foreach loop that i have. I'm no PHP guru so i havent got any good ideas to implement it.
Can someone, please, help me?
Here's the way to do with ACF codes. This is using array for the image (which you need to do if you want to pull out the dimensions). I'm not sure exactly if it can be done the way you want to do it.
<?php if (have_rows('project_listings')){ ?>
<?php while (have_rows('project_listings')){ the_row();
$link = get_sub_field('link_field');
$title = get_sub_field('title_field');
$image = get_sub_field('image');
//additional vars
$size = 'full';
$width = $image['sizes'][ $size . '-width' ];
$height = $image['sizes'][ $size . '-height' ];
?>
<div class="item" onclick="location.href='<?php echo $link ?>';" style="cursor: pointer;">
<div class="sisseviskaja-title">
<h2><?php echo $title ?></h2>
</div>
<div class="sisseviskaja-pilt">
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" width="<?php echo $width; ?>" height="<?php echo $height; ?>"/>
</div>
</div>
<?php }; ?>
<?php }; ?>
I do it like this:
<?php if( have_rows('field-name') ): ?>
<?php while( have_rows('field-name') ): the_row(); ?>
<?php
$image = get_sub_field('picture');
$size = 'thumbnail'; // (thumbnail, medium, large, full or custom size)
if( $image ) {
echo wp_get_attachment_image( $image, $size );
}
?>
<?php endwhile; ?>
<?php endif; ?>