Display custom taxonomy part as "label on image" @home

  • Nagytalp

    (@nagytalp)


    10 years, 4 months ago

    Hi!

    I have this code:

    < ?php
$p_terms = get_the_terms( $post->ID , 'tagportfolio' );
print_r($p_terms);
if ( $p_terms && ! is_wp_error( $p_terms ) ) {
$term_links = array();
foreach ( $p_terms as $p_term ) {
$term_links[] = $p_term->name;
}
$termslinks = join( ", ", $term_links );
echo '
'.$termslinks.'

';
}
?>

    I wanna show the name of the custom taxonomy on the featured image on my home page as a clickable label. This code is works and the solution is inside of the but I don’t know where.

    At this moment the result look like this:

    Array ( [6] => stdClass Object ( [term_id] => 6 [name] => Allegro [slug] => allegro [term_group] => 0 [term_taxonomy_id] => 45 [taxonomy] => tagportfolio [description] => Zene-bona [parent] => 0 [count] => 5 [object_id] => 1342 [filter] => raw ) ) Allegro

    What I need is the last word! In this case the “Allegro”.

    And if can anybody tell me the perfect code for the solution then how can I style this label?

    Another problem is in this case: When mouse over on this “result” the whole picture flashes extremly fast.

    My site is here: http://www.irodalmibableves.hu

    Thank You!

Viewing 10 replies - 1 through 10 (of 10 total)
  • Moderator bcworkz

    (@bcworkz)

    10 years, 4 months ago

    Just remove the print_r($p_terms); line.

    To style the label, wrap the output with a span element with a unique class attribute so you can use CSS for styling, like so:
    echo "<span class='imagelabel'>$termslinks</span>";

    Thread Starter Nagytalp

    (@nagytalp)

    10 years, 4 months ago

    That is really cool! Thank You!

    Only the extremely fast flash problem left. But have no idea, why it flashes when the mouse is on the label?

    Moderator bcworkz

    (@bcworkz)

    10 years, 4 months ago

    It appears you found the solution to the flashing? I don’t see it anymore. It appeared to be some script running repeatedly instead of once. Am I close? (Sorry, I neglected to mention that in my last post)

    Thread Starter Nagytalp

    (@nagytalp)

    10 years, 4 months ago

    Not flashes when the mouse is on the label. But flashes when You moves to right a little bit.

    And the another one story:
    How can I make hyperlinked the label? I mean if anybody clicks on the label it drops the user to the taxonomy page. For this enough to add some lines to the css under the .imagelabel?

    Moderator bcworkz

    (@bcworkz)

    10 years, 4 months ago

    OK I see now, I wasn’t hovering there before. There is a script that changes the image alpha on mouse in, the restores it on mouse out. For some reason the scripts are running constantly back to back when the mouse is in that area, resulting in the flashing effect. It may be the script is being triggered from two elements at the same time or something. I don’t really know, sorry. It has to do with the alpha script though.

    You cannot make links from CSS. You could alter the template (probably content.php) so the link for the image includes the label. Or you can alter the echo line to have a separate link to the same place as the image. Assuming the link can come from the_permalink() this echo line would work:
    echo "<span class='imagelabel'><a href='" . the_permalink() . "'>$termslinks</a></span>";

    Thread Starter Nagytalp

    (@nagytalp)

    10 years, 4 months ago

    Thank You!

    After some modifications the code looks like this:

    <?php
	$p_terms = get_the_terms( $post->ID , 'tagportfolio' );
	if ( $p_terms && ! is_wp_error( $p_terms ) ) {
	$term_links = array();
	foreach ( $p_terms as $p_term ) {
	$term_links[] = $p_term->name;
	}
	$termslinks = join( ", ", $term_links );
	echo "<span class='imagelabel'><a href='" . "'>$termslinks</a></span>";
	}
    ?>

    I cleared the ‘the_permalink’ because it shows the full link. Now I see label and I can click on it but all links linked to home page. Have You any tip to how can change it to right directions?

    And now the labels displayed on the sub-pages too. But I need it only on the home page.

    Moderator bcworkz

    (@bcworkz)

    10 years, 3 months ago

    Oops, my bad. You need something in place after href=. Use get_permalink() in place of the_permalink(). (The Codex reference page shows the_permalink() used as a href value, which is really an invalid use and confused me, the page needs work 🙁 )

    To only apply to home page, add && is_home() to the if conditions list: if ( $p_terms && ! is_wp_error( $p_terms ) && is_home() ) {

    Thread Starter Nagytalp

    (@nagytalp)

    10 years, 2 months ago

    Hello,

    sorry for my late and Happy New Year!

    1., So, the labels worked great until this day.
    2., The is_home not works because if I use it than the labels not showing up on home page. (I have no idea why?)
    3., The hovering flash is present but basically in Firefox

    Back to the 1st point:

    I tried to change my social sharing buttons plugin to another one but now I have the following error message:

    Warning: Missing argument 1 for get_page_uri(), called in /home/irodalm2/public_html/wp-content/themes/Ikebana/content.php on line 70 and defined in /home/irodalm2/public_html/wp-includes/post.php on line 3639

    If I switch back to the old plugin the error is not present.

    Have any idea how to fix it?

    Moderator bcworkz

    (@bcworkz)

    10 years, 2 months ago

    The fix would involve determining how the plugin is causing the parameter in your theme’s template to go missing. Sometimes one can find it on code inspection, other times it requires time consuming debugging stepping through each line of code and checking the status of the variable each time. This is particularly difficult if the code is not open source because the error cannot be easily replicated in a test environment.

    About is_home(). Sometimes the various is_*() template tags do not always return results that are intuitive. In order to find the right values to test for labels to show on one page but not others, one needs to compare the $wp_query dumps for each page and identify what is unique about the query related to where the labels should appear. Only then can one write a reliable if() condition, or at least know that it’s just not possible.

    Thread Starter Nagytalp

    (@nagytalp)

    9 years, 11 months ago

    Hello,

    Finally it solved!

    In content.php

    <div id="imagelabel">
        <h6><?php
        $p_terms = get_the_terms($post->ID, 'tagportfolio');
        if ($p_terms && !is_wp_error($p_terms) ) {
            $term_links = array();
            foreach ($p_terms as $p_term) {
                $term_links[] = $p_term->name;
            }
            $termslinks = join(", ", $term_links);
            echo "<span class='imagelabel'><a href='" . "'>$termslinks</a></span>";
        }
?><h6>

    In style css:

    #imagelabel h6 {
position: absolute;
left: 1px;
top: 0px;
z-index: 1;
padding: 0px;
margin: 0px;
background-color: #FF8C00;
background-position: 50% 50%;
line-height: 1.5em;
width: auto;
}

    Basically the is_home and is_front_page conditional tags not worked so well in my case. I have an inner-image-placeholder section in my theme’s php code. So I use the imagelabel inside the inner-image-placeholder with the # CSS selector. Next time I wanna override the H6 font type in the imagelabel.

    Thank You for the help!

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Display custom taxonomy part as "label on image" @home’ is closed to new replies.