Social Media Icons¶
Availability: All contexts
The social-media module is used to render a set of social media icons on the page.
Configuration parameters¶
image¶
imageof a single icon element iniconRepeaterimagerepresents an object with the following properties:widthfloat type, represents the width of the imageheightfloat type, represents the height of the imagefile_namestring type, represents the name of the image fileuploaded_filestring type, represents the name of the uploaded image file
iconTitle¶
string (optional) Text content of a single icon element in iconRepeater.
link¶
string The URL the a single icon element in iconRepeater links to. Accepts absolute (https://...) or relative (/...) URLs.
imageAlt¶
string (optional) A string containing the value of an alt attribute read by the screen readers.
shouldDisplayHeading¶
int if set to 1 module header will be displayed.
title¶
string Text content of a header
headingLevel¶
string Section level of a header describing the size and importance of the element in a given context. You can read more about heading elements here. We provide the following levels for the header:
h2h3h4h5h6
shouldDisplayHeadingUnderline¶
int (optional) If set to 1 the header underline will be displayed
textColor¶
colorPicker Allows you to set the text color of the icon text.
padding¶
int Indicates how much padding (in px) to add around all the icons.
backgroundColor¶
colorPicker Allows you to set the background color of the icon.
borderRadius¶
int From 0 to 100. Indicate how much background rounding of the icons should be added (0% - rectangular, 100% - round background).
addIconBorder¶
int if set to 1, allows to add and style a border of the icons.
borderColor¶
colorPicker Allows you to set the border color of the icon.
borderPosition¶
all - display border on all sides of the icon.
top - display border only on the top side of the icon.
bottom - display border only on the bottom side of the icon.
top-bottom - display border only on top and bottom sides of the icon.
right - display border only on the right side of the icon.
left - display border only on the left side of the icon.
left-right - display border only on the left and right sides of the icon.
borderWidth¶
int Indicates how thick (in px) a border around the icons should be.
classNames¶
string (optional) A list of additional classes that will be added to the Social Media Icons. For example "class-1 class-2".
Module source code¶
{% from '@macros/image.twig' import image %}
{% from "@macros/header.twig" import header %}
{% if moduleConfig.iconRepeater|length > 0 %}
<div class="social-media">
{% if moduleConfig.title %}
{{
header({
level: moduleConfig.headingLevel|default('h2'),
content: moduleConfig.title,
hasUnderline: moduleConfig.shouldDisplayHeadingUnderline == 1
})
}}
{% endif %}
{% if moduleConfig.iconRepeater|length > 0 %}
<ul class="social-media__list">
{% for group in moduleConfig.iconRepeater %}
{% if group.active %}
<li class="social-media__item" style="--socialMediaIconBgColor: {{ moduleConfig.backgroundColor }}; --socialMediaIconBorderRadius: {{ moduleConfig.borderRadius }}; --socialMediaIconBorderWidth: {{ moduleConfig.borderWidth }}px; --socialMediaIconPadding: {{ moduleConfig.padding }}; --socialMediaIconTextColor: {{ moduleConfig.textColor }}; --socialMediaIconBorderColor: {{ moduleConfig.borderColor }};">
{% if group.values.link %}
<a
href="{{ group.values.link }}" {% if moduleConfig.addIconBorder == "1" %}
class="border-{{ moduleConfig.borderPosition}}"{% endif %}
target="_blank" rel="noopener nofollow"
aria-label="{% if group.values.imageAlt %}{{ group.values.imageAlt }} - {% else %} {% if group.values.iconTitle %}{{ group.values.iconTitle }} - {% endif %}{% endif %}{{ translate('Opening in a new tab') }}">
{% endif %}
{{ image({
img: {
height: group.values.image.height,
src: group.values.image.paths.original,
id: "picture-#{group.values.image.id}",
alt: '',
class: "social-media__item-image",
decoding: 'async',
loading: 'lazy'
}
})
}}
{% if group.values.iconTitle %}
<p class="social-media__item-title">{{ group.values.iconTitle }}</p>
{% endif %}
{% if group.values.link %}
</a>
{% endif %}
</li>
{% endif %}
{% endfor %}
</ul>
{% endif %}
</div>
{% endif %}
Macros reference¶
Used styles¶
Module configuration schema¶
[
{
"label": "Icons",
"state": "unfolded",
"elements": [
{
"name": "iconRepeater",
"type": "repeater",
"label": "Icons displayed in the module",
"labelDescription": "Min. 1",
"supportsTranslations": true,
"isRequired": true,
"options": {
"defaultGroupLabel": "Icon",
"minActiveGroups": 1,
"maxActiveGroups": 6,
"elements": [
{
"name": "image",
"type": "imageUpload",
"options": {
"requireImageSize": true,
"allowedExtensions": ["webp", "svg", "jpg", "png", "gif"]
},
"label": "Icon",
"isRequired": true
},
{
"name": "iconTitle",
"type": "text",
"label": "Text below icon",
"isRequired": false
},
{
"name": "link",
"type": "text",
"validators": [
{
"type": "url"
}
],
"options": {
"placeholder": "https://"
},
"label": "Webpage URL",
"isRequired": true
},
{
"name": "imageAlt",
"type": "text",
"label": "Alternative image description (\"alt\")",
"labelDescription": "For images with links, provide both the link destination and image description.",
"isRequired": false
}
]
}
}
]
},
{
"label": "General settings",
"state": "unfolded",
"elements": [
{
"type": "checkbox",
"name": "shouldDisplayHeading",
"label": "Display heading",
"defaultValue": 0,
"children": [
{
"type": "text",
"name": "title",
"label": "Module heading content",
"isRequired": true,
"supportsTranslations": true,
"relations": [
{
"parentName": "shouldDisplayHeading",
"parentValueToActionsMap": [
{
"value": 0,
"actions": ["setHiddenAndOptional", "setDisabled"]
},
{
"value": 1,
"actions": ["setVisibleAndRequired", "setAvailable"]
}
]
}
]
},
{
"type": "select",
"name": "headingLevel",
"label": "Heading level",
"hint": "The numbers 2 to 6 indicate the hierarchy of headings, with H2 being the most important and H6 being the least. Module titles are H2 headers. H1 is reserved for the page title. If you need to add a page title, use the \"Page title\" module.",
"defaultValue": "h2",
"options": {
"isWithSearch": 0,
"selectOptions": [
{
"key": "h2",
"label": "H2"
},
{
"key": "h3",
"label": "H3"
},
{
"key": "h4",
"label": "H4"
},
{
"key": "h5",
"label": "H5"
},
{
"key": "h6",
"label": "H6"
}
]
},
"relations": [
{
"parentName": "shouldDisplayHeading",
"parentValueToActionsMap": [
{
"value": 0,
"actions": ["setHidden", "setDisabled"]
},
{
"value": 1,
"actions": ["setVisible", "setAvailable"]
}
]
}
]
},
{
"type": "checkbox",
"name": "shouldDisplayHeadingUnderline",
"label": "Add underline below the heading",
"defaultValue": 1,
"relations": [
{
"parentName": "shouldDisplayHeading",
"parentValueToActionsMap": [
{
"value": 0,
"actions": ["setHidden", "setDisabled"]
},
{
"value": 1,
"actions": ["setVisible", "setAvailable"]
}
]
}
]
}
]
}
]
},
{
"label": "Module appearance",
"state": "unfolded",
"elements": [
{
"name": "textColor",
"type": "colorPicker",
"label": "Text color in module",
"defaultValue": "@globalFontColor",
"isRequired": false,
"options": {
"allowVariables": true
}
},
{
"type": "number",
"name": "padding",
"label": "Space around icon (padding)",
"defaultValue": 10,
"isRequired": true,
"validators": [
{
"type": "int"
},
{
"type": "greaterEqThan",
"options": {
"min": 0
}
},
{
"type": "lessEqThan",
"options": {
"max": 80
}
}
],
"options": {
"postfix": "px"
}
},
{
"name": "backgroundColor",
"type": "colorPicker",
"label": "Icon background color",
"defaultValue": "#FFFFFF00",
"isRequired": false,
"options": {
"allowVariables": true
}
},
{
"type": "number",
"name": "borderRadius",
"label": "Icon background rounding",
"labelDescription": "0% - rectangular, 100% - round background",
"defaultValue": 0,
"validators": [
{
"type": "int"
},
{
"type": "greaterEqThan",
"options": {
"min": 0
}
},
{
"type": "lessEqThan",
"options": {
"max": 100
}
}
],
"options": {
"postfix": "%"
}
},
{
"name": "addIconBorder",
"type": "checkbox",
"label": "Add icon border",
"defaultValue": 0,
"children": [
{
"name": "borderColor",
"type": "colorPicker",
"label": "Border color",
"defaultValue": "@neutralColor",
"options": {
"allowVariables": true
},
"relations": [
{
"parentName": "addIconBorder",
"parentValueToActionsMap": [
{
"value": 0,
"actions": ["setHidden", "setDisabled"]
},
{
"value": 1,
"actions": ["setVisible", "setAvailable"]
}
]
}
]
},
{
"name": "borderPosition",
"type": "select",
"options": {
"selectOptions": [
{
"key": "all",
"label": "All sides"
},
{
"key": "top",
"label": "Top"
},
{
"key": "bottom",
"label": "Bottom"
},
{
"key": "top-bottom",
"label": "Top and bottom"
},
{
"key": "right",
"label": "Right side"
},
{
"key": "left",
"label": "Left side"
},
{
"key": "left-right",
"label": "Right and left sides"
}
]
},
"label": "Border position",
"defaultValue": "all",
"relations": [
{
"parentName": "addIconBorder",
"parentValueToActionsMap": [
{
"value": 0,
"actions": ["setHidden", "setDisabled"]
},
{
"value": 1,
"actions": ["setVisible", "setAvailable"]
}
]
}
]
},
{
"type": "number",
"name": "borderWidth",
"label": "Border thickness",
"defaultValue": 1,
"validators": [
{
"type": "int"
},
{
"type": "greaterEqThan",
"options": {
"min": 0
}
},
{
"type": "lessEqThan",
"options": {
"max": 100
}
}
],
"options": {
"postfix": "px"
},
"relations": [
{
"parentName": "addIconBorder",
"parentValueToActionsMap": [
{
"value": 0,
"actions": ["setHidden", "setDisabled"]
},
{
"value": 1,
"actions": ["setVisible", "setAvailable"]
}
]
}
]
}
]
}
]
},
{
"label": "CSS",
"state": "folded",
"elements": [
{
"name": "classNames",
"type": "text",
"label": "CSS class",
"labelDescription": "Enter the class name without a dot at the beginning. You can add multiple classes by separating them with spaces."
}
]
}
]