| Home | Hilfe | Add-Ons | Templates | Spenden | Impressum | Datenschutz |

WBCE CMS Forum

WBCE CMS – Way Better Content Editing.

You are not logged in.

Pages: 1

#1 02.04.2020 12:47:08

peitman
Member

News als Slider/Carousel

Hallo zusammen,

gibt es eine Möglichkeit die News in Form eines Sliders oder Carousel darzustellen?

Auf der Startseite soll ein Feld sein mit Foto, Anreiser und "weiter" Button. Da keine Unmengen von News/Aktuelles anfallen, wäre es auch Denkbar für jede Meldung eine eigene Seite anzulegen, welche dann über den "weiter" Button geöffnet wird.
Wäre das mit items möglich?

Grüße
dp

Webdesign ist der Prozess der Erstellung einer Website.  cool

Offline

#2 02.04.2020 13:05:05

florian
Administrator

Re: News als Slider/Carousel

Wenn das eine WBCE-Seite ist, kannst Du dafür das Modul News with Images in Kombination mit NWI anywhere verwenden. D.h. es gibt eine (Unter-)Seite Aktuelles mit einem NWI-Abschnitt, wo du wie gewohnt Beiträge erstellst mit Bild, Überschrift, Kurztext, Langtext, und auf der Startseite bindest Du dann per Droplet oder Code2 einen angepassten NWI anywhere-Aufruf ein. Der "Display Mode" Nr. 4 von NWI anywhere hat bereits ein Sliderscript eingebaut.
Ausführliche Infos zu NWI anywhere hier: https://github.com/WBCE/news_img_anywhere

Alternativ kann das mit OneForAll / OfA anywhere analog umgesetzt werden.

Eine Umsetzung mit Einzelseiten ist nicht so ohne weiteres möglich.
Das Modul Itemz wurde auf ausdrücklichen Wunsch des Autors aus dem Add-On-Repository entfernt und ist nicht mehr verfügbar.

Sorgen sind wie Nudeln: man macht sich meist zu viele.

Offline

#3 02.04.2020 13:14:12

peitman
Member

Re: News als Slider/Carousel

Hallo Florian,
ja es ist eine WBCE Seite.
Bezüglich Droplet oder Code2 bin ich unwissend!
Gibt des da eine Dokumentation/Anleitung?

Webdesign ist der Prozess der Erstellung einer Website.  cool

Offline

#4 02.04.2020 13:19:52

florian
Administrator

Re: News als Slider/Carousel

Du legst auf der Startseite einen Abschnitt vom Typ Code2 / PHP an und fügst da dann z.B. ein

$config = array(
	'group_id_type' => 'section_id',
	'group_id' => 8,
	'display_mode' => 4,
);
echo getImageNewsItems($config);

oder eben einen entspr. Doplet-Aufruf ganz normal in einem WYSIWYG-Abschnitt
[[getImageNewsItems?group_id=8&display_mode=4]]

Siehe https://github.com/WBCE/news_img_anywhere

Sorgen sind wie Nudeln: man macht sich meist zu viele.

Offline

#5 02.04.2020 13:30:48

peitman
Member

Re: News als Slider/Carousel

Danke

Webdesign ist der Prozess der Erstellung einer Website.  cool

Offline

#6 03.04.2020 13:46:42

peitman
Member

Re: News als Slider/Carousel

Ich brauche noch einmal Hilfe bitte!
Alles gemacht wie beschrieben, jetzt 4 News angelegt, eine wird auf der Startseite angezeigt aber ich verstehe einfach nicht wie ich den Slider eingebunden bekomme!
'display_mode' => 4, ruft ja eigentlich den Flexslider auf. Dann werden aber die News (3 von 4) untereinanander als Liste angezeigt!

Muss ich ein Template hinzufügen?

Des Weiteren hätte ich gerne auch das Vorschaubild dann im Slider mit drin!

Vorab schon mal Danke

Webdesign ist der Prozess der Erstellung einer Website.  cool

Offline

#7 03.04.2020 15:41:36

giz
Member

Re: News als Slider/Carousel

das liegt daran: codefehler
deshalb werden die für die slider notwendigen dateien nicht eingebunden; du kannst diese aber behelfsweise manuell im template einbinden, bis der fehler gefixt ist.


Edit: Linkfehler gefixt

Last edited by giz (03.04.2020 16:18:41)

WBCE 1.6.3 - Fraggy 2.7.1 - PHP 8.3.14- All-inkl
Ein Leben ohne Hund ist möglich, aber sinnlos

Online

#8 03.04.2020 15:58:17

florian
Administrator

Re: News als Slider/Carousel

