Docs

[nathansjcorp]

Hi, I want to add a small image/logo next to the title of each single post, and also have it displayed in xtheme recent post.

Currently i’m using html in the title post but it is not very user friendly ex:
(TMTS 2016 Exhibition <br>UT-300SY Mill-Turn Machine</div> <img src="http://mtstv.sjcorpwebdesign.com/tmts/wp-content/uploads/2016/09/logo-accuway-2.png" />)

1-I created a new custom field with ACF and named in “logo”
I edited (child theme version) renew wp-single.php and added `”<?php if( get_field(‘logo’) ): ?>
<img />” />
<?php endif; ?> “`
So far so good i can now see the logo in the post on the top left.

I’m now trying to output the field in recent post but the other forum sample codes are not working.

My current functions.php

// Rand Recent Posts
// =============================================================================
function rand_recent_posts( $atts ) {
  extract( shortcode_atts( array(
    'id'          => '',
    'class'       => '',
    'style'       => '',
    'type'        => 'post',
    'count'       => '',
    'category'    => '',
    'offset'      => '',
    'orientation' => '',
    'no_image'    => '',
    'fade'        => '',
    'orderby'     => ''
), $atts, 'rand_recent_posts' ) );
 
$allowed_post_types = apply_filters( 'cs_recent_posts_post_types', array( 'post' => 'post' ) );
$type = ( isset( $allowed_post_types[$type] ) ) ? $allowed_post_types[$type] : 'post';
 
$id            = ( $id          != ''          ) ? 'id="' . esc_attr( $id ) . '"' : '';
$class         = ( $class       != ''          ) ? 'x-recent-posts cf ' . esc_attr( $class ) : 'x-recent-posts cf';
$style         = ( $style       != ''          ) ? 'style="' . $style . '"' : '';
$count         = ( $count       != ''          ) ? $count : 3;
$category      = ( $category    != ''          ) ? $category : '';
$category_type = ( $type        == 'post'      ) ? 'category_name' : 'portfolio-category';
$offset        = ( $offset      != ''          ) ? $offset : 0;
$orientation   = ( $orientation != ''          ) ? ' ' . $orientation : ' horizontal';
$no_sticky     = ( $no_sticky   == 'true'      );
$no_image      = ( $no_image    == 'true'      ) ? $no_image : '';
$fade          = ( $fade        == 'true'      ) ? $fade : 'false';

 
$js_params = array(
  'fade' => ( $fade == 'true' )
  );
 
  $data = cs_generate_data_attributes( 'recent_posts', $js_params );
 
  $output = "<div {$id} class=\"{$class}{$orientation}\" {$style} {$data} data-fade=\"{$fade}\" >";
 
    $q = new WP_Query( array(
      'orderby'             => "{$orderby}",
      'post_type'           => "{$type}",
      'posts_per_page'      => "{$count}",
      'offset'              => "{$offset}",
      "{$category_type}"    => "{$category}",
      'ignore_sticky_posts' => $no_sticky
    ) );
 
    if ( $q->have_posts() ) : while ( $q->have_posts() ) : $q->the_post();
 
      if ( $no_image == 'true' ) {
        $image_output       = '';
        $image_output_class = 'no-image';
      } else {
        $image              = wp_get_attachment_image_src( get_post_thumbnail_id(), 'entry-cropped' );
        $bg_image           = ( $image[0] != '' ) ? ' style="background-image: url(' . $image[0] . ');"' : '';
        $image_output       = '<div class="x-recent-posts-img"' . $bg_image . '></div>';
        $image_output_class = 'with-image';
      }
 
      $output .= '<a href="' . get_permalink( get_the_ID() ) . '">'
                 . '<article id="post-' . get_the_ID() . '" class="' . implode( ' ', get_post_class() ) . '">'
                   . '<div class="entry-wrap">'
                     . $image_output
                     . '<div class="x-recent-posts-content">'
                       . '<h3 class="h-recent-posts">' . get_the_title() . '</h3>'
                       . '<span class="x-recent-posts-date">' . get_the_date() . '</span>'
                        . '</div>'
                   . '</div>'
                 . '</article>'
               . '</a>';
 
    endwhile; endif; wp_reset_postdata();
 
  $output .= '</div>';
 
  return $output;
}
 
add_action('wp_head', 'rand_recent_posts');
 
add_shortcode( 'rand_recent_posts', 'rand_recent_posts' );
// End Rand Recent Posts
// =============================================================================

I’ve tried various ways to output the image field: shortcodes, get field, next to get the title true etc…
I must be doing something wrong, could you please help?

[Lely]

Hi There,

Would you mind providing us with login credentials so we can take a closer look on your settings? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password
– FTP credentials

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

[nathansjcorp]

This reply has been marked as private.

[Lely]

Hi There,

Something like this should work:

$customlogo = get_field('logo');
if( !empty($customlogo) ):
$customlogohtml = "<img  src='".$customlogo['url'] ."'/>";
endif; 

To add that code on Recent Post element shortcode, please update the code you have shared above to this:

