Question: How to render svg's in a template?

[MPE2016]

L.S.,

I am looking for a way to implement the use of svg's as an individual element of a model, and not as a streamfield. Is there a a way to do that, or does wagtailsvg only work for streamfields?

To clarify further; when I add an image to a wagtail template I do it like so: {% image self.header_background_image scale-100 as header_background_img %} <div class="landing section-landing" style="background-image: url({{ header_background_img.url }});">

The problem is that when I use this approach I get the error: image tag expected an Image object, got <Svg: Logo>

So my question is basically, what to put in place of the image tag in order to render an svg?

All the best,

MPE

[Aleksi44]

Hi @MPE2016,

wagtailsvg work also with a regular django ForeignKey + Svg model :

from wagtailsvg.models import Svg
from wagtailsvg.blocks import SvgChooserBlock
from wagtailsvg.edit_handlers import SvgChooserPanel

class TestPage(Page):
    logo = models.ForeignKey(
        Svg,
        related_name='+',
        null=True,
        blank=True,
        on_delete=models.SET_NULL
    )

    content_panels = Page.content_panels + [
        SvgChooserPanel('logo'),
    ]

This should work for your example :

<div class="landing section-landing" style="background-image: url({{ self.header_background_img.file.url }});">

I am currently developing several collections of Svg available here. If you want to use them, here is the documentation for Wagtail.

[Aleksi44]

And remove this line :

{% image self.header_background_image scale-100 as header_background_img %}

{% image %} expect a wagtail image and not a Svg object.

[MPE2016]

Yeah, you can kind of tell that this is all a bit new to me right:)

Op maandag 8 maart 2021 om 9u08 schreef Alexis Le Baron notifications@github.com:

And remove this line :

{% image self.header_background_image scale-100 as header_background_img %} {% image %} expect a wagtail image and not a Svg object.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/Aleksi44/wagtailsvg/issues/4#issuecomment-792908178, or unsubscribe https://github.com/notifications/unsubscribe-auth/ADYWBBGQZZSDBJFVBKDBSLDTCUABVANCNFSM4YZV7KGA.

[MPE2016]

Excellent, this is working perfectly, thanks a million, problem solved!!

Op maandag 8 maart 2021 om 9u06 schreef Alexis Le Baron notifications@github.com:

Hi @MPE2016 https://github.com/MPE2016,

wagtailsvg work also with a regular django ForeignKey + Svg model :

from wagtailsvg.models import Svg from wagtailsvg.blocks import SvgChooserBlock from wagtailsvg.edit_handlers import SvgChooserPanel

class TestPage(Page): logo = models.ForeignKey( Svg, related_name='+', null=True, blank=True, on_delete=models.SET_NULL )

content_panels = Page.content_panels + [
    SvgChooserPanel('logo'),
]

This should work for your example :

I am currently developing several collections of Svg available here https://www.snoweb-svg.com/en/. If you want to use them, here is the documentation for Wagtail https://snoweb-svg.readthedocs.io/en/latest/getting-started/wagtail.html.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/Aleksi44/wagtailsvg/issues/4#issuecomment-792906298, or unsubscribe https://github.com/notifications/unsubscribe-auth/ADYWBBE4AJQRQBPKIJ6HD33TCT7YJANCNFSM4YZV7KGA.