Meta Box

SVG with Image Advanced Custom Field

Support › General › SVG with Image Advanced Custom FieldResolved

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • May 25, 2021 at 10:37 PM #28421
    zenjukai@gmail.com[email protected]
    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

    May 26, 2021 at 10:59 AM #28427
    Long NguyenLong 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 }}">
    May 26, 2021 at 7:15 PM #28434
    zenjukai@gmail.com[email protected]
    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

    May 27, 2021 at 9:00 PM #28467
    Long NguyenLong 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.

    May 27, 2021 at 9:18 PM #28470
    zenjukai@gmail.com[email protected]
    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

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.