display particular image associated with tag - php

I'm new with wordpress and I tried to look for an answer but everything I found and tried didn't work. So let's start from the beginning I added this code to functions.php in my child theme:
function wptp_add_tags_to_attachments() {
register_taxonomy_for_object_type( 'post_tag', 'attachment' );
}
add_action( 'init' , 'wptp_add_tags_to_attachments' );
Now I can add tags to images in admin section.
The problem is that I want to display those images on post and category page next to the tags assigned to the post at the bottom where they appear in default. I added the category to the main navigation so after I click on it a page with all the post excerpts in the category are displayed. And at the bottom are shown tags associated with given post.
An example cause I'm not sure I explained it so that it's easy to understand.
I have 3 posts: project1, project2 and project3 which are in category Projects. Every one of those three projects has assigned one or more of these tags: company1, company2, company3. For every company tag there is an image with the same company tag assigned to an image (logo of the company). And I want to display not only the tag name but also the image associated with the tag.
Is there some way to do this?
Thanks in advance.

I used this code snippet which I found here:
<?php
$posttags = get_the_tags();
if ($posttags) {
foreach($posttags as $tag) {
echo '<img src="http://example.com/images/' . $tag->term_id . '.jpg"
alt="' . $tag->name . '" />';
}
}
?>
So the final product is this:
<?php
$posttags = get_the_tags();
$templPath = get_stylesheet_directory_uri() .'/images/';
if ($posttags) {
foreach($posttags as $tag) {
$html = '<div class="projectLinkWrap">';
$html .= '<a href="'. get_the_permalink() .'#projectpartner"/>';
$html .= '<div class="thumbLogoWrapper">';
$html .= '<img src="'.$templPath . $tag->name.'.png"
alt="' . $tag->name . '" /></div>';
$html .= '<span class="tagName">'. $tag->name .'</span></a></div>';
echo $html;
}
}
?>
Hope it helps someone one day.

Related

Display advanced custom field (ACF) value from custom post type taxonomy - wordpress

In Wordpress I created a custom post type called "Sports" with a taxonomy called "sport_locations". Using the advanced custom field (ACF) plugin I created fields to show on taxonomy terms. I got everything to work, however I'm having trouble outputting the image I uploaded.
In ACF I have the option for the return value of the image to be: an object, url, or ID. Right now I have it set to object.
Below is the code I have so far. I'm writing this code inside of the single-sports.php . I created a foreach loop and only spitting out the terms associated to that specific sport.
When I do the var_dump I keep getting bool(false). Sorry for the extra commenting out in the code I was trying a bunch of different things and figured I'd leave it in my code as reference
post type = sports
taxonomy = sport_location
acf field = location_image (return value = object)
<?php
$terms = get_the_terms( $post->ID , 'sport_locations' );
//$LocImg = $wp_query->queried_object;
// echo '<pre>';
// echo var_dump($LocImg);
// echo '</pre>';
foreach ( $terms as $term ) {
$term_thumb = get_field('location_image', 'sport_locations'.$term->term_id);
echo '<pre>';
echo var_dump($term_thumb);
echo '</pre>';
echo '<div class="sport-single">';
echo'<img src="' .$term_thumb['url']. '" class="img-responsive">';
//echo '<img src="' .$locationImage[0]. '" class="placeholder" />';
//echo '<img src="' .get_src_picture(get_field("location_image", "sport_locations".$LocImg->term_id), "category"). '" class="img-responsive" />';
//echo '<img src="' .get_field( "location_image", $LocImg->taxonomy . "_" . $LocImg->term_id ). '" />';
echo '<p>'.$term->name .'</p>';
echo '</div>';
}
?>
There is supposed to be an underscore between the term name and the ID. So...
$term_thumb = get_field('location_image', 'sport_locations'.$term->term_id);
...should be...
$term_thumb = get_field('location_image', 'sport_locations_'.$term->term_id);
Alternatively, you can pass the term object...
$term_thumb = get_field('location_image', $term);

How to get all existing tags outside the loop in Wordpress

Here is my situation.
In my home page, I want to have the list of all existing tags and use them as filter for an isotope grid containing posts.
So for each post I already check the associated tags and output them as class name on the post grid-item for filtering.
I have an hard time getting the list of all my existing tags. I think it should be easy stuff to do. What am I missing?
This is an example:
$tags = get_tags();
$html = '<div class="post_tags">';
foreach ( $tags as $tag ) {
$tag_link = get_tag_link( $tag->term_id );
$html .= "<a href='{$tag_link}' title='{$tag->name} Tag' class='{$tag->slug}'>";
$html .= "{$tag->name}</a>";
}
$html .= '</div>';
echo $html;
Example taken from here: https://codex.wordpress.org/Function_Reference/get_tags

Show tags in Wordpress without last separator

