Wie "Contributors" stylen?

Habe in meinem Testpodcast die Anzeige der “Contributors” zum Laufen gebracht: http://blogtui.cogneon.de/?podcast=testpodcast-1. Im Gegensatz zu anderen Podcasts (z.B. Freakshow: http://freakshow.fm/fs144-desperate-mode) sieht die Tabelle aber nicht so hübsch aus und es fehlen die Links zu Twitter, Web, Amazon etc.

Was ist hier noch zu tun?

1 „Gefällt mir“

Bei Menü Episode im Untermenü Contributors können dolche sachen wie amazonwishlist eingetragen werden

1 „Gefällt mir“

Danke für den Tipp, aber bei mir gibt es dort weder Amazon, noch Twitter, noch App.net … Muss man diese Profilfelder noch irgendwo konfigurieren?

1 „Gefällt mir“

Nein, du findest so etwas wie Amazone, PayPal, Auphonic Donations in den Contributers Settings unter Donations.
Unter Social sämtliche Netzwerke.

1 „Gefällt mir“

Danke! War mein Fehler, hatte in den Settings vergessen “Social & Donations” zu aktivieren. Jetzt taucht es auf.

1 „Gefällt mir“

Wie die Links eingefügt werden, wurde ja bereits geklärt. Wie man das Erscheinungsbild der Tabelle ändert, leider noch nicht.
Genau da stehe ich aktuell auch an. Bei mir sieht die Contributors Auflistung noch nicht wirklich ansprechend aus. Die beiden rechten Spalten sind leer und könnten demnach entfernt werden. Dafür könnten dann die Links/Icons mehr in die Breite verteilt werden, was auch der Darstellung auf mobilen Geräten (hochkant) dient. Doch wie?

In der Auflistung der Podlove Shortcodes lassen sich (auf mein Problem kaum passende) Parameter finden. Wo und wie dieser verändert werden können, ist mir nicht klar.

Vielen Dank im Voraus für eure Hilfe!

1 „Gefällt mir“

Ich würde sagen, da musst du mit CSS ran. Im Wordpress Backend unter Design -> Custom CSS kannst du du das Aussehen von allem, was irgendwie über CSS ansteuerbar ist ( = alles :smile:) anpassen.

Hier ein paar Beispiele aus meinem Style.

/* Contributors: Keine Spaltentrenner */
table.podlove-contributors-table td {
  border-left: 0px;
  border-right: 0px;
}

/* Contributors: Tabellenhintergrund */
table.podlove-contributors-table th, td {
  background: white; /* Fallback */
  background: rgba(255, 255, 255, .1);
  border: 0px;
  padding: 0px;
}

Um die Namen von CSS-Klassen herauszufinden, nutzt du am besten gängige Web Developer Tools wie einen im Browser schon eingebauten Inspector oder 3rd Party Plugins, wie z.B. Firebug. Damit kannst du mit der Maus über deine Seite fahren und dir anzeigen lassen, welche Eigenschaften die Regionen darunter besitzen.

2 „Gefällt mir“

Ansonsten gibt es noch den http://customplayer.webgeplapper.de mit dem das geht.

Siehe dazu auch den zugehörigen Thread

3 „Gefällt mir“

Danke @pommes für den Hinweis. Ich werde das mal ausprobieren und sehen, ob das so tut, wie ich will.

@Sven: Ich versuche die Contributors zu verändern, nicht den Player.

Edit: Habe mir das nun ansehen wollen. Unter Design gibt es keinen Menüpunkt Custom CSS. Dafür einen Editor fürs Theme. Da wiederum gibt’s die style.css Datei. Darin habe ich aber nichts in der Art gefunden. Via “Plugins” lässt sich ein weiterer Editor finden. Dort sind bzgl. Podlove Podcast Publisher einige Dateien (meist .php) hinterlegt. Sollte ich die von @pommes genannte Stelle da suchen?

1 „Gefällt mir“

Bei mir schaut das so aus. Evtl ist das je nach Theme unterschiedlich. Glaub ich aber eigentlich nicht.

Danke für die Rückmeldung. Das sieht bei mir definitiv anders aus:

Aber halb so wild. Wichtiger ist die Frage, welche CSS Datei hier verändert wird. Wenn ich weiss, wie sie heisst, kann ich sie bei mir suchen und anpassen. Oder - falls möglich - eine erstellen.

