How to load the following sulu snippet in the twig.html file

Question

I have created the following social media snippet with sulu (headless cms) and now I want to use it in my twig.html file. The only problem is that I don't understand which variables I use to get it running. I have tried a variety of different ways but I just don't understand what variables I need to use so that I can link the social media links correctly. Thanks in advance for the help.

I use sulu as headless cms, and symfony/twig to render it.

This is the Sulu code I have:

<?xml version="1.0" ?>
<template xmlns="http://schemas.sulu.io/template/template"
      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:schemaLocation="http://schemas.sulu.io/template/template http://schemas.sulu.io/template/template-1.0.xsd">

<key>socialmedia</key>

<meta>
    <title lang="en">Social Media</title>
    <title lang="de">Social Media</title>
</meta>

<properties>
    <property name="title" type="text_line" mandatory="true">
        <meta>
            <title lang="en">Title</title>
            <title lang="de">Titel</title>
        </meta>
        <tag name="sulu.node.name"/>
    </property>

    <property name="facebookImage" colspan="3" type="single_media_selection">
        <meta>
            <title lang="en">Facebook Icon</title>
            <title lang="de">Facebook Icon</title>
        </meta>
    </property>

    <property name="facebookLink" colspan="9" type="url">
        <meta>
            <title lang="en">Facebook Link</title>
            <title lang="de">Facebook Link</title>
        </meta>
        <params>
            <param name="schemes" type="collection">
                <param name="http://"/>
                <param name="https://"/>
            </param>
        </params>
    </property>

    <property name="instagramImage" colspan="3" type="single_media_selection">
        <meta>
            <title lang="en">Instagram Icon</title>
            <title lang="de">Instagram Icon</title>
        </meta>
    </property>

    <property name="instagramLink" colspan="9" type="url">
        <meta>
            <title lang="en">Instagram Link</title>
            <title lang="de">Instagram Link</title>
        </meta>
        <params>
            <param name="schemes" type="collection">
                <param name="http://"/>
                <param name="https://"/>
            </param>
        </params>
    </property>

    <property name="googleImage" colspan="3" type="single_media_selection">
        <meta>
            <title lang="en">Google Icon</title>
            <title lang="de">Google Icon</title>
        </meta>
    </property>

    <property name="googleLink" colspan="9" type="url">
        <meta>
            <title lang="en">Google Link</title>
            <title lang="de">Google Link</title>
        </meta>
        <params>
            <param name="schemes" type="collection">
                <param name="http://"/>
                <param name="https://"/>
            </param>
        </params>
    </property>
</properties>

@DarkBee It is an existing Project and there are already other files + also snippets. I don't really understand your comment but I think it already gets parsed. What would be the correct way to call the facebookLink in Twig if it gets parsed correctly? — Bifrost, Oct 20 '22 at 13:16
read the content of xml file and you can use "simplexml_load_string" to return it as an object and then pass it ot twig https://www.php.net/manual/en/function.simplexml-load-string.php — hous, Oct 20 '22 at 13:26
@hous - Nope, thats what I thought, but Sulu actually uses XML files to pass variables to the template — DarkBee, Oct 20 '22 at 13:32

Alexander Schranz · Answer 1 · 2022-10-21T14:07:50.120

1

So you can create in your page a snippet_selection or single_snippet_selection to embed a snippet into your page.

If you want to create a snippet which is "global". You can create a snippet area / default snippet.

This means you add a area to your snippet:

<areas>
    <area key="settings">
        <meta>
            <title lang="en">Settings</title>
        </meta>
    </area>
</areas>

Then you go into the Sulu Admin and create a new snippet. After that you go to your Webspace and select unter "Default Snippets" under the point "Settings" the new snippet.

In your twig you can then load that snippet via the sulu_snippet_load_by_area.html twig function:

{% set snippet = sulu_snippet_load_by_area('settings') %}

{% if snippet %} {# if null content manager did not choice a default snippet in "Default Snippets" Tabs on Webspace #}
   {{ dump(snippet) }} {# dump all properties #}
{% endif %}

PS: Try not to create a default/global snippet for every little things. Mostly it is for the "Content Manager" more usable to create 1 "Settings" snippet. Which you have a Section "Social Links" in it instead of having different default snippets.

edited Oct 21 '22 at 14:07

answered Oct 20 '22 at 13:56

Alexander Schranz

2,154
2
25
42

How would OP access the different URL's defined inside the XML/snippet? (Just curious) – DarkBee Oct 20 '22 at 13:58
already tried that and implement in twig with `` but it doesn't work – Bifrost Oct 20 '22 at 14:07
There shows up a `Impossible to access an attribute ("content") on a null variable.` Error and when I put an If Statement `{% if social_media.content is defined %}` there is nothing shown on the website – Bifrost Oct 20 '22 at 14:19
Sounds more like you did not yet select a snippet in the Sulu Admin if you get "null" on it. So Important you need to go to Your Webpace -> Default Snippets -> Your Area Name and Select a Snippet. Else you will get NULL and you don't have a snippet loaded. You can always use {{ dump(yourvariable) }} to check the value of the loaded snippet. – Alexander Schranz Oct 21 '22 at 10:59

How to load the following sulu snippet in the twig.html file

1 Answers1