Converting embedded images to img

Question

I'm working backend with a wagtail headless CMS and the frontend is JavaScript. I'm using a RichTextField and on the API it shows the image like this: "<embed alt="a" embedtype="image" format="fullwidth" id="3"/>" so because its embedtype it can't be shown on our page. I need to change the type to img with a src. I haven't tried anything because i don't even know how to start. This is the model with the RichTextField

class ValueTagMotivation(Orderable, ClusterableModel):
"""Teams motivate why a tag was picked"""

team = ParentalKey(
    TeamPage, on_delete=models.CASCADE, related_name="value_tag_motivations"
)
value_tag = models.ForeignKey(ValueTag, on_delete=models.CASCADE, related_name="+")

tagline = models.CharField(max_length=255)
motivation = RichTextField(
    features=["bold", "italic", "ol", "ul", "link", "image", "embed"]
)

panels = [FieldPanel("value_tag"), FieldPanel("tagline"), FieldPanel("motivation")]

class Meta:
    # a team can only pick each tag once
    unique_together = (("team", "value_tag"),)

Alen Alen · Accepted Answer · 2020-08-18T16:04:17

I managed to figure it out. I put

class APIRichTextSerializer(fields.CharField):
def to_representation(self, instance):
    representation = super().to_representation(instance)
    return expand_db_html(representation)

in my serializers.py and just called it in my main serializer

class ValueTagMotivationsSerializer(serializers.ModelSerializer):
motivation = APIRichTextSerializer()

class Meta:
    model = ValueTagMotivation
    fields = ['value_tag', 'tagline', 'motivation']

and now I get "<img alt="a" class="richtext-image full-width" height="280" src="/media/images/bright-spring-view-cameo-island-260nw-10481853.width-800.png" width="475">"

Converting embedded images to img

1 Answers