// Rand Recent Posts
// =============================================================================
function rand_recent_posts( $atts ) {
  extract( shortcode_atts( array(
    'id'          => '',
    'class'       => '',
    'style'       => '',
    'type'        => 'post',
    'count'       => '',
    'category'    => '',
    'offset'      => '',
    'orientation' => '',
    'no_image'    => '',
    'fade'        => '',
    'orderby'     => ''
), $atts, 'rand_recent_posts' ) );
 
$allowed_post_types = apply_filters( 'cs_recent_posts_post_types', array( 'post' => 'post' ) );
$type = ( isset( $allowed_post_types[$type] ) ) ? $allowed_post_types[$type] : 'post';
 
$id            = ( $id          != ''          ) ? 'id="' . esc_attr( $id ) . '"' : '';
$class         = ( $class       != ''          ) ? 'x-recent-posts cf ' . esc_attr( $class ) : 'x-recent-posts cf';
$style         = ( $style       != ''          ) ? 'style="' . $style . '"' : '';
$count         = ( $count       != ''          ) ? $count : 3;
$category      = ( $category    != ''          ) ? $category : '';
$category_type = ( $type        == 'post'      ) ? 'category_name' : 'portfolio-category';
$offset        = ( $offset      != ''          ) ? $offset : 0;
$orientation   = ( $orientation != ''          ) ? ' ' . $orientation : ' horizontal';
$no_sticky     = ( $no_sticky   == 'true'      );
$no_image      = ( $no_image    == 'true'      ) ? $no_image : '';
$fade          = ( $fade        == 'true'      ) ? $fade : 'false';

 
$js_params = array(
  'fade' => ( $fade == 'true' )
  );
 
  $data = cs_generate_data_attributes( 'recent_posts', $js_params );
 
  $output = "<div {$id} class=\"{$class}{$orientation}\" {$style} {$data} data-fade=\"{$fade}\" >";
 
    $q = new WP_Query( array(
      'orderby'             => "{$orderby}",
      'post_type'           => "{$type}",
      'posts_per_page'      => "{$count}",
      'offset'              => "{$offset}",
      "{$category_type}"    => "{$category}",
      'ignore_sticky_posts' => $no_sticky
    ) );
 
    if ( $q->have_posts() ) : while ( $q->have_posts() ) : $q->the_post();
 
      if ( $no_image == 'true' ) {
        $image_output       = '';
        $image_output_class = 'no-image';
      } else {
        $image              = wp_get_attachment_image_src( get_post_thumbnail_id(), 'entry-cropped' );
        $bg_image           = ( $image[0] != '' ) ? ' style="background-image: url(' . $image[0] . ');"' : '';
        $image_output       = '<div class="x-recent-posts-img"' . $bg_image . '></div>';
        $image_output_class = 'with-image';
      }
 $customlogo = get_field('logo');
if( !empty($customlogo) ):
$customlogohtml = "<img  src='".$customlogo['url'] ."'/>";
endif;
      $output .= '<a href="' . get_permalink( get_the_ID() ) . '">'
                 . '<article id="post-' . get_the_ID() . '" class="' . implode( ' ', get_post_class() ) . '">'
                   . '<div class="entry-wrap">'
                     . $image_output
                     . '<div class="x-recent-posts-content">'
                       . '<h3 class="h-recent-posts">' . get_the_title() . '</h3>'
                       . '<span class="x-recent-posts-date">' . get_the_date() . '</span>'
                        . '</div>'
                       .$customlogohtml
                   . '</div>'
                 . '</article>'
               . '</a>';
 
    endwhile; endif; wp_reset_postdata();
 
  $output .= '</div>';
 
  return $output;
}
 
add_action('wp_head', 'rand_recent_posts');
 
add_shortcode( 'rand_recent_posts', 'rand_recent_posts' );
// End Rand Recent Posts
// =============================================================================

I have added it below your content. Now feel free to move this line:
.$customlogohtml on your preferred position.

Hope this helps.

[nathansjcorp]

Hey thanks, but that did not work.
getting”Warning: Illegal string offset ‘url’ in /home/mtstv/public_html/tmts/wp-content/themes/x-child/functions.php on line 101″

i’m also trying to output the image field size, width & class so i can apply some simple css.

[Nico]

Hi There,

Would you mind sharing us your FTP so we could fully check your setup closer. Could not be able to check the codes why it is not working.

Don’t forget to set it as private reply.

Thanks.

[nathansjcorp]

This reply has been marked as private.

[Lely]

Hi There,

I have updated the code to this.

$customlogo = get_field('logo');
if (!is_array($customlogo)) {
  $customlogo = acf_get_attachment($customlogo);
  $customlogohtml = "<img class='custom-logo'  src='".$customlogo['url']."'/>";

}

The image code is there, but then the image source is blank. See this:https://support.advancedcustomfields.com/forums/topic/illegal-string-offset/. It seems that there are conflict with other plugins. You could try testing for a plugin conflict. You can do this by deactivating all third party plugins, and seeing if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time. Do let us know how this goes.

[nathansjcorp]

Ok it’s working now.
My original code was fine, there was a plugin conflict.

[Paul R]

Glad to know. Have a great day. 🙂

[nathansjcorp]

For anyone interested this is what i did:

