Replacing social icons

Podlove Publisher Podlove Templates
1

Hi,
I’d like to replace the social icons. I might use custom svg icons at some point, but currently I’m preferring FontAwesome, using its Wordpress plugin.

This template code theoretically works:

<ul>
    {% for service in contributor.services %}
        <li>
            <a target="_blank" title="{{ service.title }}" href="{{ service.profileUrl }}">
                <span class="fa-icon {{ service.name }}"></span>
            </a>
		</li>
	{% endfor %}
</ul>

<style>
.fa-icon::before {
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
  }

.instagram::before {
    font-family: "Font Awesome 5 Brands"; font-weight: 400; content: "\f16d";
  }

.website::before {
    font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f0ac";
  }

.twitter::before {
    font-family: "Font Awesome 5 Brands"; content: "\f099";
  }
</style>

Except, service.name is not available. Could you add it to the list of template tags?
I thought I might need to use just service but that doesn’t work either.

2

I realized that using service.name wouldn’t solve the problem as some service names contain spaces and dots and parentheses as well:

I found a solution with Twig however, replacing spaces and dots with hyphens and deleting parentheses:

<ul>
    {% for service in contributor.services %}
        <li>
            <a target="_blank" title="{{ service.title }}" href="{{ service.profileUrl }}">
                <span class="fa-icon {{ service.title|lower|replace({' ': "-", '.': "-", '(': "", ')':""}) }}"></span>
            </a>
		</li>
	{% endfor %}
</ul>
3

I added it to the current beta release as service.type (https://github.com/podlove/podlove-publisher/commit/a9e517648825de1c9df2a43297d430d5f93c2898).

1 Like
4

Just installed 3.0 (congrats!) and this works perfectly.

One more suggestion regarding available social icons: a podcast option would be useful!
Screen Shot 2020-09-08 at 17.05.03

1 Like
5

There’s always “website” as a fallback option – hopefully the podcast you want to link to has a website :wink:

6

Solved by using the “website” option and adding “Podcast” as a title, plus

twig:

<a target="_blank" title="{{ service.title }}" href="{{ service.profileUrl }}">
                        <span class="fa-icon {# using font awesome icons defined in styles template #}
                        {%- if service.type == "website" and service.title != "Website" -%}
                            {{ service.title|lower }}
                        {%- else -%}
                            {{ service.type }}
                        {%- endif -%}
                        "></span>
                    </a>

css:

.fa-icon.podcast::before {
    font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f2ce";
  }
1 Like