@giz Yep, korrekter Link wäre https://forum.wbce.org/viewtopic.php?id=3540

@peitman
D.h. konkret:
Verwende Displaymode 3 und ändere die display_mode_3.htt zu

<link rel="stylesheet" type="text/css" href="{{ WB_URL }}/modules/news_img_anywhere/thirdparty/liquidslider/css/liquid-slider.css" />
<link rel="stylesheet" type="text/css" href="{{ WB_URL }}/modules/news_img_anywhere/css/liquid-slider-custom.css" />
<script type="text/javascript" src="{{ WB_URL }}/modules/news_img_anywhere/thirdparty/liquidslider/js/jquery.easing.min.js"></script>
<script type="text/javascript" src="{{ WB_URL }}/modules/news_img_anywhere/thirdparty/liquidslider/js/jquery.touchSwipe.min.js"></script>
<script type="text/javascript" src="{{ WB_URL }}/modules/news_img_anywhere/thirdparty/liquidslider/js/jquery.liquid-slider.min.js"></script>
<script type="text/javascript" src="{{ WB_URL }}/modules/news_img_anywhere/javascript/liquid-slider-config.js"></script>


<div class="mod_nia">
	<h2>{{ lang.TXT_HEADER }}</h2>
	
	{% if newsItems %}
		<div class="liquid-slider" id="nia-liquid-slider">
			{% for news in newsItems %}
				{% if news.TS_POSTED_WHEN > 0 %}
					<div>
						<h4>{{ news.TITLE }}</h4>
						<img src="{{ news.IMAGE }}" style="float:left; margin-right:10px"/>	
						{{ news.CONTENT_SHORT }}
						{% if news.CONTENT_LONG %}
							<a href="{{ news.LINK }}">{{ lang.TXT_READMORE }}</a>
						{% endif %}
					</div>
				{% endif %}
			{% endfor %}
		</div>
	
	{% else %}
		{{ lang.TXT_NO_NEWS }}
	{% endif %}
</div>

Analog könntest Du display_mode_4.htt anpassen. Allerdings gibt es mit dem Flexslider zumindest in WBCEZon einen unerwünschten Versprung (die Slides sind nicht vollständig sichtbar, sondern jeweils um 50px versetzt.

Oder Du baust nach diesem Muster einen anderen Slider ein, z.B. den hier
https://www.jqueryscript.net/slider/Bas … lider.html

Dafür:

1. Lade die textslider.zip aus dem Anhang herunter, entpacke sie lokal und kopiere die Daten nach /modules/news_img/thirdparty, so dass es dort also neben den bereits vorhandenen Verzeichnissen flexslider und liquidslider ein weiteres Verzeichnis textslider gibt.

2. Lege eine display_mode_5.htt an mit folgendem Inhalt:

<link rel="stylesheet" type="text/css" href="{{ WB_URL }}/modules/news_img_anywhere/thirdparty/textslider/css/style.css" />
<script type="text/javascript" src="{{ WB_URL }}/modules/news_img_anywhere/thirdparty/textslider/js/text-slider.js"></script>



<div class="mod_nia">
	<h2>{{ lang.TXT_HEADER }}</h2>
	
	{% if newsItems %}
		<div class="slide">
				
					
				{% for news in newsItems %}
					{% if news.TS_POSTED_WHEN > 0 %}
					<div class="slider-item">
						
							<h2>{{ news.TITLE }}</h2>
							<img src="{{ news.IMAGE }}" style="float:left; margin-right:10px"/>	
							{{ news.CONTENT_SHORT }}
							{% if news.CONTENT_LONG or news.HASGALLERYIMAGES %}
								<a href="{{ news.LINK }}">{{ lang.TXT_READMORE }}</a>
							{% endif %}
						</div>
					{% endif %}
				{% endfor %}
			
		</div>
	
	{% else %}
		{{ lang.TXT_NO_NEWS }}
	{% endif %}

</div>

<script>
$('.slide').textSlider({

timeout: 5000,
slideTime: 750,
loop: 1

});
</script>

3. Rufe NWI anywhere dann mit dem Parameter 'display_mode' => 5 auf.

Sorgen sind wie Nudeln: man macht sich meist zu viele.

Offline

#9 06.04.2020 10:45:24

peitman
Member

Re: News als Slider/Carousel

Hallo Florian,
ich habe die erste Lösung verwendet. Klappt super.
Vielen Dank und bleib gesund.
Gruß dp

Last edited by peitman (06.04.2020 12:15:42)

Webdesign ist der Prozess der Erstellung einer Website.  cool

Offline

Pages: 1

Board footer

up