Added 2 new fields in ACF. one an image (selected array) named “logo” the other one text “title_2”

[nathansjcorp]

This is my function php code

// Rand Recent Posts
// =============================================================================
function rand_recent_posts( $atts ) {
extract( shortcode_atts( array(
‘id’ => ”,
‘class’ => ”,
‘style’ => ”,
‘type’ => ‘post’,
‘count’ => ”,
‘category’ => ”,
‘offset’ => ”,
‘orientation’ => ”,
‘no_image’ => ”,
‘fade’ => ”,
‘orderby’ => ”
), $atts, ‘rand_recent_posts’ ) );

$allowed_post_types = apply_filters( ‘cs_recent_posts_post_types’, array( ‘post’ => ‘post’ ) );
$type = ( isset( $allowed_post_types[$type] ) ) ? $allowed_post_types[$type] : ‘post’;

$id = ( $id != ” ) ? ‘id=”‘ . esc_attr( $id ) . ‘”‘ : ”;
$class = ( $class != ” ) ? ‘x-recent-posts cf ‘ . esc_attr( $class ) : ‘x-recent-posts cf’;
$style = ( $style != ” ) ? ‘style=”‘ . $style . ‘”‘ : ”;
$count = ( $count != ” ) ? $count : 3;
$category = ( $category != ” ) ? $category : ”;
$category_type = ( $type == ‘post’ ) ? ‘category_name’ : ‘portfolio-category’;
$offset = ( $offset != ” ) ? $offset : 0;
$orientation = ( $orientation != ” ) ? ‘ ‘ . $orientation : ‘ horizontal’;
$no_sticky = ( $no_sticky == ‘true’ );
$no_image = ( $no_image == ‘true’ ) ? $no_image : ”;
$fade = ( $fade == ‘true’ ) ? $fade : ‘false’;

$js_params = array(
‘fade’ => ( $fade == ‘true’ )
);

$data = cs_generate_data_attributes( ‘recent_posts’, $js_params );

$output = “<div {$id} class=\”{$class}{$orientation}\” {$style} {$data} data-fade=\”{$fade}\” >”;

$q = new WP_Query( array(
‘orderby’ => “{$orderby}”,
‘post_type’ => “{$type}”,
‘posts_per_page’ => “{$count}”,
‘offset’ => “{$offset}”,
“{$category_type}” => “{$category}”,
‘ignore_sticky_posts’ => $no_sticky
) );

if ( $q->have_posts() ) : while ( $q->have_posts() ) : $q->the_post();

if ( $no_image == ‘true’ ) {
$image_output = ”;
$image_output_class = ‘no-image’;
} else {
$image = wp_get_attachment_image_src( get_post_thumbnail_id(), ‘entry-cropped’ );
$bg_image = ( $image[0] != ” ) ? ‘ style=”background-image: url(‘ . $image[0] . ‘);”‘ : ”;
$image_output = ‘<div class=”x-recent-posts-img”‘ . $bg_image . ‘></div>’;
$image_output_class = ‘with-image’;
}

/*
$customlogo = get_field(‘logo’);
if (!is_array($customlogo)) {
$customlogo = acf_get_attachment($customlogo);
$customlogohtml = ““;

}
*/

$customlogo = get_field(‘logo’);
if( !empty($customlogo) ):
$customlogohtml = ““;
endif;

$customtitle_2 = get_field(‘title_2’);
if( !empty($customtitle_2) ):
$customtitle_2html = “< src='”.$customtitle_2 .”‘/>”;
endif;

$output .= ‘‘
. ‘<article id=”post-‘ . get_the_ID() . ‘” class=”‘ . implode( ‘ ‘, get_post_class() ) . ‘”>’
. ‘<div class=”entry-wrap”>’
.'<div class=”title_post”>’.$customtitle_2 .'</div>’
. $image_output
. ‘<div class=”x-recent-posts-content”>’
. ‘<h3 class=”h-recent-posts”>’ .'<span class=”truncatedpost”>’. get_the_title() .'</span>’. ‘</h3>’
.'<div class=”logo_post”>’.$customlogohtml .'</div>’
. ‘<span class=”x-recent-posts-date”>’ . get_the_date() . ‘</span>’

. ‘</div>’
. ‘</div>’
. ‘</article>’
. ‘‘;

endwhile; endif; wp_reset_postdata();

$output .= ‘</div>’;

return $output;
}

[Rue Nel]

Hello There,

Thanks for sharing this information!
We really appreciate it.

If you need anything else we can help you with, don’t hesitate to open another thread.

[nathansjcorp]

this is what is added:

$customlogo = get_field(‘logo’);
if( !empty($customlogo) ):
$customlogohtml = ““;
endif;

$customtitle_2 = get_field(‘title_2’);
if( !empty($customtitle_2) ):
$customtitle_2html = “< src='”.$customtitle_2 .”‘/>”;
endif;

and then for the output:

.'<div class=”title_post”>’.$customtitle_2 .'</div>’

.'<div class=”logo_post”>’.$customlogohtml .'</div>’

note you can now target the class title_post & logo_post in CSS

[Christopher]

Thanks for sharing.

[Author]

Posts