- This topic has 4 replies, 2 voices, and was last updated 3 years, 3 months ago by
[email protected].
-
AuthorPosts
-
May 25, 2021 at 10:37 PM #28421
[email protected]
ParticipantHey 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 #28427Long Nguyen
ModeratorHi,
It is possible that the SVG image does not have thumbnails. You can try to use the key
full_urlorurl. 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 #28434ParticipantHello 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 #28467ModeratorHi,
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 #28470ParticipantHey 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
-
AuthorPosts
- You must be logged in to reply to this topic.