0

I am new to this platform and the syntax. We have custom social media icons in our theme. Example:

<a href="{{ module.link_sharetw }}" class="share-button twitter">
<img src="{{ get_asset_url('/greenpeace_p4_theme/assets/twitter.svg') }}" />
</a>

I would like to replace the default icons used in the social sharing module here. Is it possible?

{% set size = "24px" %}
{% set borderRadius = "3px" %}
{% set linkStyle = "width:"~size~";border-width:0px;border:0px;text-decoration:none;" %}
{% set imgStyle = "height:"~size~";width:"~size~";border-radius:"~borderRadius~";border-width:0px;border:0px;" %}

{% macro render_social_icon(networkName) %}
{% set network = module[networkName] %}
{% if (networkName == "pinterest" and network.pinterest_media and network.enabled) or (networkName != "pinterest" and network.enabled) %}
{% if networkName == "pinterest" %}
{% set pinterest_media = module.pinterest.pinterest_media.src %}
{% endif %}
{% set logo = networkName ~'-color.png' %}
{% set urlOperator = "&" if "?" in page_meta.canonical_url else "&" %}
{% if module.link %}
{% set social_link_url = module.link ~ urlOperator ~ "utm_medium=social&utm_source="|safe ~ networkName %}
{% elif content.email_type.blogRssChild %}
{% set social_link_url = content.rss_email_url %}
{% else %}
{% set social_link_url = page_meta.canonical_url ~ urlOperator ~ "utm_medium=social&utm_source="|safe ~ networkName %}
{% endif %}

<a href="{{ network.custom_link_format }}" target="_blank" rel="noopener" style="{{ linkStyle }}" >
<img src="{{ module_asset_url(logo) }}" class="hs-image-widget hs-image-social-sharing-24" style="{{ imgStyle }}" width="{{ size }}" hspace="0" alt='{{ "Share on " ~ networkName }}' />
</a>
{% endif %}
{% endmacro %}

<div class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_social_sharing" data-hs-cos-general-type="widget" data-hs-cos-type="social_sharing">
{{ render_social_icon('facebook') }}
{{ render_social_icon('linkedin') }}
{{ render_social_icon('share_twitter') }}
{{ render_social_icon('pinterest') }}
{{ render_social_icon('email') }}
</div>

I know there is a way to replace social media icons in the module inspector but it only takes pngs.

Lili
  • 333
  • 4
  • 23

1 Answers1

1

On line 12 you have a

{% set logo = networkName ~'-color.png' %}

which is defining the name expected for the icon. Change .png to .svg and it should render just fine.

vkacenak
  • 26
  • 2
  • I think if you substitude the png icons with svg icons and change png to svg on line 12 as vkacenak said, it should work. Notice that maybe there's a css somewhere which mostly, among other things, should apply a proper class or id to identify each icon. I that's the case you have to change png to svg there too and be asured that you have the exact icons in svg format. – SIMBIOSIS surl Aug 19 '21 at 00:27