Support

Account

Register Login

Forum Replies Created

  • Yes, in my first piece of code I was wrapping the output svg with <svg> tags, but I’ve since changed it because I’m utilizing the svg plugin with ACF image fields, which outputs correctly. That’s why I said disregard the <img> tags. Even if I take these <img> tags out the acf field still appends outside of the <div> wrappers.

    In the screenshot what your seeing is the hardcoded svg output between the div wrappers and the acf text field svg gets bumped outside of those. The <span> tag is wrapping the text of the <a> tag.

    screenshot output with graphic callouts

  • Nothing shows when changing the conditional, since the menu-item must have children in-order to append the icons. And when I add sub-items to the menu to meet the conditional it does the same thing as before.

  • I think I misunderstood what you were asking before, hope this is what your looking for.

    ACF output:
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 150"><path style="fill:#fff" d="M3.305 49.574v79.388h143.916V49.708L75.382 80.745 3.305 49.574z"></path><path style="fill:#fff" d="M3.305 21.777v13.846l72.077 31.172 71.839-31.068v-13.95H3.305z"></path></svg>

    Hardcoded output:
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 150"><path style="fill:#fff" d="M3.305 49.574v79.388h143.916V49.708L75.382 80.745 3.305 49.574z"></path><path style="fill:#fff" d="M3.305 21.777v13.846l72.077 31.172 71.839-31.068v-13.95H3.305z"></path></svg>

    Look identical to me.

    Below is a screenshot of the actual output. The top <svg> tag is the acf field and the bottom is the hardcode between the <a> tag. Disregard the <img> tag as I’m using the SVG plugin till this is resolved.

    ACF and hardcode output

    Here’s the code:

            $social_icon_static = get_field('social_icon_static', $item);
        //$social_icon_hover = get_field('social_icon_hover', $item);

      if ( $depth == 0 ) {

          $item_output .= '</span><div class="uk-inline-clip uk-transition-toggle uk-animation-toggle social-icon-container" tabindex="0">

            <img class="uk-animation-slide-top uk-animation-reverse social-top" width="16px" height="16px" src="">
            '. get_template_part( 'assets/images/svg/inline', $social_icon_static) .'
            <img class="uk-transition-slide-bottom social-bottom" width="16px" height="16px" src="">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 150"><path style="fill:#fff" d="M3.305 49.574v79.388h143.916V49.708L75.382 80.745 3.305 49.574z"/><path style="fill:#fff" d="M3.305 21.777v13.846l72.077 31.172 71.839-31.068v-13.95H3.305z"/></svg>
  
          </div>';
      }

  • Sorry, I think misunderstood what you were asking before.

    Here’s what the ACF field outputs:
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 150"><path style="fill:#fff" d="M3.305 49.574v79.388h143.916V49.708L75.382 80.745 3.305 49.574z"></path><path style="fill:#fff" d="M3.305 21.777v13.846l72.077 31.172 71.839-31.068v-13.95H3.305z"></path></svg>

    Here’s the hardcode:
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 150"><path style="fill:#fff" d="M3.305 49.574v79.388h143.916V49.708L75.382 80.745 3.305 49.574z"></path><path style="fill:#fff" d="M3.305 21.777v13.846l72.077 31.172 71.839-31.068v-13.95H3.305z"></path></svg>

    Look identical to me.

    Here’s a screenshot of the output. The top <svg> tag is the acf field rendering outside the <a> tag and the bottom is the hardcoded version. Disregard the <img> tag, I decided to use the SVG plugin till we resolve this.

    acf and hardcode output

    Hope this is what you were asking for.

  • this get_field(‘social_icon_static’); on its own outputs nothing, but this get_field('social_icon_static', $item) outputs whatever is in the text field inside the correct tags.

    screenshot of output

    Is that what you’re asking?

    For some reason pulling in the svg renders it outside the tags of where I want it.

  • the difference is that it has to pull the svg data from an external file as opposed to just hard coding the data in the function. At one point when testing I commented out the get_template_part and they were stilling rendering with just the variables, but I haven’t been able to replicate.

  • if I Hardcode it pulls in correctly. Your solution though renders the same result. Not sure why it would push it outside the tags of where I want it. Any other ideas? May have to use the svg plugin, but was hoping that wouldn’t be the case.

Viewing 7 posts - 1 through 7 (of 7 total)