Placing “post_tag” on the top of image
-
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?
-
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 8 years, 1 month ago by daytrader007.
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 🙂
Tom, thank you for helping me. I have no idea what I am doing wrong.
This is what I get: http://prntscr.com/cxnluxThis 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' => __( '← Previous', 'wp-show-posts' ), 'next_text' => __( 'Next →', 'wp-show-posts' ), ) ); if ( $links ) : echo $links; endif; } endif;
Please help
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 🙂
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 🙁
$taxonomy
should be replaced withpost_tag
(no dollar sign).Let me know if that fixes it 🙂
Nope it didn’t fix it 🙁
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.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
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 8 years, 1 month ago by Tom.
Now it works like a charm! 🙂
All I have to do is add some magic to CSSThank you so much Tom!
You’re welcome 🙂
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 SnippetAny 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!
Hmm, so maybe the code should make it so only one tag is displayed? Would that work?
Not really.
Ideally if WP Show Posts -> Meta -> Include terms -> Unchecked
then don’t show she tag at all. Probably most logical as well.
- The topic ‘Placing “post_tag” on the top of image’ is closed to new replies.