Ergebnis 1 bis 11 von 11

Thema: news_latest.html5 anpassen $this->linkHeadline

  1. #1
    Community-Moderator & Contao-Urgestein Avatar von derRenner
    Registriert seit
    23.10.2012.
    Ort
    hoRn|waldviertel
    Beiträge
    2.914
    Contao-Projekt unterstützen

    Support Contao

    Standard news_latest.html5 anpassen $this->linkHeadline

    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
    Grüsse
    Bernhard


  2. #2
    Contao-Fan Avatar von rusty
    Registriert seit
    07.02.2012.
    Ort
    Hamburg
    Beiträge
    268

    Standard

    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.
    Geändert von rusty (27.08.2018 um 20:08 Uhr)

  3. #3
    Community-Moderator & Contao-Urgestein Avatar von derRenner
    Registriert seit
    23.10.2012.
    Ort
    hoRn|waldviertel
    Beiträge
    2.914
    Contao-Projekt unterstützen

    Support Contao

    Standard

    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>
    Grüsse
    Bernhard


  4. #4
    AG Pressearbeit
    Community-Moderator
    Buchautor 'Contao für Webdesigner'
    Avatar von planepix
    Registriert seit
    05.06.2009.
    Ort
    Stuttgart
    Beiträge
    6.529
    Partner-ID
    107
    Contao-Projekt unterstützen

    Support Contao

    Standard

    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.
    Geändert von planepix (12.03.2023 um 20:25 Uhr)
    ---------------------------------
    Beste Grüße planepix
    Contao für Webdesigner (Website), Twitter: @contaowebdesign
    weitzeldesign
    Contao-Sprechstunde
    Contao Schulungen: https://www.weitzeldesign.com/cms-co...chulungen.html
    Contao Jahrbuch: www.contao-jahrbuch.de
    Contao Agenturtag: www.contao-agenturtag.de
    Contao Stammtisch Stuttgart: www.contao-stammtisch-stuttgart.de
    Contao 4 Erfahrungen als Gitbook: https://app.gitbook.com/@planepix/s/...-mit-contao-4/
    Contao 4 & Manager Hosterhinweise: https://github.com/contao/contao-manager/wiki

    Schon wieder ein Update?
    Glücklich sind die, die den Wert erkennen – und wertschätzen.
    „Muss man machen wie beim Zahnarzt. Der bestraft einen auch mit hohen Rechnungen wenn man die Pflege vernachlässigt.”

  5. #5
    Contao-Fan Avatar von rusty
    Registriert seit
    07.02.2012.
    Ort
    Hamburg
    Beiträge
    268

    Standard

    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); ?>

  6. #6
    Contao-Fan
    Registriert seit
    03.01.2012.
    Beiträge
    847

    Standard

    Hilft eventuell die Antwort von spooky in diesem Thread weiter?

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

  7. #7
    AG Pressearbeit
    Community-Moderator
    Buchautor 'Contao für Webdesigner'
    Avatar von planepix
    Registriert seit
    05.06.2009.
    Ort
    Stuttgart
    Beiträge
    6.529
    Partner-ID
    107
    Contao-Projekt unterstützen

    Support Contao

    Standard news_latest.html5 anpassen $this-&gt;linkHeadline

    Zitat Zitat von rusty Beitrag anzeigen
    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.
    ---------------------------------
    Beste Grüße planepix
    Contao für Webdesigner (Website), Twitter: @contaowebdesign
    weitzeldesign
    Contao-Sprechstunde
    Contao Schulungen: https://www.weitzeldesign.com/cms-co...chulungen.html
    Contao Jahrbuch: www.contao-jahrbuch.de
    Contao Agenturtag: www.contao-agenturtag.de
    Contao Stammtisch Stuttgart: www.contao-stammtisch-stuttgart.de
    Contao 4 Erfahrungen als Gitbook: https://app.gitbook.com/@planepix/s/...-mit-contao-4/
    Contao 4 & Manager Hosterhinweise: https://github.com/contao/contao-manager/wiki

    Schon wieder ein Update?
    Glücklich sind die, die den Wert erkennen – und wertschätzen.
    „Muss man machen wie beim Zahnarzt. Der bestraft einen auch mit hohen Rechnungen wenn man die Pflege vernachlässigt.”

  8. #8
    Contao-Fan Avatar von rusty
    Registriert seit
    07.02.2012.
    Ort
    Hamburg
    Beiträge
    268

    Standard

    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.

  9. #9
    AG Pressearbeit
    Community-Moderator
    Buchautor 'Contao für Webdesigner'
    Avatar von planepix
    Registriert seit
    05.06.2009.
    Ort
    Stuttgart
    Beiträge
    6.529
    Partner-ID
    107
    Contao-Projekt unterstützen

    Support Contao

    Beitrag

    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
    ---------------------------------
    Beste Grüße planepix
    Contao für Webdesigner (Website), Twitter: @contaowebdesign
    weitzeldesign
    Contao-Sprechstunde
    Contao Schulungen: https://www.weitzeldesign.com/cms-co...chulungen.html
    Contao Jahrbuch: www.contao-jahrbuch.de
    Contao Agenturtag: www.contao-agenturtag.de
    Contao Stammtisch Stuttgart: www.contao-stammtisch-stuttgart.de
    Contao 4 Erfahrungen als Gitbook: https://app.gitbook.com/@planepix/s/...-mit-contao-4/
    Contao 4 & Manager Hosterhinweise: https://github.com/contao/contao-manager/wiki

    Schon wieder ein Update?
    Glücklich sind die, die den Wert erkennen – und wertschätzen.
    „Muss man machen wie beim Zahnarzt. Der bestraft einen auch mit hohen Rechnungen wenn man die Pflege vernachlässigt.”

  10. #10
    Contao-Fan Avatar von rusty
    Registriert seit
    07.02.2012.
    Ort
    Hamburg
    Beiträge
    268

    Standard

    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.

  11. #11
    AG Pressearbeit
    Community-Moderator
    Buchautor 'Contao für Webdesigner'
    Avatar von planepix
    Registriert seit
    05.06.2009.
    Ort
    Stuttgart
    Beiträge
    6.529
    Partner-ID
    107
    Contao-Projekt unterstützen

    Support Contao

    Standard

    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;    
    }
    Geändert von planepix (14.03.2023 um 21:40 Uhr)
    ---------------------------------
    Beste Grüße planepix
    Contao für Webdesigner (Website), Twitter: @contaowebdesign
    weitzeldesign
    Contao-Sprechstunde
    Contao Schulungen: https://www.weitzeldesign.com/cms-co...chulungen.html
    Contao Jahrbuch: www.contao-jahrbuch.de
    Contao Agenturtag: www.contao-agenturtag.de
    Contao Stammtisch Stuttgart: www.contao-stammtisch-stuttgart.de
    Contao 4 Erfahrungen als Gitbook: https://app.gitbook.com/@planepix/s/...-mit-contao-4/
    Contao 4 & Manager Hosterhinweise: https://github.com/contao/contao-manager/wiki

    Schon wieder ein Update?
    Glücklich sind die, die den Wert erkennen – und wertschätzen.
    „Muss man machen wie beim Zahnarzt. Der bestraft einen auch mit hohen Rechnungen wenn man die Pflege vernachlässigt.”

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •