Custom Fields
Re-Envisioned
Support General SVG with Image Advanced Custom Field

  • Creator
    Topic
  • #28421
    Resolved zenjukai@gmail.com
    Participant

    Hey folks,

    I am trying, but to no success -- I have uploaded an SVG into my media library; then I create a custom field (Image Advanced); then within "Views" I try to add that custom field (Output: Image tag) but nothing shows on the front end.

    {% for item in post.icon %}
        <img src="{{ item.thumbnail.url }}" width="{{ item.thumbnail.width }}" height="{{ item.thumbnail.height }}" alt="{{ item.thumbnail.alt }}">
    {% endfor %}

    Any thoughts?

    Cheers

Viewing 4 replies - 1 through 4 (of 4 total)
  • Author
    Replies
  • #28427
    Long Nguyen
    Moderator

    Hi,

    It is possible that the SVG image does not have thumbnails. You can try to use the key full_url or url. Get more details on the documentation https://docs.metabox.io/fields/image-advanced/#template-usage

    <img src="{{ item.full_url }}" alt="{{ item.alt }}">
    <img src="{{ item.url }}" alt="{{ item.alt }}">
    
    #28434
    zenjukai@gmail.com
    Participant

    Hello Long,

    Thank you, I did try that already. What I am seeing happening is, the SVG is 120x120, but when it outputs that file it is given the height and width of "0" -- therefore you cannot see the SVG.

    Here is a video showing what happens: https://youtu.be/t2CYNcb5lto

    Also, I tried this after the video and it works. I can do that, but I am wondering why the code snippet is not outputting or at least an option to apply a custom width/height.

    Original Twig snippet

    {% for item in post.icon %}
    <img src="{{ item.full.url }}" width="{{ item.full.width }}" height="{{ item.full.height }}" alt="{{ item.full.alt }}">
    {% endfor %}

    Work Around snippet

    {% for item in post.icon %}
    <img src="{{ item.full.url }}" width="42" height="42" alt="{{ item.full.alt }}">
    {% endfor %}

    Any thoughts?

    Cheers

    #28467
    Long Nguyen
    Moderator

    Hi,

    WordPress does not support uploading the SVG image by default, the image uploaded also does not have the thumbnails like other default formats JPG or PNG, it works just like the file. So you need to add fixed width and height to show the SVG image on the frontend.

    #28470
    zenjukai@gmail.com
    Participant

    Hey Long,

    Thank you ... yes, I also came to that conclusion this morning after doing some Googling. I did find that the solution above that I mentioned is the best option in this case.

    {% for item in post.icon %}
    <img src="{{ item.full.url }}" width="42" height="42" alt="{{ item.full.alt }}">
    {% endfor %}

    Thanks again for your time.

    Cheers

Viewing 4 replies - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.