Header Slideshow erstellen

KSchimmel · 13. Mai 2019

Guten Morgen liebes Forum,

ich betreibe die Seite http://www.reifenscheuermann.de mit Joomla und einem Template von Joomlaplates.

Es geht darum im Header eine Slideshow einzufügen, am besten mit Buttons für "vorheriges- und nächstes Bild" und so das man hinter jedem Bild einen Link hinterlegen kann um dieses anzuklicken.

Nun habe ich schon versucht im Header eine Art Modulposition einzufügen um einfach ein Modul dort einzufügen, dies funktioniert aber anscheinend nicht.

Weiterhin habe ich probiert eine Gif-Datei zu erstellen und diese dann dort einzufügen, dies geht aber nur mit einer sehr geringen Auflösung und die Ladezeiten sind inakzeptabel.

Ich wäre über Vorschläge / Ideen oder gar Lösungen Dankbar! Gerne auch gegen einen Unkostenbeitrag!

Vielen Dank im Voraus und viele Grüße

Kevin

time4mambo · 13. Mai 2019

Zitat von KSchimmel

Gerne auch gegen einen Unkostenbeitrag!

Sowas ist hier unerwünscht!

Das hier ist ein Forum mit Hilfe zur Selbsthilfe! (Ausserdem sind Unkosten keine Kosten. Kosten sind Kosten. Un-Kosten gibts nicht

Imageslider findest du zu Hauf in der JED!

Mögliche Positionen siehst du hier:

https://www.reifenscheuermann.de/?tp=1

Wobei ich das Hintergrundbild im Header wegmachen und stattdessen im Template diese Zeile einfügen würde:

Code

<jdoc:include type="modules" name="kopf" style="none" />

Axel

KSchimmel · 13. Mai 2019

Vielen Dank für die schnelle Antwort!

Ok, wollte damit lediglich ausdrücken das ich gerne bereit bin eine gewisse Gegenleistung zu erbringen.

Den Imageslide zu finden ist nicht das Problem! Ich weiß nur nicht wie ich den dann als "Header" bzw. an dieser Position einbinden kann?! Denn eine "Header-Position" gibt es ja da nicht?!

Und welchen Vorteil habe ich denn wenn ich diese Zeile einfüge gegenüber dem jetzigen Bild?

Bzw. was ist da der Unterschied?

Sorry, aber ich habe leider von der eigentlichen Programmierung nicht viel Ahnung...

time4mambo · 13. Mai 2019

Zitat von KSchimmel

Ok, wollte damit lediglich ausdrücken das ich gerne bereit bin eine gewisse Gegenleistung zu erbringen.

Das sehen wir auch tatsächlich sehr gern! In Form deiner eigenen Beteiligung in diesem Forum und der Hilfe bei Fragestellern beispielsweise. Oder Mitarbeit bei Joomla.de oder Joomla.org. Es gibt überall was zu tun und helfende Hände und Gehirnzellen sind immer gefragt

Zitat

Sorry, aber ich habe leider von der eigentlichen Programmierung nicht viel Ahnung...

Das ist gut, da du keine Ahnung von Programmiereung haben musst

Meine Zeile macht nichts anderes, als eine Position zum Template mit dem Namen "kopf" hinzuzufügen. Du hast derzeit im Header drei Positionen. Eine ist nach links ausgerichtet (toolbar-l) und eine ist nach rechts ausgerichtet (toolbar-r). Du kannst mehrmals die gleiche Position benutzen. In aller Regel werden dann die Module nebeneinander (so wie bei dir im GHeader mit zwei Modulen auf toolbar-r) oder untereinander angezeigt (bei dir in sidebar-b zu sehen).

Du hast im Header noch die beiden Positionen "logo" und "banner". Beide sind nicht optimal für einen Imageslider und haben auch eine andere Aufgabe. "logo" wird zu klein sein und "banner" ist nicht nach oben ausgerichtet - bedeutet, dass der Imagesider erst unter den vorhanenden Modulen angezeigt wird - und eventuell auch nicht linksbündig.

Mein Vorschlag ist es daher, eine neue Position zufügen. Musst du aber ausprobieren.

Generell ein paar mehr Worte zu Postionen im Template findest du in diesem Tutorial (etwas weiter unten):

https://www.time4joomla.de/joo…in-joomla-16.html?start=1

Axel

KSchimmel · 13. Mai 2019

Also gut, vielen Dank schonmal!

Genau das beschreibt es eigentlich treffend! Genauso hatte ich mir das vorgestellt einfach eine Position einzufügen um dort die Slideshow einzufügen!

Ich werde das testen!

Kannst du mir vielleicht noch sagen in welche Datei ich die Codezeile einfügen muss?

style.css?

time4mambo · 13. Mai 2019

In der index.php des verwendeten Templates und versuche mal statt dieser Zeile:

Code

<div class="top-outer uk-cover-background">

Diesen Code zu schreiben:

Code

<div class="">
<jdoc:include type="modules" name="kopf" style="none" />

Vielleicht funktioniert das dann schon. Wenn nicht, trotzdem so stehen lassen - dann können wir hier mal schauen...

Musst aber natürlöich einen Slider dann an der Position "kopf" veröffentlichen.

Axel

KSchimmel · 13. Mai 2019

Danke für die Antwort!

Ich habe es gerade versucht, leider sieht meine Index.php wie folgt aus: (siehe Anhang)

Verweist diese Datei auf diese warp.php?

Bzw. wo genau werden denn diese Modulpositionen dann bei mir festgelegt?

Wo muss ich den Code einfügen?

time4mambo · 13. Mai 2019

Yootheme hat ein eigenes Framework - von dem ich keine Ahnung habe, da ich das seit Jahren schon nicht mehr benutze. Tut mir Leid, da musst selber die richtige Datei suchen, wo der Code erzeugt wird. Oder hier kommt ein Kollege/in vorbei, die dir weiterhelfen kann.

Axel

KSchimmel · 13. Mai 2019

Ok, trotzdem vielen Dank!

Hast du evtl. eine Idee bzw. einen Tipp wie ich die entsprechende Datei finden könnte?
Oder nach was ich am besten googeln sollte?!

KSchimmel · 13. Mai 2019

Ich habe die templateDetails.xml gefunden, in dieser sind anscheinend die Modulpositionen festgelegt. (siehe Anhang).

Nur mit dem Code von dir erscheint keine neue Position.

Weiß evtl. jemand was ich hierzu schreiben muss um die gewünschte Position hinzuzufügen?

Vielen Dank im Voraus!

Kevin

Re:Later · 13. Mai 2019

Zitat von KSchimmel

Ich habe die templateDetails.xml gefunden

Die hat nur die Wirkung, dass du die Position dann im Modul "Position" auswählen kannst. Das macht aber keinen Sinn, so lange sie im Template-PHP nicht ebenfalls angelegt ist.

Kann dir nicht versprechen, dass die Anleitung (bei der mir schwindelig wird, weil Joomla das ohne so Kokolores von alleine könnte mit Zeile von @time4mambo ) für deine Warp-Version passend ist.

https://yootheme.com/support/w…a/widget-module-positions

Die PHP-Datei scheint wohl /layouts/theme.php zu sein.

KSchimmel · 13. Mai 2019

Ja, da habe ich mich gerade durchgekämpft, allerdings werde ich daraus nicht wirklich schlau.

Die Position kann ich nun auswählen im Admin-Bereich. Allerdings wird es nirgends auf der Seite angezeigt.

Sollte ich mir vielleicht einfach ein anderes Template kaufen?!

Oder was empfehlt ihr mir?

Re:Later · 13. Mai 2019

Zitat von KSchimmel

Sollte ich mir vielleicht einfach ein anderes Template kaufen?!

Weiß auch nicht. Wir sind halt "Profis" und kommen dann schon irgendwie klar, wenn wir so ein Template im Kundenauftrag "machen müssen". Heißt aber nicht, dass wir dann nicht auch "im Objekt" erst mal graben müssen

Zitat von KSchimmel

Gerne auch gegen einen Unkostenbeitrag!

So Anfragen sind im Forum selbst unerwünscht und faire Helfer respektieren das auch (also bieten sich hier nicht an):

Dienstleister findest du hier:

https://www.joomla.de/dienstleister

Hier weitere, die teils andere sind:

https://www.fc-hosting.de/info/partner.php

Elwood · 13. Mai 2019

Für dein gekauftes Template jp-classic gibt es doch eine gute Dokumentation.

Dort findest du alle Modulpositionen und auch die Angaben zur Slideshow.

Wenn nicht, melde dich nochmal.

KSchimmel · 13. Mai 2019

Ja, da liegt ja das Problem.
Der Header hat leider keine eigene Position, das ist quasi "ein Bild".

Und wie ich dort eine Position eingefügt bekomme weiß ich (auch nach intensiver google-Recherche) leider nicht.

Ich bin um jeden Ratschlag dankbar!

Elwood · 13. Mai 2019

Wenn du das Bild rausnimmst und auf der Modulposition 'Logo' die Slideshow setzt?

KSchimmel · 13. Mai 2019

Das geht leider nicht, da die Position Logo eine kleine Auflösung bzw. sich eben nicht so groß zieht wie der Header. Hatte ich auch schon versucht.

Ist dann quasi "Visitenkartenformat als Header".

time4mambo · 14. Mai 2019

Pinne doch bitte mal hier die theme.php an oder auch andere Dateien. Dann können wir mal rein schauen und dir eventuell weiterhelfen.

Die templateDetail.xml, wie es dir Re:Later schon schrieb, sorgt lediglich dafür, dass du die Position dann bei den Modulen auswählen kannst - macht aber keine neue Position ins Template.

Grundsätzlich hast du auch Support, wenn du für das Template bezahlt hast. Frag da doch mal nach, wie du eine neue Position ins Template bekommst. Ansich sind die von Jootheme nett und helfen auch.

Axel

Elwood · 14. Mai 2019

In der Doku wird noch top-a als Slideshow ausgegeben.

Ansonsten würde ich ein anderes Template wählen:

Template gesucht? Joe's Liste >>

KSchimmel · 14. Mai 2019

Hallo time4mambo, anbei die gewünschte Datei.

Den Support habe ich leider schon kontaktiert, die haben mir gesagt, dass das bei diesem Template nicht gedacht ist und ich solle doch bitte ein anderes mit integrierter Slideshow kaufen.

Daher dachte ich ich frage hier mal nach, da ich mit dem jetzigen Template sehr zufrieden bin und auch recht lange gebraucht habe das anzupassen wie ich es wollte.

Danke, Elwood!

PHP

<?php
/**
* @package   yoo_master2
* @author    YOOtheme http://www.yootheme.com
* @copyright Copyright (C) YOOtheme GmbH
* @license   http://www.gnu.org/licenses/gpl.html GNU/GPL
*/

// get theme configuration
include($this['path']->path('layouts:theme.config.php'));

?>
<!DOCTYPE HTML>
<html lang="<?php echo $this['config']->get('language'); ?>" dir="<?php echo $this['config']->get('direction'); ?>"  data-config='<?php echo $this['config']->get('body_config','{}'); ?>'>

<head>
<?php echo $this['template']->render('head'); ?>
<style type="text/css">
<?php if ($this['config']->get('topbar')) : ?>
.top-outer {background-image:url(<?php echo $this['config']->get('site_url'); ?>/<?php echo $this['config']->get('topbar-image'); ?>)}
<?php endif; ?>
.top-outer {background-color:<?php echo $this['config']->get('topbar-color'); ?>}
</style>

</head>

<body class="<?php echo $this['config']->get('body_classes'); ?>">

    <div class="top-outer uk-cover-background">
        <div class="uk-container uk-container-center no-space">
            <?php if ($this['widgets']->count('toolbar-l + toolbar-r')) : ?>
            <div class="tm-toolbar uk-clearfix uk-hidden-small no-space <?php echo $this['config']->get('topbar-text-color'); ?>">

                <?php if ($this['widgets']->count('toolbar-l')) : ?>
                <div class="uk-float-left"><?php echo $this['widgets']->render('toolbar-l'); ?></div>
                <?php endif; ?>

                <?php if ($this['widgets']->count('toolbar-r')) : ?>
                <div class="uk-float-right"><?php echo $this['widgets']->render('toolbar-r'); ?></div>
                <?php endif; ?>

            </div>
            <?php endif; ?>

            <?php if ($this['widgets']->count('logo + banner')) : ?>
            <div class="tm-headerbar uk-clearfix uk-hidden-small">

                <?php if ($this['widgets']->count('logo')) : ?>
                <a class="tm-logo" href="<?php echo $this['config']->get('site_url'); ?>"><?php echo $this['widgets']->render('logo'); ?></a>
                <?php endif; ?>

                <?php echo $this['widgets']->render('banner'); ?>

            </div>
            <?php endif; ?>

            <?php if ($this['widgets']->count('menu + search')) : ?>
            <nav style="margin-bottom:0" class="tm-navbar uk-navbar" <?php if ($this['config']->get('fixed_navigation')) : ?>data-uk-sticky="{top:-300, animation: 'uk-animation-slide-top'}"<?php endif; ?>>

                <?php if ($this['widgets']->count('menu')) : ?>
                <?php echo $this['widgets']->render('menu'); ?>
                <?php endif; ?>

                <?php if ($this['widgets']->count('offcanvas')) : ?>
                <a href="#offcanvas" class="uk-navbar-toggle uk-visible-small" data-uk-offcanvas></a>
                <?php endif; ?>

                <?php if ($this['widgets']->count('search')) : ?>
                <div class="uk-navbar-flip">
                    <div class="uk-navbar-content uk-visible-large"><?php echo $this['widgets']->render('search'); ?></div>
                </div>
                <?php endif; ?>

                <?php if ($this['widgets']->count('logo-small')) : ?>
                <div class="uk-navbar-content uk-navbar-center uk-visible-small"><a class="tm-logo-small" href="<?php echo $this['config']->get('site_url'); ?>"><?php echo $this['widgets']->render('logo-small'); ?></a></div>
                <?php endif; ?>

            </nav>
            <?php endif; ?>
        </div>
    </div>
    
    <div class="uk-container uk-container-center">

        <?php if ($this['widgets']->count('top-a')) : ?>
        <section class="<?php echo $grid_classes['top-a']; echo $display_classes['top-a']; ?>" data-uk-grid-match="{target:'> div > .uk-panel'}" data-uk-grid-margin><?php echo $this['widgets']->render('top-a', array('layout'=>$this['config']->get('grid.top-a.layout'))); ?></section>
        <?php endif; ?>

        <?php if ($this['widgets']->count('top-b')) : ?>
        <section class="<?php echo $grid_classes['top-b']; echo $display_classes['top-b']; ?>" data-uk-grid-match="{target:'> div > .uk-panel'}" data-uk-grid-margin><?php echo $this['widgets']->render('top-b', array('layout'=>$this['config']->get('grid.top-b.layout'))); ?></section>
        <?php endif; ?>
        <?php if ($this['widgets']->count('top-c')) : ?>
        <section class="<?php echo $grid_classes['top-c']; echo $display_classes['top-c']; ?>" data-uk-grid-match="{target:'> div > .uk-panel'}" data-uk-grid-margin><?php echo $this['widgets']->render('top-c', array('layout'=>$this['config']->get('grid.top-c.layout'))); ?></section>
        <?php endif; ?>
        <?php if ($this['widgets']->count('top-d')) : ?>
        <section class="<?php echo $grid_classes['top-d']; echo $display_classes['top-d']; ?>" data-uk-grid-match="{target:'> div > .uk-panel'}" data-uk-grid-margin><?php echo $this['widgets']->render('top-d', array('layout'=>$this['config']->get('grid.top-d.layout'))); ?></section>
        <?php endif; ?>
        <?php if ($this['widgets']->count('main-top + main-bottom + sidebar-a + sidebar-b') || $this['config']->get('system_output', true)) : ?>
        <div class="tm-middle uk-grid" data-uk-grid-match data-uk-grid-margin>

            <?php if ($this['widgets']->count('main-top + main-bottom') || $this['config']->get('system_output', true)) : ?>
            <div class="<?php echo $columns['main']['class'] ?>">

                <?php if ($this['widgets']->count('main-top')) : ?>
                <section class="<?php echo $grid_classes['main-top']; echo $display_classes['main-top']; ?>" data-uk-grid-match="{target:'> div > .uk-panel'}" data-uk-grid-margin><?php echo $this['widgets']->render('main-top', array('layout'=>$this['config']->get('grid.main-top.layout'))); ?></section>
                <?php endif; ?>

                <?php if ($this['config']->get('system_output', true)) : ?>
                <main class="tm-content">

                    <?php if ($this['widgets']->count('breadcrumbs')) : ?>
                    <?php echo $this['widgets']->render('breadcrumbs'); ?>
                    <?php endif; ?>

                    <?php echo $this['template']->render('content'); ?>

                </main>
                <?php endif; ?>

                <?php if ($this['widgets']->count('main-bottom')) : ?>
                <section class="<?php echo $grid_classes['main-bottom']; echo $display_classes['main-bottom']; ?>" data-uk-grid-match="{target:'> div > .uk-panel'}" data-uk-grid-margin><?php echo $this['widgets']->render('main-bottom', array('layout'=>$this['config']->get('grid.main-bottom.layout'))); ?></section>
                <?php endif; ?>

            </div>
            <?php endif; ?>

            <?php foreach($columns as $name => &$column) : ?>
            <?php if ($name != 'main' && $this['widgets']->count($name)) : ?>
            <aside class="<?php echo $column['class'] ?>"><?php echo $this['widgets']->render($name) ?></aside>
            <?php endif ?>
            <?php endforeach ?>

        </div>
        <?php endif; ?>

        <?php if ($this['widgets']->count('bottom-a')) : ?>
        <section class="<?php echo $grid_classes['bottom-a']; echo $display_classes['bottom-a']; ?>" data-uk-grid-match="{target:'> div > .uk-panel'}" data-uk-grid-margin><?php echo $this['widgets']->render('bottom-a', array('layout'=>$this['config']->get('grid.bottom-a.layout'))); ?></section>
        <?php endif; ?>

        <?php if ($this['widgets']->count('bottom-b')) : ?>
        <section class="<?php echo $grid_classes['bottom-b']; echo $display_classes['bottom-b']; ?>" data-uk-grid-match="{target:'> div > .uk-panel'}" data-uk-grid-margin><?php echo $this['widgets']->render('bottom-b', array('layout'=>$this['config']->get('grid.bottom-b.layout'))); ?></section>
        <?php endif; ?>
        <?php if ($this['widgets']->count('bottom-c')) : ?>
        <section class="<?php echo $grid_classes['bottom-c']; echo $display_classes['bottom-c']; ?>" data-uk-grid-match="{target:'> div > .uk-panel'}" data-uk-grid-margin><?php echo $this['widgets']->render('bottom-c', array('layout'=>$this['config']->get('grid.bottom-c.layout'))); ?></section>
        <?php endif; ?>
        <?php if ($this['widgets']->count('bottom-d')) : ?>
        <section class="<?php echo $grid_classes['bottom-d']; echo $display_classes['bottom-d']; ?>" data-uk-grid-match="{target:'> div > .uk-panel'}" data-uk-grid-margin><?php echo $this['widgets']->render('bottom-d', array('layout'=>$this['config']->get('grid.bottom-d.layout'))); ?></section>
        <?php endif; ?>

        <?php if ($this['widgets']->count('footer + debug')) : ?>
        <footer class="tm-footer">
            <?php
                echo $this['widgets']->render('footer');
                echo $this['widgets']->render('debug');
            ?>
        </footer>
        <?php endif; ?>

    </div>

    <?php echo $this->render('footer'); ?>

    <?php if ($this['widgets']->count('offcanvas')) : ?>
    <div id="offcanvas" class="uk-offcanvas">
        <div class="uk-offcanvas-bar"><?php echo $this['widgets']->render('offcanvas'); ?></div>
    </div>
    <?php endif; ?>
    
    <?php if ($this['config']->get('totop_scroller', true)) : ?>
            <a class="tm-totop-scroller" data-uk-smooth-scroll href="#"></a>
    <?php endif; ?>


</body>
</html>

Alles anzeigen

Tags