ACF repeater field custom image size output - wordpress

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; ?>

Related

Wordpress showing featured post card below each post, need to show featured on the featured page

I am working on a website that has a section below the blog post that shows a marked featured post, the issue I am having is that on the featured page the card section is showing the 1st post on the post list instead of its own featured post.
This is setup in a component-card.php
<?php
$post_id = (get_query_var('post_id')) ? get_query_var('post_id') : $post->ID;
$type = get_query_var('type');
$pages = get_query_var('pages');
$col = get_query_var('col');
$image = wp_get_attachment_image_src(get_post_thumbnail_id($post_id), 'single-post-thumbnail');
$show_featured = get_field("featured_story", $post_id);
$link = get_the_permalink($post_id);
$title = get_the_title($post_id);
$excerpt = get_the_excerpt($post_id);
$count = 6;
$switch = '';
if ($col === '12') {
$count = 12;
$switch = 'switch';
}
?>
<?php if ($type !== 'page'): ?>
<?php if ($show_featured): ?>
<article class="component-article-cards featured">
<div class="row align-middle align-center">
<div class="col-12 col-md-<?php echo $count ?> <?php echo $switch ?>">
<div class="article-inner">
<h3><?php echo $title; ?></h3>
<hr />
<?php echo $excerpt; ?>
Read full article
</div>
</div>
<div class="col-12 col-md-<?php echo $count ?>">
<?php if ($image) : ?>
<img src="<?php echo $image[0]; ?>">
<?php endif; ?>
</div>
</div>
</article>
<?php else: ?>
<article class="component-article-cards">
<?php if ($image) : ?>
<img src="<?php echo $image[0]; ?>">
<?php endif; ?>
<div class="article-inner">
<h3><?php echo $title; ?></h3>
<hr />
<?php echo $excerpt; ?>
Read full article
</div>
</article>
<?php endif; ?>
<?php endif; ?>
Any help would be gratefully appreciated

Is there any actual way to pull in a featured image from a blog post into a div on another page template as a background image

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>

Want to show image caotion or title above portfolio image

For a recently developed wordpress website http://stc.co.in, I'm using Huge-IT portfolio to show the projects in each sectors. On clicking on projects a popup is showing with multiple images. Now I want to show image caption or title above the big image which was added while uploading image through WordPress. Please guide how to achieve this.
Thanks in advance.
Regards, Sanjay
If the plugin cant let you do it simply with text editor, in wordpress you need to search the specific section you want and work on php file.
When you have founded it you can put an html section with your title.
you need to made changes in plugin file..
follow path :
wordpress-sitename/wp-content/plugins/portfolio-gallery/Front_end/portfolio_front_end_view.php
modify line :
<ul id="huge_it_portfolio_popup_list_<?php echo $portfolioID; ?>">
<?php
foreach($images as $key=>$row)
{
$imgurl=explode(";",$row->image_url);
array_pop($imgurl);
$link = $row->sl_url;
$descnohtml=strip_tags($row->description);
$result = substr($descnohtml, 0, 50);
?>
<li class="pupup-element" id="huge_it_portfolio_pupup_element_<?php echo $row->id; ?>">
<div class="heading-navigation_<?php echo $portfolioID; ?>">
<div style="clear:both;"></div>
</div>
<div class="popup-wrapper_<?php echo $portfolioID; ?>">
<div class="image-block_<?php echo $portfolioID; ?>">
<?php if($paramssld["ht_view2_show_popup_title"]=='on'){?><h3 class="title"><?php echo $row->name; ?></h3><?php } ?>
<?php if($row->image_url != ';'){ ?>
<img alt="<?php echo $row->name; ?>" id="wd-cl-img<?php echo $key; ?>" src="<?php echo $imgurl[0]; ?>" />
<?php
global $wpdb;
$cimg_url = $imgurl[0];
$attachment = $wpdb->get_results("SELECT ID FROM wp_posts WHERE guid='".$cimg_url."'",'ARRAY_A');
$attachment_title = get_the_title($attachment[0]['ID']);
?>
<div class="cls_img_ttl" id="main_img_ttl"><?php echo $attachment_title; ?></div>
<?php } else { ?>
<img alt="<?php echo $row->name; ?>" id="wd-cl-img<?php echo $key; ?>" src="images/noimage.jpg" />
<?php
} ?>
</div>
<div class="right-block">
<?php if($paramssld["ht_view2_show_popup_title"]=='on'){?><h3 class="title"><?php echo $row->name; ?></h3><?php } ?>
<?php if($paramssld["ht_view2_thumbs_position"]=='before' and $paramssld["ht_view2_show_thumbs"] == 'on'){?>
<div><ul class="thumbs-list_<?php echo $portfolioID; ?>">
<?php
global $wpdb;
foreach($imgurl as $key=>$img){
$cimg_url = $img;
$attachment = $wpdb->get_results("SELECT ID FROM wp_posts WHERE guid='".$cimg_url."'",'ARRAY_A');
$attachment_title = get_the_title($attachment[0]['ID']);
?>
<li><a href="<?php echo $row->sl_url; ?>" class="group1" data-ttl="<?php echo $attachment_title; ?>" >
<img src="<?php echo $img; ?>">
</a></li>
<?php } ?>
</ul></div>
<?php } ?>
<?php if($paramssld["ht_view2_show_description"]=='on'){?><div class="description"><?php echo $row->description; ?></div><?php } ?>
<?php if($paramssld["ht_view2_thumbs_position"]=='after' and $paramssld["ht_view2_show_thumbs"] == 'on'){?>
<div><ul class="thumbs-list_<?php echo $portfolioID; ?>">
<?php $imgurl=explode(";",$row->image_url);array_pop($imgurl);
foreach($imgurl as $key=>$img){?>
<li><img src="<?php echo $img; ?>"></li>
<?php } ?>
</ul></div>
<?php } ?>
<?php if($paramssld["ht_view2_show_popup_linkbutton"]=='on'){?>
<div class="button-block">
<a href="<?php echo $link; ?>" <?php if ($row->link_target=="on"){echo 'target="_blank"';}?>><?php echo $paramssld["ht_view2_popup_linkbutton_text"]; ?></a>
</div>
<?php } ?>
<div style="clear:both;"></div>
</div>
<div style="clear:both;"></div>
</div>
</li>
<?php
}?>
</ul>
JS:
jQuery('#huge_it_portfolio_popup_list_<?php echo $portfolioID; ?> .popup-wrapper_<?php echo $portfolioID; ?> .right-block ul.thumbs-list_<?php echo $portfolioID; ?> li a').click(function(){
var width=jQuery(window).width();
if(width<=767){
jQuery('body').scrollTop(0);
}
jQuery(this).parent().parent().find('li.active').removeClass('active');
jQuery(this).parent().addClass('active');
var main_img_ttl = jQuery(this).attr('data-ttl');
alert(main_img_ttl);
jQuery(this).parents('.right-block').prev().find('.cls_img_ttl').html(main_img_ttl);
jQuery(this).parents('.right-block').prev().find('img').attr('src',jQuery(this).find('img').attr('src'));
return false;
});
you can download file here : LINK

WordPress sticky post not showing

