Support » Plugin: WP Show Posts » Placing “post_tag” on the top of image

  • Resolved daytrader007

    (@daytrader007)


    Trying to customize WP Show Posts plugin a bit.
    Need to place “post_tag” (taxonomy) on the top of the image.
    Already customized css, so that works fine.
    However I can’t get the tag itself to work in php file.
    I have placed this line of code in functions.php file on line 194 right before closing

    <div style=”position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); font-size:80px; font-weight:900;”>BLAH</div>

    Added “position:relative;” in wp-show-posts-min.css file like so
    .wp-show-posts-image{margin-bottom:1em;position:relative;}

    Now all I need is to get the tag for that post to be displayed where I have “BLAH” and that would be displayed in the center of the image.

    Example: http://prntscr.com/cxljkk

    Could you help please?

Viewing 15 replies - 1 through 15 (of 17 total)
  • Thread Starter daytrader007

    (@daytrader007)

    From php file: http://prntscr.com/cxly95
    It works like magic (as seen in Example: http://prntscr.com/cxljkk), however I can’t figure out how to get the actual post’s [tag] thing in there.
    I’ve tried using same coding you have on line 84-89 in functions.php file but luck.

    // Show the terms
    if ( $include_terms && $location == $terms_location ) :
    $output[] = sprintf( ‘<span class=”wp-show-posts-terms wp-show-posts-meta”>%1$s</span>’,
    get_the_term_list( get_the_ID(), $taxonomy, ”, ‘, ‘ )
    );
    endif;

    • This reply was modified 5 years, 7 months ago by daytrader007.
    Plugin Author Tom

    (@edge22)

    Looking good!

    I just added a commit to the functions.php file on GitHub which includes a hook so you don’t have to alter the core file: https://github.com/tomusborne/WP-Show-Posts/commit/744b3a901955931fd369af6e6dc3d46cb46e34c9

    Then you could do something like this:

    add_action( 'wpsp_inside_image_container','tu_add_tags_to_image_container' );
    function tu_add_tags_to_image_container()
    {
        $output[] = sprintf( '<span class="wp-show-posts-terms wp-show-posts-meta">%1$s</span>',
    	get_the_term_list( get_the_ID(), $taxonomy, '', ', ' )
        );
        ?>
        <div style="position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); font-size:80px; font-weight:900;"><?php echo implode( ',', $output ); ?></div>
        <?php
    }

    You’ll need to update $taxonomy with the name of the taxonomy you’re using.

    Hope this helps get you closer 🙂

    Thread Starter daytrader007

    (@daytrader007)

    Tom, thank you for helping me. I have no idea what I am doing wrong.
    This is what I get: http://prntscr.com/cxnlux

    This is my entire functions file:

    
    <?php
    // No direct access, please
    if ( ! defined( 'ABSPATH' ) ) exit;
    
    if ( ! function_exists( 'wpsp_excerpt' ) ) :
    /** 
     * Build our excerpt
     * @since 0.9
     */
    function wpsp_excerpt( $excerpt_length )
    {	
    	// Run our content through wp_trim_words()
    	$content = wp_trim_words( get_the_content(), $excerpt_length, apply_filters( 'wpsp_ellipses', '...' ) );
    	
    	// Strip shortcodes from our content
    	$content = strip_shortcodes( $content );
    	
    	// Strip URLs from our excerpt (oembeds etc..)
    	$content = preg_replace( '~http(s)?://[^\s]*~i', '', $content );
    	
    	// Return our content
    	echo $content;
    }
    endif;
    
    if ( ! function_exists( 'wpsp_meta' ) ) :
    /** 
     * Build our post meta
     * @since 0.1
     */
    function wpsp_meta( $location, $post_meta_style )
    {	
    	global $wpsp_id;
    	
    	if ( ! isset( $wpsp_id ) )
    		return;
    	
    	$author_location     	= sanitize_text_field( wpsp_get_setting( $wpsp_id, 'wpsp_author_location' ) );
    	$date_location       	= sanitize_text_field( wpsp_get_setting( $wpsp_id, 'wpsp_date_location' ) );
    	$include_author 	 	= filter_var( wpsp_get_setting( $wpsp_id, 'wpsp_include_author' ), FILTER_VALIDATE_BOOLEAN );
    	$include_terms 	     	= filter_var( wpsp_get_setting( $wpsp_id, 'wpsp_include_terms' ), FILTER_VALIDATE_BOOLEAN );
    	$include_date 	     	= filter_var( get_post_meta( $wpsp_id, 'wpsp_include_date', true ), FILTER_VALIDATE_BOOLEAN );
    	$terms_location		 	= sanitize_text_field( wpsp_get_setting( $wpsp_id, 'wpsp_terms_location' ) );
    	$taxonomy		 	 	= sanitize_key( wpsp_get_setting( $wpsp_id, 'wpsp_taxonomy' ) );
    	
    	$output = array();
    	if ( ( $include_author && $location == $author_location ) || ( $include_date && $location == $date_location ) || ( $include_terms && $location == $terms_location ) )
    		echo '<div class="wp-show-posts-entry-meta wp-show-posts-entry-meta-' . $location . ' post-meta-' . $post_meta_style . '">';
    	
    	// If our author is enabled, show it
    	if ( $include_author && $location == $author_location ) :
    		$output[] = sprintf( '<span class="wp-show-posts-byline wp-show-posts-meta">%1$s</span>',
    			sprintf( '<span class="wp-show-posts-author vcard" itemtype="http://schema.org/Person" itemscope="itemscope" itemprop="author"><a class="url fn n" href="%1$s" title="%2$s" rel="author" itemprop="url"><span class="author-name" itemprop="name">%3$s</span></a></span>',
    				esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ),
    				esc_attr( sprintf( __( 'View all posts by %s', 'wp-show-posts' ), get_the_author() ) ),
    				esc_html( get_the_author() )
    			)
    		);
    	endif;
    	
    	// Show the date
    	if ( $include_date && $location == $date_location ) :
    		$time_string = '<time class="wp-show-posts-entry-date published" datetime="%1$s" itemprop="datePublished">%2$s</time>';
    		if ( get_the_time( 'U' ) !== get_the_modified_time( 'U' ) )
    			$time_string .= '<time class="wp-show-posts-updated" datetime="%3$s" itemprop="dateModified">%4$s</time>';
    
    		$time_string = sprintf( $time_string,
    			esc_attr( get_the_date( 'c' ) ),
    			esc_html( get_the_date() ),
    			esc_attr( get_the_modified_date( 'c' ) ),
    			esc_html( get_the_modified_date() )
    		);
    		
    		// If our date is enabled, show it
    		$output[] = sprintf( '<span class="wp-show-posts-posted-on wp-show-posts-meta">%1$s</span>',
    			sprintf( '<a href="%1$s" title="%2$s" rel="bookmark">%3$s</a>',
    				esc_url( get_permalink() ),
    				esc_attr( get_the_time() ),
    				$time_string
    			)
    		);
    	endif;
    	
     	// Show the terms
     	if ( $include_terms && $location == $terms_location ) :
    	add_action( 'wpsp_inside_image_container','tu_add_tags_to_image_container' );
    	function tu_add_tags_to_image_container()
    	{
    		$output[] = sprintf( '<span class="wp-show-posts-terms wp-show-posts-meta">%1$s</span>',
     			get_the_term_list( get_the_ID(), $taxonomy, '', ', ' )
     		);
    	}
    	endif;
    	
    	$separator = ( 'inline' == $post_meta_style ) ? ' <span class="wp-show-posts-separator">|</span> ' : '<br />';
    	echo implode( $separator, $output);
    	
    	if ( ( $include_author && $location == $author_location ) || ( $include_date && $location == $date_location ) || ( $include_terms && $location == $terms_location ) )
    		echo '</div>';
    }
    endif;
    
    if ( ! function_exists( 'wpsp_add_post_meta_after_title' ) ) :
    add_action( 'wpsp_after_title','wpsp_add_post_meta_after_title' );
    function wpsp_add_post_meta_after_title()
    {
    	global $wpsp_id;
    	
    	if ( ! isset( $wpsp_id ) )
    		return;
    	
    	$author_location     	= sanitize_text_field( wpsp_get_setting( $wpsp_id, 'wpsp_author_location' ) );
    	$date_location       	= sanitize_text_field( wpsp_get_setting( $wpsp_id, 'wpsp_date_location' ) );
    	$terms_location		 	= sanitize_text_field( wpsp_get_setting( $wpsp_id, 'wpsp_terms_location' ) );
    	$include_author 	 	= filter_var( wpsp_get_setting( $wpsp_id, 'wpsp_include_author' ), FILTER_VALIDATE_BOOLEAN );
    	$include_terms 	     	= filter_var( wpsp_get_setting( $wpsp_id, 'wpsp_include_terms' ), FILTER_VALIDATE_BOOLEAN );
    	$include_date 	     	= filter_var( get_post_meta( $wpsp_id, 'wpsp_include_date', true ), FILTER_VALIDATE_BOOLEAN );
    	$post_meta_top_style 	= sanitize_text_field( wpsp_get_setting( $wpsp_id, 'wpsp_post_meta_top_style' ) );
    	
    	if ( ( $include_author && 'below-title' == $author_location ) || ( $include_date && 'below-title' == $date_location ) || ( $include_terms && 'below-title' == $terms_location ) )
    		wpsp_meta( 'below-title', $post_meta_top_style );
    	
    }
    endif;
    
    if ( ! function_exists( 'wpsp_add_post_meta_after_content' ) ) :
    add_action( 'wpsp_after_content','wpsp_add_post_meta_after_content', 10 );
    function wpsp_add_post_meta_after_content()
    {
    	global $wpsp_id;
    	
    	if ( ! isset( $wpsp_id ) )
    		return;
    	
    	$author_location     	= sanitize_text_field( wpsp_get_setting( $wpsp_id, 'wpsp_author_location' ) );
    	$date_location       	= sanitize_text_field( wpsp_get_setting( $wpsp_id, 'wpsp_date_location' ) );
    	$terms_location		 	= sanitize_text_field( wpsp_get_setting( $wpsp_id, 'wpsp_terms_location' ) );
    	$include_author 	 	= filter_var( wpsp_get_setting( $wpsp_id, 'wpsp_include_author' ), FILTER_VALIDATE_BOOLEAN );
    	$include_terms 	     	= filter_var( wpsp_get_setting( $wpsp_id, 'wpsp_include_terms' ), FILTER_VALIDATE_BOOLEAN );
    	$include_date 	     	= filter_var( get_post_meta( $wpsp_id, 'wpsp_include_date', true ), FILTER_VALIDATE_BOOLEAN );
    	$post_meta_bottom_style = sanitize_text_field( wpsp_get_setting( $wpsp_id, 'wpsp_post_meta_bottom_style' ) );
    	
    	if ( ( $include_author && 'below-post' == $author_location ) || ( $include_date && 'below-post' == $date_location ) || ( $include_terms && 'below-post' == $terms_location ) )
    		wpsp_meta( 'below-post', $post_meta_bottom_style );
    }
    endif;
    
    if ( ! function_exists( 'wpsp_post_image' ) ) :
    /** 
     * Build our post image
     * @since 0.1
     */
    function wpsp_post_image()
    {
    	if ( ! has_post_thumbnail() )
    		return;
    	
    	global $wpsp_id;
    	
    	if ( ! isset( $wpsp_id ) )
    		return;
    	
    	$image = sanitize_text_field( get_post_meta( $wpsp_id, 'wpsp_image', true ), FILTER_VALIDATE_BOOLEAN );
    	if ( ! isset( $image ) || ! $image )
    		return;
    	
    	$image_alignment = sanitize_text_field( wpsp_get_setting( $wpsp_id, 'wpsp_image_alignment' ) );
    	$image_height = absint( wpsp_get_setting( $wpsp_id, 'wpsp_image_height' ) );
    	$image_width = absint( wpsp_get_setting( $wpsp_id, 'wpsp_image_width' ) );
    	$image_overlay_color = wpsp_sanitize_hex_color( wpsp_get_setting( $wpsp_id, 'wpsp_image_overlay_color' ) );
    	$image_overlay_icon = sanitize_text_field( wpsp_get_setting( $wpsp_id, 'wpsp_image_overlay_icon' ) );
    	$image_hover_effect = sanitize_text_field( wpsp_get_setting( $wpsp_id, 'wpsp_image_hover_effect' ) );
    	$columns     			= sanitize_text_field( wpsp_get_setting( $wpsp_id, 'wpsp_columns' ) );
    	
    	$image_id = get_post_thumbnail_id( get_the_ID(), 'full' );
    	$image_url = wp_get_attachment_image_src( $image_id, 'full', true );
    	$image_atts = wpsp_image_attributes( $image_url[1], $image_url[2], $image_width, $image_height );
    	$hover = ( '' !== $image_hover_effect ) ? $image_hover_effect : '';
    	?>
    	<div class="wp-show-posts-image <?php echo $hover . ' wpsp-image-' . $image_alignment; ?> ">
    		<?php 
    		do_action( 'wpsp_inside_image_container' );
    		
    		printf( '<a href="%1$s" %2$s title="%3$s">',
    		apply_filters( 'wpsp_image_href', esc_url( get_the_permalink() ) ),
    		apply_filters( 'wpsp_image_data', '' ),
    		apply_filters( 'wpsp_image_title', esc_attr( get_the_title() ) )
    		); ?>
    			<?php if ( ! empty( $image_atts ) ) : ?>
    				<img src="<?php echo WPSP_Resize( $image_url[0], $image_atts[ 'width' ], $image_atts[ 'height' ], $image_atts[ 'crop' ], true, $image_atts[ 'upscale' ] ); ?>" alt="<?php esc_attr( the_title() ); ?>" itemprop="image" class="<?php echo $image_alignment; ?>" />
    			<?php else :
    				the_post_thumbnail( apply_filters( 'wpsp_default_image_size', 'full' ), array( 'itemprop' => 'image' ) );
    			endif;
    			
    			if ( '' !== $image_overlay_color || '' !== $image_overlay_icon ) :
    				$color = ( $image_overlay_color ) ? 'style="background-color:' . wpsp_hex2rgba( $image_overlay_color, apply_filters( 'wpsp_overlay_opacity', 0.7 ) ) . '"' : '';
    				$icon = ( $image_overlay_icon ) ? $image_overlay_icon : 'no-icon';
    				echo '<span class="wp-show-posts-image-overlay ' . $icon . '" ' . $color . '></span>';
    			endif; 
    			?>
        <div style="position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); font-size:80px; font-weight:900;"><?php echo implode( ',', $output ); ?></div>
    		</a>
    	</div>
    	<?php
    }
    endif;
    
    if ( ! function_exists( 'wpsp_add_post_image_before_title' ) ) :
    add_action( 'wpsp_before_header','wpsp_add_post_image_before_title' );
    function wpsp_add_post_image_before_title()
    {
    	global $wpsp_id;
    	
    	if ( ! isset( $wpsp_id ) )
    		return;
    	
    	$image_location = sanitize_text_field( wpsp_get_setting( $wpsp_id, 'wpsp_image_location' ) );
    	
    	if ( 'above-title' == $image_location )
    		wpsp_post_image();
    }
    endif;
    
    if ( ! function_exists( 'wpsp_add_post_image_before_content' ) ) :
    add_action( 'wpsp_before_content','wpsp_add_post_image_before_content' );
    function wpsp_add_post_image_before_content()
    {
    	global $wpsp_id;
    	
    	if ( ! isset( $wpsp_id ) )
    		return;
    	
    	$image_location = sanitize_text_field( wpsp_get_setting( $wpsp_id, 'wpsp_image_location' ) );
    	
    	if ( 'below-title' == $image_location )
    		wpsp_post_image();
    }
    endif;
    
    if ( ! function_exists( 'wpsp_read_more' ) ) :
    add_action( 'wpsp_after_content','wpsp_read_more', 5 );
    function wpsp_read_more()
    {
    	global $wpsp_id;
    	
    	if ( ! isset( $wpsp_id ) )
    		return;
    	
    	$read_more_text = wp_kses_post( wpsp_get_setting( $wpsp_id, 'wpsp_read_more_text' ) );
    	$read_more_style = esc_attr( wpsp_get_setting( $wpsp_id, 'wpsp_read_more_style' ) );
    	$read_more_color = sanitize_text_field( wpsp_get_setting( $wpsp_id, 'wpsp_read_more_color' ) );
    	
    	// The read more button
    	if ( $read_more_text ) : ?>
    		<div class="wpsp-read-more">
    			<a title="<?php echo esc_attr( get_the_title() ); ?>" class="wp-show-posts-read-more <?php echo $read_more_style; ?> <?php echo $read_more_color; ?>" href="<?php esc_url( the_permalink() ); ?>"><?php echo $read_more_text; ?></a>
    		</div>
    	<?php endif;
    }
    endif;
    
    if ( ! function_exists( 'wpsp_hex2rgba' ) ) :
    /** 
     * Convert hex to RGBA
     * @since 0.1
     */
    function wpsp_hex2rgba($color, $opacity = false) {
     
    	$default = 'rgb(0,0,0)';
     
    	// Return default if no color provided
    	if(empty($color))
              return $default; 
     
    	// Sanitize $color if "#" is provided 
    	if ($color[0] == '#' ) {
    		$color = substr( $color, 1 );
    	}
    
    	// Check if color has 6 or 3 characters and get values
    	if (strlen($color) == 6) {
    			$hex = array( $color[0] . $color[1], $color[2] . $color[3], $color[4] . $color[5] );
    	} elseif ( strlen( $color ) == 3 ) {
    			$hex = array( $color[0] . $color[0], $color[1] . $color[1], $color[2] . $color[2] );
    	} else {
    			return $default;
    	}
    
    	// Convert hexadec to rgb
    	$rgb =  array_map('hexdec', $hex);
    
    	// Check if opacity is set(rgba or rgb)
    	if($opacity){
    		if(abs($opacity) > 1)
    			$opacity = 1.0;
    		$output = 'rgba('.implode(",",$rgb).','.$opacity.')';
    	} else {
    		$output = 'rgb('.implode(",",$rgb).')';
    	}
    
    	// Return rgb(a) color string
    	return $output;
    }
    endif;
    
    if ( ! function_exists( 'wpsp_sanitize_hex_color' ) ) :
    function wpsp_sanitize_hex_color( $color ) {
        if ( '' === $color )
            return '';
     
        // 3 or 6 hex digits, or the empty string.
        if ( preg_match('|^#([A-Fa-f0-9]{3}){1,2}$|', $color ) )
            return $color;
    }
    endif;
    
    if ( ! function_exists( 'wpsp_image_attributes' ) ) :
    /** 
     * Build our image attributes
     * @since 0.1
     */
    function wpsp_image_attributes( $og_width = '', $og_height = '', $new_width = '', $new_height = '' )
    {
    	$ignore_crop = array( '', '0', '9999' );
    	
    	$image_atts = array();
    	
    	$image_atts = array(
    		'width' => ( in_array( $new_width, $ignore_crop ) ) ? 9999 : intval( $new_width ),
    		'height' => ( in_array( $new_height, $ignore_crop ) ) ? 9999 : intval( $new_height ),
    		'crop' => ( in_array( $new_width, $ignore_crop ) || in_array( $new_height, $ignore_crop ) ) ? false : true
    	);
    	
    	// If there's no height or width, empty the array
    	if ( 9999 == $image_atts[ 'width' ] && 9999 == $image_atts[ 'height' ] )
    		$image_atts = array();
    	
    	if ( ! empty( $image_atts ) ) :
    		// Is our width larger than the OG image and not proportional?
    		$width_upscale = $image_atts[ 'width' ] > $og_width && $image_atts[ 'width' ] < 9999 ? true : false;
    		
    		// Is our height larger than the OG image and not proportional?
    		$height_upscale = $image_atts[ 'height' ] > $og_height && $image_atts[ 'height' ] < 9999 ? true : false;
    		
    		// If both the height and width are larger than the OG image, upscale
    		$image_atts[ 'upscale' ] = $width_upscale && $height_upscale ? true : false;
    		
    		// If the width is larger than the OG image and the height isn't proportional, upscale
    		$image_atts[ 'upscale' ] = $width_upscale && $image_atts[ 'height' ] < 9999 ? true : $image_atts[ 'upscale' ];
    
    		// If the height is larger than the OG image and width isn't proportional, upscale
    		$image_atts[ 'upscale' ] = $height_upscale && $image_atts[ 'width' ] < 9999 ? true : $image_atts[ 'upscale' ];
    		
    		// If we're upscaling, set crop to true
    		$image_atts[ 'crop' ] = $image_atts[ 'upscale' ] ? true : $image_atts[ 'crop' ];
    		
    		// If one of our sizes is upscaling but the other is proportional, show the full image
    		if ( $width_upscale && $image_atts[ 'height' ] == 9999 || $height_upscale && $image_atts[ 'width' ] == 9999 )
    			$image_atts = array();
    	endif;
    	
    	return apply_filters( 'generate_blog_image_attributes', $image_atts );
    }
    endif;
    
    if ( ! function_exists( 'wpsp_pagination' ) ) :
    /** 
     * Build our regular pagination
     * @since 0.1
     */
    function wpsp_pagination( $max_num_pages ) {
    	// Don't print empty markup if there's only one page.
    	if ( $max_num_pages < 2 ) {
    		return;
    	}
    	
    	$paged_query = is_front_page() ? 'page' : 'paged';
    	$paged        = get_query_var( $paged_query ) ? intval( get_query_var( $paged_query ) ) : 1;
    	$pagenum_link = html_entity_decode( get_pagenum_link() );
    	$query_args   = array();
    	$url_parts    = explode( '?', $pagenum_link );
    
    	if ( isset( $url_parts[1] ) ) {
    		wp_parse_str( $url_parts[1], $query_args );
    	}
    
    	$pagenum_link = remove_query_arg( array_keys( $query_args ), $pagenum_link );
    	$pagenum_link = trailingslashit( $pagenum_link ) . '%_%';
    
    	$format  = $GLOBALS['wp_rewrite']->using_index_permalinks() && ! strpos( $pagenum_link, 'index.php' ) ? 'index.php/' : '';
    	$format .= $GLOBALS['wp_rewrite']->using_permalinks() ? user_trailingslashit( 'page/%#%', 'paged' ) : '?paged=%#%';
    
    	// Set up paginated links.
    	$links = paginate_links( array(
    		'base'     => $pagenum_link,
    		'format'   => $format,
    		'total'    => $max_num_pages,
    		'current'  => $paged,
    		'mid_size' => apply_filters( 'wpsp_pagination_mid_size', 1 ),
    		'add_args' => array_map( 'urlencode', $query_args ),
    		'prev_text' => __( '&larr; Previous', 'wp-show-posts' ),
    		'next_text' => __( 'Next &rarr;', 'wp-show-posts' ),
    	) );
    
    	if ( $links ) :
    
    		echo $links; 
    
    	endif;
    }
    endif;
    

    Please help

    Plugin Author Tom

    (@edge22)

    You would add the function I gave you using a plugin like this: https://en-ca.wordpress.org/plugins/code-snippets/

    Then replace $taxonomy with the name of the taxonomy you’re targeting.

    That should do it 🙂

    Thread Starter daytrader007

    (@daytrader007)

    Installed and activated the above plugin, created new snippet using code you gave with replaced $taxonomy -> $post_tag, then saved new functions.php from GitHub. It doesn’t work. I have no idea what I am doing wrong. This new <div> is not even showing on frontend. I am dead 🙁

    Plugin Author Tom

    (@edge22)

    $taxonomy should be replaced with post_tag (no dollar sign).

    Let me know if that fixes it 🙂

    Thread Starter daytrader007

    (@daytrader007)

    Nope it didn’t fix it 🙁

    Thread Starter daytrader007

    (@daytrader007)

    I am not sure how snippet works in this case, but I don’t see how my new <div> knows where to be placed. I tested it in few places, but it must be right before closing tag as I show here http://prnt.sc/cxly95

    <div style="position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); font-size:80px; font-weight:900;"><?php echo implode( ',', post_tag ); ?></div>

    Seems like the only way of doing this is hard code it in functions.php
    However I understand, I’d have to fix it everytime I update your magic plugin.
    Unless you are willing to add this feature in the plugin itself.

    Thread Starter daytrader007

    (@daytrader007)

    On the other hand this new functionality <?php echo implode( ‘,’, post_tag ); ?> or same but with the dollar sign does not work. It does not bring tag’s value anywhere on the page. This is the main issue

    Plugin Author Tom

    (@edge22)

    Tested and working:

    add_action( 'wpsp_inside_image_container','tu_add_tags_to_image_container' );
    function tu_add_tags_to_image_container()
    {
    	$output = array();
    	$output[] = sprintf( '<span class="wp-show-posts-terms wp-show-posts-meta">%1$s</span>',
    		get_the_term_list( get_the_ID(), 'post_tag', '', ', ' )
    	);
    	
    	if ( empty( $output ) )
    		return;
    	?>
    	<div style="position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); font-size:80px; font-weight:900;"><?php echo implode( ',', $output ); ?></div>
    	<?php
    }

    Make sure your posts have tags attached to them 🙂

    • This reply was modified 5 years, 7 months ago by Tom.
    Thread Starter daytrader007

    (@daytrader007)

    Now it works like a charm! 🙂
    All I have to do is add some magic to CSS

    Thank you so much Tom!

    Plugin Author Tom

    (@edge22)

    You’re welcome 🙂

    Thread Starter daytrader007

    (@daytrader007)

    Hey Tom, I am having little dilemma here.

    First of all I want to thank you again for your awesome plugin. I was able to achieve exactly what I wanted this is how it looks http://prnt.sc/d33px9

    Now about dilemma. We have videos that feature 10 stock symbols (tickers), so that’s 10 tags on that post (1 tag for every ticker featured) and of course they all show up on the top of the image. This is what it looks like http://prnt.sc/d33quu

    WP Show Posts -> Meta -> Include terms -> Unchecked
    That doesn’t work, as we are getting the tag anyway by using new code in Snippet

    Any idea how to turn tags off for some posts please?
    Maybe new snippet?

    Also I found a little bug, I’ll post it as a new topic.

    Thanks in advance Tom!

    Plugin Author Tom

    (@edge22)

    Hmm, so maybe the code should make it so only one tag is displayed? Would that work?

    Thread Starter daytrader007

    (@daytrader007)

    Not really.
    Ideally if WP Show Posts -> Meta -> Include terms -> Unchecked
    then don’t show she tag at all. Probably most logical as well.

Viewing 15 replies - 1 through 15 (of 17 total)
  • The topic ‘Placing “post_tag” on the top of image’ is closed to new replies.