Na die wirds auch tun. Es kann halt sein, dass die bei einem Theme Update überschrieben wird. Also solltest du dir deine Anpassungen vorher sichern. Ob es funktioniert kannst du ja einfach testen, indem du eins meiner Beispiele testweise da reinpackst.

In der Art wirst du da auch nichts drin finden.
Wenn du genau das Stylesheet suchst, in dem jetzt bereits Contributor Styles enthalten sind, musst du tatsächlich im Podlove Plugin schaun. Da bin ich aber der falsche, der dir da weiterhelfen kann. Falls die style.css jedoch später geladen wird, kannst du die Styles ja darin überschreiben.

Kennt niemand ein Standardvorgehen, wenn ein Theme keine custom css-Datei bietet?

Ich empfehle https://wordpress.org/plugins/simple-custom-css/

1 „Gefällt mir“

Vielen Dank @pommes für die Klärung. Habe den Code nun in die style.css (im Child Theme) kopiert und (fast) alles scheint zu klappen.

Das 6. Social Icon pro Contributor wird in der Tabelle immer eine zweite Zeile beginnen. Da ist rechts wohl zwangsläufig Platz reserviert für (von mir nicht gebrauchte) Amazon-Wunschlisten, Flattr-Buttons etc…

Ein kleiner Schönheitsfehler bleibt:
Am rechten Rand fehlt der Rahmen. Hier live zu sehen. Wenn wer dafür noch eine Lösung hätte, wäre die Baustelle hier endlich beendet und ich überglücklich. :smiley:

Edit:
Auch nach längerem Pröbeln und Vergleichen ist mir noch nicht klar, warum am linken Rand noch immer eine Trennlinie eingeblendet wird. Weiter verstehe ich auch nicht, weshalb bei mir die Avatare rund ausgeschnitten sind. Hier wäre ich für jegliche Hilfe dankbar.

Edit 2:
Ich muss das Thema leider wieder aufwärmen. Ich habe noch immer nicht herausgefunden, weshalb bei mir die Avatare der Contributors rund ausgeschnitten sind. Wo kann ich das ändern, damit auch bei mir die Avatare - wie überall sonst auch - quadratisch dargestellt werden?

Das mit den Avataren rührt von Twenty Fifteen.

Folgende Stelle in der style.css ist dafür verantwortlich:

/**
* 14.0 Media
*/

.site .avatar {
	border-radius: 50%;
}
1 „Gefällt mir“

Danke @Sven für die rasche Antwort! Hat geholfen!
Den “border-radius” einfach auf 0% stellen, dann hat man quadratische Avatare.

Was mich auch interessieren würde: Wie kann man die Contributoren so verlinken, dass man auf sie klicken kann und dann alle Episoden erhält, wo diese/r Contributor noch auftaucht?

Entweder baust Du Dir eine Gästeliste auf der alle Gästinnen auftauchen (dazu hätte ich hier was fertiges in Github, das so aussieht) oder Du baust für jede Contributorin eine eigene Seite, auf der Du aufbauend auf diesem Code die Episoden mit ihr ausgibst. Hier mal ein Beispiel für den Aufruf einer einen Contributorin, allerdings ohne deren Episoden. Von hier aus solltest Du es selbst schaffen. :slight_smile:

1 „Gefällt mir“

Dafür musst du in Wordpress im Podlove-Menü auf Templates klicken und das entsprechende Template bearbeiten oder ein neues anlegen.

Ich habe mir folgendes Template gebaut, um einerseits auf einer Übersichtsseite alle Episoden mit einem Contributor anzuzeigen und andererseits bei den einzelnen Episoden alle anderen Episoden mit dem Contributor anzuzeigen.

{% set option = {
    scope: 'podcast'
}|merge(option) %}

