news_latest.html5 anpassen $this->linkHeadline

**derRenner** · 27.08.2018, 16:59

Hallo,

ich brauche gerade den Stupser in die richtige Richtung.
ich passe das template news_latest.html5 an und möchte darin auch das Bild mit dem <a> tag abgreifen. Ich kann aber nicht herausfinden, wie und wo die url dafür "erzeugt" wird.
Im Grunde ist es ja die gleiche url die aus $this->linkHeadline und $this->more erzeugt wird.
Aber für beide finde ich nicht heraus, wie ich den <a>-tag nun "ausschreiben" kann.

$this->url oder $this->href ist's nicht ...

HTML-Code:

div class="layout_latest row arc_<?= $this->archive->id ?> block<?= $this->class ?>" itemscope itemtype="http://schema.org/Article">
	
	<div class="image-block col-3">
		<figure class="image_container "<?php if ($this->margin): ?> style="<?=$this->margin ?>""<?php endif; ?>>
			<?php if ($this->href): ?>
			<a href="<?= $this->href ?>"<?= $this->attributes ?> title="<?= $this->alt ?>">
			<?php endif; ?>

			<?php $this->insert('picture_default', $this->picture); ?>

			<?php if ($this->href): ?>
			</a>
			<?php endif; ?>

			<?php if ($this->caption): ?>
			<figcaption class="caption"><?= $this->caption ?></figcaption>
			<?php endif; ?>
		</figure>		
	</div>
	
	<div class="info-block-wrapper col-9">
		<div class="info-block">
			<?php if ($this->hasMetaFields): ?>
				<p class="info">
					<span>erstellt am </span>
					<span><?php echo $this->parseDate("d.m.Y", $this->timestamp); ?></span>
					<span><?= $this->author ?></span>
				</p>
			<?php endif; ?>	
		</div>
		
		<h2 itemprop="name"><?= $this->linkHeadline ?></h2>
		
		<div class="ce_text block" itemprop="description">
			<?= $this->teaser ?>
		</div>
		
		<?php if ($this->hasText || $this->hasTeaser): ?>
			<p class="more"><?= $this->more ?></p>
		<?php endif; ?>
<?php $this->showTemplateVars(); ?>
		
	</div>

</div>

<?php $this->insert('picture_default', $this->picture); ?>

hier rum sollte der <a>-tag erzeugt werden:

Code:

<a href="..."><?php $this->insert('picture_default', $this->picture); ?></a>

vielen Dank für die Hilfestellung

**rusty** · 27.08.2018, 19:05

nimm <?= $this->link ?>
ggf. eingeschränkt durch die Bedingung if ($this->hasText). Diese Variable ist nur true, wenn Inhalte zur News-Detailseite hinzugefügt wurden.

Findest du alles relativ übersichtlich, wenn du dir über $this->showTemplateVars() ausgeben lässt, welche Variablen zur Verfügung stehen.

**derRenner** · 27.08.2018, 19:59

Hallo,

die Variablen hatte ich mir ausgeben lassen - siehe auch noch den unteren Eintrag im geposteten template ...

Das '$this->link' hatte ich da auch bereits eingetragen - hatte aber wohl die falsche Abfrage mit eingebaut. Ohne eine Abfrage, da ja sowieso immer eine Verlinkung vorhanden ist, klappt das - Danke!

HTML-Code:

<div class="layout_latest row arc_<?= $this->archive->id ?> block<?= $this->class ?>" itemscope itemtype="http://schema.org/Article">
	
	<div class="image-block col-3">
		<figure class="image_container "<?php if ($this->margin): ?> style="<?=$this->margin ?>""<?php endif; ?>>

			<a href="<?= $this->link ?>" title="">
			<?php $this->insert('picture_default', $this->picture); ?>
			</a>

			<?php if ($this->caption): ?>
			<figcaption class="caption"><?= $this->caption ?></figcaption>
			<?php endif; ?>
		</figure>		
	</div>
	
	<div class="info-block-wrapper col-9">
		<div class="info-block">
			<?php if ($this->hasMetaFields): ?>
				<p class="info">
					<span>erstellt am </span>
					<span><?php echo $this->parseDate("d.m.Y", $this->timestamp); ?></span>
					<span><?= $this->author ?></span>
				</p>
			<?php endif; ?>	
		</div>
		
		<h2 itemprop="name"><?= $this->linkHeadline ?></h2>
		
		<div class="ce_text block" itemprop="description">
			<?= $this->teaser ?>
		</div>
		
		<?php if ($this->hasText || $this->hasTeaser): ?>
			<p class="more"><?= $this->more ?></p>
		<?php endif; ?>
	
	</div>

</div>

**planepix** · 12.03.2023, 19:17

Ist zwar schon älter der Thread, denke hier passt mein Anliegen drunter.
Aktuell suche ich eine Lösung für 4.13.

News-Template new_latest.

Hier möchte ich die caption verlinken, da beim Hover über dem Bild die Bildunterschrift komplett drüber liegt und somit ohne Anpassungen der Link nicht erreichbar ist.

Aktuell reduziertes news_latest.html5 Template

