Episode Contributors falsch formatiert

Podlove Publisher Podlove Templates
1

Hallo zusammen,

habe das Problem, dass seit einiger Zeit die Episoden Mitbeitragenden durch

[podlove-episode-contributor-list]

in der Tabelle nicht mehr formatiert angezeigt werden, Konkret ist cellpadding und cellspacing zwischen den

im Ergebnis scheinbar auf “0”, zumindest sieht es so aus, da der Avatar in der ersten Zelle der Zeile und der Kommentar in der zweiten Zelle ohne Abstand zusammengeklatscht werden.

Welches File muss ich ändern um die Tabelle zu editieren?

Vorhanden sind:

  • [default ]
  • [episode-list ]
  • [contrib ]

Contrib hat diesen Inhalt:

{# @contributors/podcast-contributor-list.twig #}

<table class="podlove-global-contributors">
	{% if option.title %}
		<thead>
			<tr>
				<th colspan="2">{{ option.title }}</th>
			</tr>
		</thead>
	{% endif %}
	<tbody>
		{% for contributor in podcast.contributors %}
			{% if contributor.visible %}
				<tr>
					<td rowspan="2" class="avatar-cell" width="60" cellpadding="10" cellspacing="5">
						{{ contributor.image.html({width: 60, height: 60, class: "avatar avatar-" ~ size ~  " photo", alt: "avatar" }) }}
					</td>
					<td class="social-cell">
						<strong class="contributor-name">{{ contributor.name }}</strong>
						<div class="social-icons">
							{% for service in contributor.socialServices %}
								<a target="_blank" title="{{ service.title }}" href="{{ service.profileUrl }}">
									{{
										service.image.html({
											width: 32, 
											class: "podlove-contributor-button",
											alt: service.title ~ " Icon"
										}) 
									}}
								</a>
							{% endfor %}
						</div>
					</td>
				</tr>
				<tr class="episode-row">
					<td class="episodes-cell">
						<ul>
						{% for episode in contributor.episodes %}
							<li>
								<a href="{{ episode.url }}">{{ episode.title }}</a>
							</li>
						{% endfor %}
						</ul>
					</td>
				</tr>
			{% endif %}
		{% endfor %}
	</tbody>
</table>

<script type="text/javascript">
(function ($) {
	$(document).ready(function() {
		$(".podlove-global-contributors .episodes-cell").each(function() {
			var items = $("li", this);


			if (items.length > 5) {
				$("li:gt(4)", this).hide();
				$('<span class="show-all-episodes"><a href="#">… show all episodes</a><span>').insertAfter($("ul", this));
			}
		});

		$(".podlove-global-contributors").on("click", ".show-all-episodes a", function(e) {
			e.preventDefault();

			$(this).closest(".episodes-cell")
				.find("li").show().end()
				.find(".show-all-episodes").hide();
		});
	});
}(jQuery));
</script>

<style type="text/css">
.podlove-global-contributors td {
	vertical-align: top;
	line-height: 1.3em;
}

.podlove-global-contributors .avatar-cell {
	max-width: 100px;
	text-align: center;
}

.podlove-global-contributors td {
	border-top-width: 0px;
}

.podlove-global-contributors .episode-row {
	/*margin-bottom: 10px;*/
}

.podlove-global-contributors td ul {
	margin: 0;
}

.podlove-global-contributors .social-cell li {
	margin: 0;
}

.podlove-global-contributors .episodes-cell {
	padding-top: 0px;
}

.podlove-global-contributors .episodes-cell li {
	display: inline-block;
	margin: 0;
}

.podlove-global-contributors .episodes-cell li a {
	background: #eee;
	padding: 2px 10px;
	line-height: 170%;
	border-radius: 10px;
}

</style>

Viele Grüße
Tim

2

Hat keiner dazu eine Idee?

Ihr könnt das Problem zum Beispiel hier sehen (unten bei ‚Unsere Bewertung‘.) Die Tabelle sieht ätzend aus und der Aufbau lässt sich nicht ändern.

3

Ich steige bei dem Code tatsächlich nicht so recht durch. Für Natürlich.SH haben wir das so gelöst:

{% if not is_feed() %}
    <h3>Moderation:</h3>
    <div class="container">
        {% for contributor in episode.contributors({role: 'moderation'}) %}
            <div class="mod">
                <div class="item" style="width:110px">
                    {{ contributor.image.html({width: 100, height: 100, alt: contributor.name, title: contributor.name}) }}
                </div>
                <div class="item" style="font-family:Kanit;font-weight:bold">
                    {{ contributor.name }}
                </div>
                <div class="item">
                    {% for service in contributor.services({category: "social"}) %}
                        <a target="_blank" title="{{ service.title }}" href="{{ service.profileUrl }}" style="color:white">
                            {{ service.image.html({width: 20, heigth: 20, alt: service.name}) }}
                        </a>
                    {% endfor %}
                    {% for service in contributor.services({category: "donation"}) %}
                        <a target="_blank" title="{{ service.title }}" href="{{ service.profileUrl }}" style="color:white">
                            {{ service.image.html({width: 20, heigth: 20, alt: service.name}) }}
                        </a>
                    {% endfor %}                
                </div>
            </div>
        {% endfor %}
    </div>
<style>
   .container {
       display: flex;
       justify-content: flex-start;
       align-items: flex-start;
       gap: 1em 2em;
       flex-flow: row wrap;
   }
   .mod {
       display: flex;
       justify-content: flex-start;
       align-items: center;
       flex-flow: column wrap;
   }
   .item {
       display: flex;
       justify-content: center;
       align-items: center;
       gap: 3px;
       flex-flow: row wrap;
   }
</style>

Da fällt am Ende für jede Beteiligte eine Box mit Foto, Name und Links heraus. Keine Ahnung, wie Du die Bewertung realisierst, aber das könnte man relativ schnell einbauen. Diesen Code kannst Du gern nutzen, wenn Du Fragen zu weiteren Anpassungen hast, melde Dich gern.

4

Danke Dir, das ist bei Dir die Date ‚default‘ oder?

5

In meiner Datei stehen da noch ein paar andere Angaben (zur Lizenz und ähnlichen Episoden) drin und ich habe sie in ein eigenes Template gepackt, dass ich automatisch am Ende einfügen lasse.