{# other contributor episodes except trailers #}
{% if option.scope == 'episode' %}
    {% set thisepisode = episode.post.ID %} {# using Wordpress post id as unique identifier #}
{% else %}
    {% set thisepisode = 0 %}
{% endif %}
{% for episode in contributor.episodes|filter(episode => episode.type != "trailer" and episode.post.ID != thisepisode) %}
    {% if loop.first %}    
        <p class="contributor-episodes">
            {% if option.scope == 'episode' %}
	            {% if loop.length == 1 %}There's one other episode
	            {% else %}Other episodes 
	            {% endif -%}
	        {% else %}
	            Episodes
	        {% endif %}
            with {{ contributor.nickname }}:</p>
        <ul class="contributor-episodes episodes-list">
    {% endif %}
	<li><a href="{{ episode.url }}">{{ episode.title }}</a></li>
    {% if loop.last %}    
        </ul>
    {% endif %}
{% endfor %}

Auf der Episoden-Seite kannst du das dann einbinden mit:
[podlove-template template="name deines templates" scope="episode"]
Auf einer Übersichtsseite scope weglassen oder z.B. auf podcast setzen.
Oder du bindest es in ein anderes Template ein mit:
{{ include("name deines templates") }}

1 „Gefällt mir“

Vielen Dank @schaarsen & @tomtjes! Das war sehr hilfreich. Ich habe nun meine Seite zusammengestellt und direkt auch noch einen Counter für Gesamtzahl und aufgeschllüsselt nach Geschlecht.
https://gamedevpodcast.de/gaeste/

2020-12-18_12-04-42

Der Code:

{% set female = 0 %}
{% set male = 0 %}
{% for contributor in podcast.contributors ({scope: "global-active", order: "ASC", orderby: "id"}) %}
    {% if contributor.gender == "female" %}
        {% set female = female + 1 %}        
    {% endif %}
    
    {% if contributor.gender == "male" %}
        {% set male = male + 1 %}        
    {% endif %}
{% endfor %}
<div style="width:100%; padding-bottom:1em; padding-top:1em; background-color:#eee;">
&nbsp;&nbsp;Gesamtzahl unserer Gäste: <strong>{{ podcast.contributors|length }}</strong> ({{ female }} ♀, {{ male }} ♂)
</div>
<br />
Unsere Gäste können Anfänger, Studenten, Indies oder alte Hasen der Branche sein. Bisher beehrten uns Menschen von Firmen wie Ubisoft, Splash Damage, ID Software, Crytek, It Matters Games, Airborn Studios, Naughty Dog, Yager, Keen Core, DICE und vielen mehr.
<br /><br />
<table width="100%" style="border:1px solid white; margin-right:0px; padding-right:0px;">
{% for contributor in podcast.contributors ({scope: "global-active", order: "ASC", orderby: "id"}) %}
{# iterate throught everybody in the group "gaeste" (e.g. "guests") who has been on at least one published episode and order them
by descending IDs #}
    <tr>
        <td width="80px" style="border:1px solid white;text-align:top;vertical-align:top;border-bottom:1px grey solid; padding-top:12px;">
            {{ contributor.image.html({width: 80, height: 80, alt: contributor.name, title: contributor.name}) }}<br />
            {# render an html-image tag with the measurements 100x100 pixels and use Contributors Name als alt and title tag #}
        </td>
        <td style="border:1px solid white;text-align:top;vertical-align:top;border-bottom:1px grey solid; padding-right:0px; margin-right:0px;">
            <strong>{{ contributor.name }}</strong>{% if contributor.organisation != "" %} ({{ contributor.organisation }}){% endif %}
            <span style="float:right">
            {% for service in contributor.services({category: "social"}) %}
            {# iterate through contributors given social networks and show service logos in 20x20 pixels #}
                <a target="_blank" title="{{ service.title }}" href="{{ service.profileUrl }}">
                    {{ service.image.html({width: 20, heigth: 20, alt: service.name}) }}
                </a>
            {% endfor %}
            </span>
            {# I use 'jobtitle' to add a few words about the contributor like 'harpoon-fishing semi-god of thunder' or whatever 
            fits #}
            <ul style="margin-left:0px; padding:0; list-style-type: none;">
            {% for episode in contributor.episodes %}
            {# iterate through episodes with this contributor and list them with their publication date #}
                <li>
                    <a href="{{ episode.url }}">{{ episode.post.post_title }}</a> {# ({{ episode.publicationDate.format('d.m.Y') }}) #}
                </li>
            {% endfor %}            
            </ul>
        </td>
    </tr>
{% endfor %}
</table>
4 „Gefällt mir“