PHP-Code:


<div class="layout_latest arc_<?= $this->archive->id ?> block<?= $this->class ?>">
  <?php if ($this->hasMetaFields): ?>
<p class="info"><time datetime="<?= $this->datetime ?>"><?= $this->date ?></time> <?= $this->author ?> <?= $this->commentCount ?></p>
<?php endif; ?>

  <?php if ($this->addImage): ?>
<?php $this->insert('image', $this->arrData); ?>
<?php endif; ?>
</div>
<?php
// This template is used as a news list template by default, so we only add// JSON-LD data in case this is a news article without a readerif (!$this->hasReader) {    $this->addSchemaOrg($this->getSchemaOrgData());}

Mit Ergänzung $this->link um den addImage Block wird der Link 2x ausgegeben, führt zu verschachtelten Fehlern und ändert auch nicht an der Möglichkeit, den Link auf die News Detail zu klicken.

Hat das schon mal jemand erreicht?
Danke für einen Tipp.

**rusty** · 13.03.2023, 08:43

Hallo planepix,
2 Ideen:
1. Per CSS die Caption so einstellen, dass sie für Mausereignisse quasi durchsichtig wird:

Code:

.caption { pointer-events: none; }

2. Den Link um die figure entfernen, um ihn anschließend einmal um das image und einmal um die caption zu legen.
Zum Entfernen des Links ersetze ich meistens das

PHP-Code:


<?php $this->insert('image', $this->arrData); ?>

durch

PHP-Code:


<?php $this->insert('picture_default', $this->picture); ?>

**dazzle89** · 13.03.2023, 08:51

Hilft eventuell die Antwort von spooky in diesem Thread weiter?

https://community.contao.org/de/show...bild-entfernen

**planepix** · 13.03.2023, 17:47

Zitat von rusty

Hallo planepix,
2 Ideen:
1. Per CSS die Caption so einstellen, dass sie für Mausereignisse quasi durchsichtig wird:

Code:

.caption { pointer-events: none; }

2. Den Link um die figure entfernen, um ihn anschließend einmal um das image und einmal um die caption zu legen.
Zum Entfernen des Links ersetze ich meistens das durch

Danke für die erste Variante.
Da caption komplett eine Farbe erhält, geht es nicht.

Zweite Variante habe ich versucht; egal wie ich es drehe, gelingt es mir nicht.

Ich hab jetzt ja ein Ansatz.

**rusty** · 13.03.2023, 17:50

Danke für die erste Variante.
Da caption komplett eine Farbe erhält, geht es nicht.

Das macht nichts. Visuell ändert sich mit der CSS-Anweisung nichts.

**planepix** · 14.03.2023, 08:17

Hallo rusty,

danke dir erneut.

Ich habe das pointer-events: none; einmal ergänzt bei caption.

Code:

.mod_newslist .layout_latest .caption {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background-color: rgba(184,166,146,1);
    color: #f1f1f1;
    width: 100%;
    height: 100%;
    transition: .5s ease;
    opacity: 0;
    font-size: 20px;
    padding: 20px;
    text-align: center;
    line-height: 1.4;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
}


.mod_newslist .layout_latest .image_container .caption:hover {
  opacity: .8;
  background-color: rgba(184,166,146,1);
  cursor: pointer;
  border: 2px solid #fff;
}

Damit kann ich die einzelnen News anklicken und auf die Detailseite gelangen; aber die Hintergrundfarbe bei Hovern der Caption ist dann weg (transparent).

Hättest du ein Code-Beispiel für eine Templateanpassung?

Danke und Grüße

**rusty** · 14.03.2023, 08:33

Da würde ich dann auch eher mit CSS rangehen, wenn sich eine Template-Anpassung vermeiden lässt.
Der hover-Zustand ist ja dazu gedacht, Interaktivität schon vor dem Mausklick anzukündigen. Die caption selbst ist aber eigentlich nicht interaktiv, sondern der Link.
Da der Link alles umschließt (wenn ich das richtig verstanden habe) könntest du die caption auf a:hover reagieren lassen:

Code:

.mod_newslist .layout_latest a:hover .caption {
  opacity: .8;
  background-color: rgba(184,166,146,1);
  cursor: pointer;
  border: 2px solid #fff;
}

Falls der Link nur das image umschließt, wäre auch ein

Code:

.image_container:hover caption {}

möglich.

**planepix** · 14.03.2023, 10:28

Ja ja ja - manchmal ist es verhext..

Hover auf das passende Element und dann passt das.

Letztendlich dieses CSS:

Code:

.mod_newslist .layout_latest .image_container {
  position: relative;
  line-height: 0;
}

.mod_newslist .layout_latest .image_container .caption {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background-color: rgba(184,166,146,1);
    color: #f1f1f1;
    width: 100%;
    height: 100%;
    transition: .5s ease;
    opacity: 0;
    font-size: 24px;
    font-weight: 400;
    padding: 20px;
    text-align: center;
    line-height: 1.4;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
}

.mod_newslist .layout_latest .image_container:hover .caption {
  opacity: .8;
  cursor: pointer;
  border: 2px solid #fff;    
}