In my Index.php template file I have the following code which should show a featured post if it's sticky and then loop through the remaining posts below. However on the second loop shows anything and the sticky post does not appear...
The post has definitely been made sticky and second loop has successfully hidden it but the first loop just doesn't acknowledge it :/ it's not set to private and is marked as published.
Can anyone see any issues with the code? Thanks
<?php get_header(); ?>
<div class="clearfix">
<?php if(is_home()) { //if home then show the featured post and others ?>
<div class="main-column">
<?php
$sticky = get_option( 'sticky_posts' );
$sticky_query = new WP_Query( 'p=' . $sticky[0] );
// The Loop
while ( $sticky_query->have_posts() ) : $sticky_query->the_post(); ?>
<div class="featured">
<article class="clearfix">
<h2><?php echo $post->post_title ?></h2>
<p class="who-when">by <?php echo get_the_author_meta('first_name'); ?> <?php echo get_the_author_meta('last_name') ?> on <?php echo get_the_date() ?> </p>
<?php if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
echo '<a href="'.get_permalink().'">';
the_post_thumbnail();
echo '</a>';
} else {
echo '<img src="'. get_bloginfo('template_directory') .'/images/thumb-placeholder.png" alt="Blog thumbnail" />';
}?>
<p><?php the_excerpt_max_charlength(300) ?></p>
</article>
</div>
<?php endwhile; ?>
<div class="articles">
<?php $query = new WP_Query( array( 'post__not_in' => get_option( 'sticky_posts' ), 'posts_per_page' => 10 ) );
$count = 0;
while ( $query->have_posts() ) : $query->the_post();
$count++; ?>
<div <?php if($count % 2 == 0) echo 'class="no-margin"' ?>>
<article>
<h2><?php echo $post->post_title ?></h2>
<p class="who-when">by <?php echo get_the_author_meta('first_name'); ?> <?php echo get_the_author_meta('last_name') ?> on <?php echo get_the_date() ?> </p>
<?php if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
echo '<a href="'.get_permalink().'">';
the_post_thumbnail();
echo '</a>';
} else {
echo '<img src="'. get_bloginfo('template_directory') .'/images/thumb-placeholder.png" alt="Blog thumbnail" />';
}?>
<p><?php the_excerpt_max_charlength(150) ?></p>
</article>
</div>
<?php if($count % 2 == 0) echo '<hr/>' ?>
<?php endwhile; ?>
</div>
<?php }else if(is_search() || is_category || is_tag()){ //if other than home (search, tag, category) then show normal list (no featured style) ?>
<div class="main-column search">
<?php
$count = 0;
if(is_search()){
echo '<h1>Search Results</h1>';
} elseif(is_author()){ ?>
<?php $curauth = (isset($_GET['author_name'])) ? get_user_by('slug', $author_name) : get_userdata(intval($author)); ?>
<h1><?php echo $curauth->user_firstname; ?> <?php echo $curauth->user_lastname; ?></h1>
<div class="archive-meta">
<p><?php echo $curauth->user_description; ?></p>
</div>
<?php } else if(is_category()){ ?>
<h1><?php single_cat_title( '', true ); ?></h1>
<?php
$category_description = category_description();
if ( ! empty( $category_description ) )
echo '<div class="archive-meta">' . $category_description . '</div>';
?>
<?php }else if (is_tag()){
echo '<h1>'.the_tag().'</h1>';
}
if ( have_posts() ) : while ( have_posts() ) : the_post();
$count++; ?>
<div>
<article>
<h2><?php echo $post->post_title ?></h2>
<p class="who-when">by <?php echo get_the_author_meta('first_name'); ?> <?php echo get_the_author_meta('last_name') ?> on <?php echo get_the_date() ?> </p>
<?php if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
echo '<a href="'.get_permalink().'">';
the_post_thumbnail();
echo '</a>';
} else {
echo '<img src="'. get_bloginfo('template_directory') .'/images/thumb-placeholder.png" alt="Blog thumbnail" />';
}?>
<p><?php the_excerpt_max_charlength(300) ?></p>
</article>
</div>
<?php endwhile; else: ?>
<p>Sorry, no posts matched your criteria.</p>
<?php endif; ?>
<?php } ?>
</div>
<?php get_sidebar(); ?>
</div>
<?php get_footer(); ?>
Changing the code to:
$sticky_query = new WP_Query( 'p=' . $sticky[1] );
fixes the problem but I don't know why???

How do I set ACF repeater to only show X items per row

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; ?>

Resources