<?php $tags = get_the_tags();
if( $tags ) :
echo '<p class="taxonomy"><span class="tag-title">'.__('Tags: ', 'warp').'</span>';
foreach( $tags as $tag ) {
echo '<span class="'. $tag->slug .'">'. $tag->name .'</span>';
}
echo '</p>';
endif; ?>
I want to use this code to show tags on pages. One function I want to use needs get_the_tags() to make it work as I wanted. I got suggested to use implode() to get rid of last separator from tag list. I don't know PHP good enough to implement it into this piece of code. The best result I got was: Tags: tag | | tag | | and so on. I know there are answers to similar questions but none of them worked with this code.
Any ideas how to make it work?
With big help from one user it's finally done. Hiding last separator with this code looks like that:
<?php $tags = get_the_tags();
if( $tags ) :
echo '<p class="taxonomy"><span class="tag-title">'.__('Tags: ', 'warp').'</span>';
foreach( $tags as $tag ) {
$names[] = '<span class="'. $tag->slug .'">'. $tag->name .'</span>';
}
echo implode(' | ', $names ) .'</p>';
endif; ?>

How to get category slug url working in Wordpress?

I'm in designing a WP Theme. I need help!
I'm calling category and it's slug from plugin functions. Here is the code:
$category = get_the_category();
$html .= '<div id="category-post" class="category-main category'. $category[0]->slug .'">';
$html .= $category[0]->cat_name;
$html .= '</div>';
Let's say I have a class name for health category: .category-health
but the above code will returned to: <div id="category-post" class="category-main categoryhealth"></div> and the class: .category-health not working because it returned to unavailable category: .categoryhealth
From above code I feel that the category slug " - " is not working. Because the right class is ".category-health" and not ".categoryhealth"
Is there any way to fix this? Thanks
Maybe it will help some one else with this answer. The right code is:
$category = get_the_category();
$html .= '<div id="category-post" class="category-main category-'. $category[0]->slug .'">';
$html .= $category[0]->cat_name;
$html .= '</div>';
I just add - after category, category-main category–. almost like Nilambar said.

Show background image through php plugin command

I have i guess a bit dirty code. This is a function php with custom wp_nav code.
$output .= $indent . '<div class="categories-wrapper"><li' . z_taxonomy_image($cat->term_id) . $id . $class_names .'>';
So i have plugin that gives images to categories. What i need is that image will apply to the 'li' block and can be seen as a 'background:url(plugin url)' in css if it possible. this one does nothing.
Not sure which should i even use though.
z_taxonomy_image($cat->term_id)
Plugin documentation list - categories image
Rest of the code i think don't that matter. If not , i will add.
EDIT
Found a useful post that i think will solve my problem but i still don't know how to properly use it. How do i inster it in the <li>?
if (function_exists('z_taxonomy_image_url')) $background_url = 'background:url(' . z_taxonomy_image_url() . ')';
echo '<div class="' . $tax_term->slug . '" style="display:none; ' . $background_url . '">';
full help thread stackoverflow
EDIT 2
Figured out myself a proper code
$output .= $indent . '<div class="categories-wrapper"><li style="background: url(' . z_taxonomy_image_url($cat->term_id) . ')"' . $id . $class_names .'>';
it now shows in inspector url of my site instead of picture given by plugin.
EDIT 3
if i add foreach (get_categories() as $cat) it's working, i got the images
foreach (get_categories() as $cat)
$output .= $indent . '<div class="categories-wrapper"><li style="background:url(' . (function_exists('z_taxonomy_image') ? z_taxonomy_image_url($cat->term_id) : '') . ')"' . $id . $class_names .'>';
But it messed up the whole html code, added tons of <li> block and others so it overrides each other. Maybe i should put it somewhere else?
Small edit - code is not working on a index page (it's a block with categories-sidebar), but when you enter any post, it shows you correct picture of category, but also it shows it for EVERY block of categories on a sidebar same picture.
So maybe i ask something imposible and that plugin can't do that.
you need to insert the image in style=""
like this maybe:
'<li style="url('z_taxonomy_image($cat->term_id) ')"' . $id . $class_names .'>';
another solution
Why not use json response and append dom elements? insert each picture to the required element.
In the following example, I am receiving a json array of pictures and inset them to a specific element.
you could retrieve the picture and the picture type for instance and inset to elements by type.
this is my first attempt to help, be gentle.
for your example you could set the css of each li element using .css()
$.ajax({
type: "POST",
data: {text: text, images: images, images_big: images_big},
url: "/ajax/" + $(this).attr('data-post') + "/createPostComment",
dataType: 'json',
error: function () {
$el.remove();
return;
},
success: function (r) {
$el.attr('data-id',r.comment_id);
if(typeof r.pictures != 'undefined'){
for(var i=0; i < r.pictures.length; i++){
el.find('.comment-pictures-container').append('<img src="'+ r.pictures[i] +'" data-big="'+ r.pictures_big[i] +'" />');
}
}
bindCommentGallery($el);
bindCommentMenu($el);
}
});

Categories