Wikizone - Benutzerbeiträge [de]

Processwire - Vegas Slideshow

2017-06-07T08:47:08Z

91.33.206.179:

== Vegas Slideshow in Processwire Integrieren Beispiele ==
Siehe auch
* [[JavaScript - Vegas Slider]]

== Beispiel 1 ==

=== Header ===
<link rel="stylesheet" href="<?php echo $config->urls->templates?>vendors/vegas/vegas.min.css" type="text/css" media="screen">

=== Footer ===
<script src="<?php echo $config->urls->templates?>vendors/vegas/vegas.min.js" type="text/javascript" charset="utf-8"></script>

=== Main JavaScript ===
Wir prüfen ob die Funktion initVegas auf der Seite vorhanden ist bevor wir versuchen sie auszuführen. So gibt es keine Fehler auf Seiten, auf denen die Funktion nicht genutzt wird.
<syntaxhighlight lang="javascript">
(function($){ //create closure so we can safely use $ as alias for jQuery
$(document).ready(function(){
// init Vegas
if (ifNamespaceFunctionExists("initVegas") ) {// init Vegas Slider if av.
initVegas();
}
});
})(jQuery);

function ifNamespaceFunctionExists(myFnc){
//var myFnc = "foo.bar.fun";

var nameParts = myFnc.split("."); //split up the string into the different levels
var fnc = window; //set it to window
for(var i=0;i<nameParts.length;i++){ //loop through each level of the namespace
fnc = fnc[nameParts[i]];
if(!fnc){ //make sure it exists, if not exit loop
fnc = null;
break;
}
}
if( fnc && typeof fnc === "function" ) { //make sure it exists and it is a function
return true; //or execute it
}else return false;
}
</syntaxhighlight>

=== CSS ===
<syntaxhighlight lang="css">
.stretch-height{
position: relative;
height: 100%;
}

.nav-slider{
color: white;
width: 100%;
position: absolute;
top: 0;
bottom: 0;
z-index: 1;
}
.nav-slider .prev,
.nav-slider .next{
position: absolute;
top:0;
bottom: 0;
width:50%;
cursor: pointer;
}
.nav-slider .prev{
left: 0;
padding-left: 1em;
}
.nav-slider .next{
right: 0;
text-align: right;
padding-right: 1em;
}
.nav-slider i{
position: relative;
top: 50%;
margin-top: -2em;
}
</syntaxhighlight>

=== Processwire Template ===
<syntaxhighlight lang="php">
/*
* Vegas Slideshow
* creates markup for vegas slideshow inclusive script
*/
$out = '';
$slides = array();
$width = 1600; // todo -> make this accessible via textbox in admin

foreach($page->images as $image){
$myImage = $image->width($width);
$slides[] = '{ src: "'.$myImage->url.'" }';
}

$vegasMarkup = '<div class="col-md-12 vegas stretch-height"> </div>';
$vegasMarkup .= '
<script type="text/javascript">
function initVegas(){
$slider = $(".vegas");
$slider.vegas({
delay:7000,
timer:false,
transition: "fade",
transitionDuration: 750,
animation: "random",
slides: ['.implode($slides,',').']
});
$("span.next").click(function(){
$slider.vegas("options", "transition", "slideLeft2");
$slider.vegas("next");
$slider.vegas("options", "transition", "fade");
});
$("span.prev").click(function(){
$slider.vegas("options", "transition", "slideRight2");
$slider.vegas("previous");
$slider.vegas("options", "transition", "fade");
});
}
// if loaded via ajax call initVegas() after receiving data
</script>

';

/*
* Slide Navigation
*/
$navSlideMarkup = '
<div class="nav-slider">
<span class="prev"><i class="fa fa-angle-left fa-4x" aria-hidden="true"></i></span>
<span class="next"><i class="fa fa-angle-right fa-4x" aria-hidden="true"></i></span>
</div>';

$content = '';
$content = '
<div id="main" class="stretch-height">

'.$navSlideMarkup.'
<div class="row bg-image stretch-height">
'.$vegasMarkup.'
</div>



</div>' ;

</syntaxhighlight>

JavaScript - Vegas Slider

2017-06-07T08:03:30Z

91.33.206.179: /* Slide Navigation */

Siehe auch:
* [[Processwire - Vegas Slideshow]]

== Beispiel ==
<pre>
<script type="text/javascript">// <![CDATA[
var $slider;
jQuery( document ).ready(function( $ ) {
$slider = $(".vegas");
$slider.vegas({
preload: false,
preloadVideo: true,
delay:7000,
timer:false,
transition: "fade2",
transitionDuration: 1500,
animation: "random",
slides: [
{ src: "http://szenerie-events.de/images/vegas/Slide01.jpg" },
{ src: "http://szenerie-events.de/images/vegas/Slide02.jpg" },
{ src: "http://szenerie-events.de/images/vegas/Slide1.jpg" },
{ src: "http://szenerie-events.de/images/vegas/Slide2.jpg" },
{ src: "http://szenerie-events.de/images/vegas/Slide3.jpg" },
{ src: "http://szenerie-events.de/images/vegas/Slide4.jpg" },
{ src: "http://szenerie-events.de/images/vegas/Slide5.jpg" },
{ src: "http://szenerie-events.de/images/vegas/Slide6.jpg" },
{ src: "http://szenerie-events.de/images/vegas/Slide7.jpg" },
{ src: "http://szenerie-events.de/images/vegas/Slide8.jpg" },
{ src: "http://szenerie-events.de/images/vegas/Slide9.jpg" }
]
});
$('span.next').click(function(){
$slider.vegas('next');
});
$('span.prev').click(function(){
$slider.vegas('previous');
});
});
// ]]></script>
</pre>

== Tipps und Tricks ==

=== Slide Navigation ===

<syntaxhighlight lang="html5">

</syntaxhighlight>

<syntaxhighlight lang="javascript">
$('span.next').click(function(){
$slider.vegas('next');
});
$('span.prev').click(function(){
$slider.vegas('previous');
});
</syntaxhighlight>

== Documentation ==
<pre>
SETTINGS
Slideshow options and settings

OPTION DEFAULT DESCRIPTION
slide 0 Index number of initial slide.
preload false Preload both images and videos at start.
preloadImage false Preload images at start. preload must be false .
preloadVideo false Preload videos at start. preload must be false .
timer true Display/hide timer bar.
The timer class is .vegas-timer-progress .
overlay false Display/hide the overlay. Could be true false or the path of an overlay image pattern. These image can be found in the overlays folder. Read the Overlay section for more information.
autoplay true Start the Slideshow automatically.
loop true Loop the Slideshow.
shuffle false The array of slides is shuffled before.
delay 5000 Delay beetween slides in milliseconds.
cover true true the slide image is scaled to fit the container.
false the slide image is displayed entirely.
repeat the slide image is repeated.
color - Slide background color.
align center Horizontal alignment of the image in the slide.
Could be center top right bottom left or a percentage.
valign center Vertical alignment of the image in the slide.
Could be center top right bottom left or a percentage.
transition fade Set the transition between slides. Could be a transition name, random or an array of transition picked randomly.
Read the Transition section for more information.
transitionDuration 1000 Set the transition duration in milliseconds. Could be auto so the transition duration will be equal to the slide delay .
firstTransition - Set the transition for the first played slide. Could be a transition name, random or an array of transition picked randomly.
Read the Transition section for more information.
firstTransitionDuration - Set the transition duration in milliseconds for the first played slide. Could be auto so the transition duration will be equal to the slide delay .
transitionRegister - Add custom transitions to the transitions list available in random mode. Read the Transition section for more information.
animation - Set the animation of the slides. Could be an animation name, random or an array of transition picked randomly.
Read the Transition section for more information.
animationDuration auto Set the animation duration in milliseconds. Could be auto so the animation duration will be equal to the slide delay .
animationRegister - Add custom animations to the animations list available in random mode. Read the Transition section for more information.
slidesToKeep 1 Number of slides to keep in the background before removing it.
slides - Array of slides.
Read the option section for more information.
$elmt.vegas({
delay: 7000,
timer: false,
shuffle: true,
firstTransition: 'fade',
firstTransitionDuration: 5000,
transition: 'slideDown2',
transitionDuration: 2000,
slides: [
{ src: '/img/slide1.jpg' },
{ src: '/img/slide2.jpg' },
{ src: '/img/slide3.jpg' },
{ src: '/img/slide4.jpg' }
]
});
TEST THE CODE
Click the button to test the example.

RUN CODE
SLIDE SETTINGS
Specific slide options and settings.

OPTION DEFAULT DESCRIPTION
src - Path of the image.
video - Path of the video. Could be a string or an array of sources.
Read the Video section for more information.
delay 5000 Delay beetween slides in milliseconds.
cover true true the background image is scaled to fit the container.
false the background image is displayed entirely.
color - Slide background color.
align center Horizontal alignment of the image in the slide.
Could be center top right bottom left or a percentage.
valign center Vertical alignment of the image in the slide.
Could be center top right bottom left or a percentage.
transition fade Set the transition of this slide. Could be a transition name, random or an array of transition picked randomly.
Read the Transition section for more information.
transitionDuration 1000 Set the transition duration in milliseconds. Could be auto so the transition duration will be equal to the slide delay .
animation - Set the animation of this slide. Could be an animation name, random or an array of transition picked randomly.
Read the Transition section for more information.
animationDuration auto Set the animation duration in milliseconds. Could be auto so the animation duration will be equal to the slide delay .
$elmt.vegas({
timer: false,
transition: 'slideLeft2',
slides: [
{ src: '/img/slide1.jpg' },
{ src: '/img/slide2.jpg', transition: 'slideRight2' },
{ src: '/img/slide3.jpg' },
{ src: '/img/slide4.jpg', transition: 'slideRight2' }
]
});
TEST THE CODE
Click the button to test the example.

RUN CODE
CALLBACKS AND EVENTS
VEGAS provides callback functions and events triggers on init, play, pause and slide change.

OPTION EVENT DESCRIPTION
init vegasinit Function called when Vegas is applied to an element.
play vegasplay Function called when Vegas starts to play the slideshow.
pause vegaspause Function called when Vegas pauses the slideshow.
walk vegaswalk Function called when Vegas changes the slide.
end vegasend Function called when the Slideshow is completed (loop: false).
$elmt.vegas({
slides: [
{ src: '/img/slide1.jpg' },
{ src: '/img/slide2.jpg' },
{ src: '/img/slide3.jpg' },
{ src: '/img/slide4.jpg' }
],
init: function (globalSettings) {
console.log("Init");
},
play: function (index, slideSettings) {
console.log("Play");
},
walk: function (index, slideSettings) {
console.log("Slide index " + index + " image " + slideSettings.src);
}
});
TEST THE CODE
Click the button to test the example.

RUN CODE
$elmt.on('vegaspause', function (e, index, slideSettings) {
console.log("Pause on Slide index " + index);
});
OVERLAYS
Overlays are repeated dot pattern that can be applied to reduce artefact effects on scaled backgrounds.

$elmt.vegas({
slides: [
{ src: '/img/slide1.jpg' },
{ src: '/img/slide2.jpg' },
{ src: '/img/slide3.jpg' }
],
overlay: true
});
010203040506070809
The overlay class is.vegas-overlay .

VIDEOS
Experimental video support is providedAS A BONUS . Video backgrounds could not behave as expected on some browsers. Use it at your own risk :)

OPTION DEFAULT DESCRIPTION
video.src [] Array of videos files
video.loop true Loop the video
video.mute true Mute the sound of the video
$elmt.vegas({
slides: [
{ src: '/img/slide1.jpg' },
{ src: '/img/slide2.jpg',
video: {
src: [
'/videos/video.mp4',
'/videos/video.webm',
'/videos/video.ogv'
],
loop: false,
mute: true
}
}
]
});
TEST THE CODE
Click the button to test the example.

RUN CODE
Imagesrc is required for video slides as a fallback when videos cannot be played. The fallback image will be displayed instead. By default VEGAS excludes mobile devices.

$.vegas.isVideoCompatible = function () {
var devices = /(Android|webOS|Phone|iPad|iPod|BlackBerry|Windows Phone)/i;
return !devices.test(navigator.userAgent);
}
Override this function if needed.
</pre>

JavaScript - Vegas Slider

2017-06-07T06:41:04Z

91.33.206.179:

Siehe auch:
* [[Processwire - Vegas Slideshow]]

== Beispiel ==
<pre>
<script type="text/javascript">// <![CDATA[
var $slider;
jQuery( document ).ready(function( $ ) {
$slider = $(".vegas");
$slider.vegas({
preload: false,
preloadVideo: true,
delay:7000,
timer:false,
transition: "fade2",
transitionDuration: 1500,
animation: "random",
slides: [
{ src: "http://szenerie-events.de/images/vegas/Slide01.jpg" },
{ src: "http://szenerie-events.de/images/vegas/Slide02.jpg" },
{ src: "http://szenerie-events.de/images/vegas/Slide1.jpg" },
{ src: "http://szenerie-events.de/images/vegas/Slide2.jpg" },
{ src: "http://szenerie-events.de/images/vegas/Slide3.jpg" },
{ src: "http://szenerie-events.de/images/vegas/Slide4.jpg" },
{ src: "http://szenerie-events.de/images/vegas/Slide5.jpg" },
{ src: "http://szenerie-events.de/images/vegas/Slide6.jpg" },
{ src: "http://szenerie-events.de/images/vegas/Slide7.jpg" },
{ src: "http://szenerie-events.de/images/vegas/Slide8.jpg" },
{ src: "http://szenerie-events.de/images/vegas/Slide9.jpg" }
]
});
$('span.next').click(function(){
$slider.vegas('next');
});
$('span.prev').click(function(){
$slider.vegas('previous');
});
});
// ]]></script>
</pre>

== Tipps und Tricks ==

=== Slide Navigation ===
<syntaxhighlight lang="html5">

</syntaxhighlight>

<syntaxhighlight lang="javascript">
$('span.next').click(function(){
$slider.vegas('next');
});
$('span.prev').click(function(){
$slider.vegas('previous');
});
</syntaxhighlight>

== Documentation ==
<pre>
SETTINGS
Slideshow options and settings

OPTION DEFAULT DESCRIPTION
slide 0 Index number of initial slide.
preload false Preload both images and videos at start.
preloadImage false Preload images at start. preload must be false .
preloadVideo false Preload videos at start. preload must be false .
timer true Display/hide timer bar.
The timer class is .vegas-timer-progress .
overlay false Display/hide the overlay. Could be true false or the path of an overlay image pattern. These image can be found in the overlays folder. Read the Overlay section for more information.
autoplay true Start the Slideshow automatically.
loop true Loop the Slideshow.
shuffle false The array of slides is shuffled before.
delay 5000 Delay beetween slides in milliseconds.
cover true true the slide image is scaled to fit the container.
false the slide image is displayed entirely.
repeat the slide image is repeated.
color - Slide background color.
align center Horizontal alignment of the image in the slide.
Could be center top right bottom left or a percentage.
valign center Vertical alignment of the image in the slide.
Could be center top right bottom left or a percentage.
transition fade Set the transition between slides. Could be a transition name, random or an array of transition picked randomly.
Read the Transition section for more information.
transitionDuration 1000 Set the transition duration in milliseconds. Could be auto so the transition duration will be equal to the slide delay .
firstTransition - Set the transition for the first played slide. Could be a transition name, random or an array of transition picked randomly.
Read the Transition section for more information.
firstTransitionDuration - Set the transition duration in milliseconds for the first played slide. Could be auto so the transition duration will be equal to the slide delay .
transitionRegister - Add custom transitions to the transitions list available in random mode. Read the Transition section for more information.
animation - Set the animation of the slides. Could be an animation name, random or an array of transition picked randomly.
Read the Transition section for more information.
animationDuration auto Set the animation duration in milliseconds. Could be auto so the animation duration will be equal to the slide delay .
animationRegister - Add custom animations to the animations list available in random mode. Read the Transition section for more information.
slidesToKeep 1 Number of slides to keep in the background before removing it.
slides - Array of slides.
Read the option section for more information.
$elmt.vegas({
delay: 7000,
timer: false,
shuffle: true,
firstTransition: 'fade',
firstTransitionDuration: 5000,
transition: 'slideDown2',
transitionDuration: 2000,
slides: [
{ src: '/img/slide1.jpg' },
{ src: '/img/slide2.jpg' },
{ src: '/img/slide3.jpg' },
{ src: '/img/slide4.jpg' }
]
});
TEST THE CODE
Click the button to test the example.

RUN CODE
SLIDE SETTINGS
Specific slide options and settings.

OPTION DEFAULT DESCRIPTION
src - Path of the image.
video - Path of the video. Could be a string or an array of sources.
Read the Video section for more information.
delay 5000 Delay beetween slides in milliseconds.
cover true true the background image is scaled to fit the container.
false the background image is displayed entirely.
color - Slide background color.
align center Horizontal alignment of the image in the slide.
Could be center top right bottom left or a percentage.
valign center Vertical alignment of the image in the slide.
Could be center top right bottom left or a percentage.
transition fade Set the transition of this slide. Could be a transition name, random or an array of transition picked randomly.
Read the Transition section for more information.
transitionDuration 1000 Set the transition duration in milliseconds. Could be auto so the transition duration will be equal to the slide delay .
animation - Set the animation of this slide. Could be an animation name, random or an array of transition picked randomly.
Read the Transition section for more information.
animationDuration auto Set the animation duration in milliseconds. Could be auto so the animation duration will be equal to the slide delay .
$elmt.vegas({
timer: false,
transition: 'slideLeft2',
slides: [
{ src: '/img/slide1.jpg' },
{ src: '/img/slide2.jpg', transition: 'slideRight2' },
{ src: '/img/slide3.jpg' },
{ src: '/img/slide4.jpg', transition: 'slideRight2' }
]
});
TEST THE CODE
Click the button to test the example.

RUN CODE
CALLBACKS AND EVENTS
VEGAS provides callback functions and events triggers on init, play, pause and slide change.

OPTION EVENT DESCRIPTION
init vegasinit Function called when Vegas is applied to an element.
play vegasplay Function called when Vegas starts to play the slideshow.
pause vegaspause Function called when Vegas pauses the slideshow.
walk vegaswalk Function called when Vegas changes the slide.
end vegasend Function called when the Slideshow is completed (loop: false).
$elmt.vegas({
slides: [
{ src: '/img/slide1.jpg' },
{ src: '/img/slide2.jpg' },
{ src: '/img/slide3.jpg' },
{ src: '/img/slide4.jpg' }
],
init: function (globalSettings) {
console.log("Init");
},
play: function (index, slideSettings) {
console.log("Play");
},
walk: function (index, slideSettings) {
console.log("Slide index " + index + " image " + slideSettings.src);
}
});
TEST THE CODE
Click the button to test the example.

RUN CODE
$elmt.on('vegaspause', function (e, index, slideSettings) {
console.log("Pause on Slide index " + index);
});
OVERLAYS
Overlays are repeated dot pattern that can be applied to reduce artefact effects on scaled backgrounds.

$elmt.vegas({
slides: [
{ src: '/img/slide1.jpg' },
{ src: '/img/slide2.jpg' },
{ src: '/img/slide3.jpg' }
],
overlay: true
});
010203040506070809
The overlay class is.vegas-overlay .

VIDEOS
Experimental video support is providedAS A BONUS . Video backgrounds could not behave as expected on some browsers. Use it at your own risk :)

OPTION DEFAULT DESCRIPTION
video.src [] Array of videos files
video.loop true Loop the video
video.mute true Mute the sound of the video
$elmt.vegas({
slides: [
{ src: '/img/slide1.jpg' },
{ src: '/img/slide2.jpg',
video: {
src: [
'/videos/video.mp4',
'/videos/video.webm',
'/videos/video.ogv'
],
loop: false,
mute: true
}
}
]
});
TEST THE CODE
Click the button to test the example.

RUN CODE
Imagesrc is required for video slides as a fallback when videos cannot be played. The fallback image will be displayed instead. By default VEGAS excludes mobile devices.

$.vegas.isVideoCompatible = function () {
var devices = /(Android|webOS|Phone|iPad|iPod|BlackBerry|Windows Phone)/i;
return !devices.test(navigator.userAgent);
}
Override this function if needed.
</pre>

Processwire - Vegas Slideshow

2017-06-07T06:35:44Z

91.33.206.179:

Processwire - Vegas Slideshow

2017-06-07T06:35:14Z

91.33.206.179:

== Vegas Slideshow in Processwire Integrieren Beispiele ==
Siehe auch
* [[JavaScript - Vegas Slideshow]]
== Beispiel 1 ==
=== Header ===
<link rel="stylesheet" href="<?php echo $config->urls->templates?>vendors/vegas/vegas.min.css" type="text/css" media="screen">
=== Footer ===
<script src="<?php echo $config->urls->templates?>vendors/vegas/vegas.min.js" type="text/javascript" charset="utf-8"></script>
=== Main JavaScript ===
Wir prüfen ob die Funktion initVegas auf der Seite vorhanden ist bevor wir versuchen sie auszuführen. So gibt es keine Fehler auf Seiten, auf denen die Funktion nicht genutzt wird.
<syntaxhighlight lang="javascript">
(function($){ //create closure so we can safely use $ as alias for jQuery
$(document).ready(function(){
// init Vegas
if (ifNamespaceFunctionExists("initVegas") ) {// init Vegas Slider if av.
initVegas();
}
});
})(jQuery);

function ifNamespaceFunctionExists(myFnc){
//var myFnc = "foo.bar.fun";

var nameParts = myFnc.split("."); //split up the string into the different levels
var fnc = window; //set it to window
for(var i=0;i<nameParts.length;i++){ //loop through each level of the namespace
fnc = fnc[nameParts[i]];
if(!fnc){ //make sure it exists, if not exit loop
fnc = null;
break;
}
}
if( fnc && typeof fnc === "function" ) { //make sure it exists and it is a function
return true; //or execute it
}else return false;
}
</syntaxhighlight>
=== Processwire Template ===

Processwire - Vegas Slideshow

2017-06-06T15:40:10Z

91.33.206.179: Die Seite wurde neu angelegt: „== Vegas Slideshow in Processwire Integrieren Beispiele == == Beispiel 1 == === Header === <link rel="stylesheet" href="<?php echo $config->urls->templates?>…“

== Vegas Slideshow in Processwire Integrieren Beispiele ==

== Beispiel 1 ==
=== Header ===
<link rel="stylesheet" href="<?php echo $config->urls->templates?>vendors/vegas/vegas.min.css" type="text/css" media="screen">
=== Footer ===
<script src="<?php echo $config->urls->templates?>vendors/vegas/vegas.min.js" type="text/javascript" charset="utf-8"></script>
=== Main JavaScript ===
Wir prüfen ob die Funktion initVegas auf der Seite vorhanden ist bevor wir versuchen sie auszuführen. So gibt es keine Fehler auf Seiten, auf denen die Funktion nicht genutzt wird.
<syntaxhighlight lang="javascript">
(function($){ //create closure so we can safely use $ as alias for jQuery
$(document).ready(function(){
// init Vegas
if (ifNamespaceFunctionExists("initVegas") ) {// init Vegas Slider if av.
initVegas();
}
});
})(jQuery);

function ifNamespaceFunctionExists(myFnc){
//var myFnc = "foo.bar.fun";

var nameParts = myFnc.split("."); //split up the string into the different levels
var fnc = window; //set it to window
for(var i=0;i<nameParts.length;i++){ //loop through each level of the namespace
fnc = fnc[nameParts[i]];
if(!fnc){ //make sure it exists, if not exit loop
fnc = null;
break;
}
}
if( fnc && typeof fnc === "function" ) { //make sure it exists and it is a function
return true; //or execute it
}else return false;
}
</syntaxhighlight>
=== Processwire Template ===

ProcessWire - Snippets

2017-06-06T15:12:37Z

91.33.206.179: /* Copy and Paste */

== Basics ==
=== Bild in Template einbinden ===
<img src="<?php echo $config->urls->templates?>img/menu.png" alt="Home">

=== Link zu Seite ===
<a href="<?php echo $pages->get('/kontakt/')->url; ?>">
=== Wert aus Textfeld ===
<div class="<? echo $page->get("content_class")?>">
== Bilder ==
=== Advanced Image Manipulation ===
[[Processwire - Advanced Image Manipulation]]
=== Einzelbild einfügen ===
====Bild aus Backend als Hintergrund einfügen====
(Feldname hier: ''main_image'')
<syntaxhighlight lang="php">
if($page->main_image){$image = $page->main_image->size(640,960);}
else $image = NULL;
...
if($image){
echo "
<div class='a-3-4 team-image' style='background-image:url({$image->url})'>
<div>{$myContent}</div>
</div>
";
}
</syntaxhighlight>

=== n-tes Bild einfügen ===
$page->images->eq(1); // second image

=== Mehrere Bilder aus dem Backend ===
<syntaxhighlight lang="php">
$myImages='';
if(count($page->images)) {
foreach($page->images as $image) {
$myImages .= '<img class="img-responsive" src="'.$image->url.'">';
}
}
</syntaxhighlight>
'''Beispiel 2'''
<syntaxhighlight lang="php">
echo $page->images->implode(function($item) {
$large = $item->size(1200,800);
$thumb = $item->size(400,300);
return "<li><a href='$large->url'><img src='$thumb->url' alt='$item->description'></a></li>";
}, array('prepend' => '<ul>', 'append' => '</ul>'));
</syntaxhighlight>
==== Einfache Gallerie ====
<syntaxhighlight lang="php">
$gallery = '<div class="gallery">';
$images = $page->gallery;

// add thumbnail to gallery
if(count($page->thumbnail)){
$gallery .= '<a class="chocolat-image gallery-item" href="'.$page->thumbnail->url.'"><img src="'. $page->thumbnail->getThumb('thumbnail') .'" title="'. $image->description .'"></a>';
}

foreach($images as $image){
$gallery .= '<a class="chocolat-image gallery-item" href="'.$image->url.'"><img src="'. $image->getThumb('thumbnail') .'" title="'. $image->description .'"></a> ';
}
$gallery .= '</div>';
</syntaxhighlight>

=== Slider mit Processwire ===
[[Processwire - Slider]]

== File Uploads ==
[[ProcessWire - Uploads]]

== Navigation ==
[[ProcessWire - Navigation Snippets]]

== Seiten ==
http://processwire.com/api/variables/pages/
=== Inhalt einer Seite mit $page->get() ===
Beispiel
<syntaxhighlight lang="php">
<p>Visit us at:  <?php 
$contact = $pages->get("/about/contact/");
echo $contact->address;
?> </p>
</syntaxhighlight>
Kürzer:
<syntaxhighlight lang="php">
<p>Visit us at: <?=$pages->get("/about/contact/")->address?></p>
</syntaxhighlight>
=== Mehrere Seiten finden mit find() ===
"Featured" Checkbox im Backend angehakt.
<syntaxhighlight lang="php">
<ul> <?php 
$features = $pages->find("featured=1");
foreach($features as $feature)
echo "<li><a href='{$feature->url}'>{$feature->title}</a></li>";
?> </ul>
</syntaxhighlight>
Komplexere Beispiele

Limitiert, sortiert und in Unterverzeichnis
$pages->find("parent=/about/press/, featured=1, limit=3, sort=-date");
oder
$pages->get("/about/press/")->children("featured=1, limit=3, sort=-date");
Finde in Kategorie
$pages->get("/about/press/")->find("featured=1, limit=3, sort=-date");
Finde über Template
$pages->find("template=press_release, featured=1, limit=3, sort=-date");
Ausführliches Beispiel mit Ausgabe
<syntaxhighlight lang="php">
<ul> <?php 
$features = $pages->find("template=press_release, featured=1, limit=3, sort=-date");
foreach($features as $feature) {
echo "<li>" .
"<h3><a href='{$feature->url}'>{$feature->title}</a></h3>" .
"<span class='date'>{$feature->date}</span>" .
"<p>{$feature->summary}</p>" .
"</li>"; 
}
?></ul>
</syntaxhighlight>
== Felder ==
=== Ist ein Feld leer ? ===
if($page->summary_de) { ... }
// check whitespace
if(trim($page->summary_de)) { ... }

== Searchbar ==
<pre>

<form class='search' action='<?php echo $pages->get('template=search')->url; ?>' method='get'>
<input type='text' name='q' placeholder='Search' value='<?php echo $sanitizer->entities($input->whitelist('q')); ?>' />
<button type='submit' name='submit'>Search</button>
</form>

</pre>
== Editor Link ==
_main.php
<syntaxhighlight lang="php">
<div class="editor">
<?php
if($user->isLoggedin()) {
// if user is logged in, show a logout link
echo "<a href='{$config->urls->admin}login/logout/'>Logout ($user->name)</a>";
} else {
// if user not logged in, show a login link
echo "<a href='{$config->urls->admin}'>∆</a>";
}
// output an "Edit" link if this page happens to be editable by the current user
if($page->editable()) echo "<li class='edit nav'><a href='$page->editUrl'>Edit</a></li>";
?>
</div>
</syntaxhighlight>

== Conditions ==
=== Conditions für Navigation ===
<syntaxhighlight lang="php">
// If the page has children, then render navigation to them under the body.
// See the _func.php for the renderNav example function.
if($page->hasChildren) {
$content .= renderNav($page->children);
}
</syntaxhighlight>

<syntaxhighlight lang="php">
// if the rootParent (section) page has more than 1 child, then render
// section navigation in the sidebar
if($page->rootParent->hasChildren > 1) {
$sidebar = renderNavTree($page->rootParent, 3) . $page->sidebar;
}
</syntaxhighlight>
== Copy and Paste ==

=== Copyright / Published Date ===
<pre>
$published_date = date('d.m.Y',$page->created);
<?= '©'.$published_date ?>
</pre>

=== Stylesheets und Skripte mit AIOM ===
<script src="<?php echo AIOM::JS(array('scripts/jquery-2.2.4.min.js','scripts/jquery.chocolat.js','scripts/jquery.fitvids.js','scripts/jquery.flexslider-min.js', 'scripts/main.js')); ?>"></script>
<link rel="stylesheet" type="text/css" href="<?php echo AIOM::CSS('styles/main.less'); ?>">
<?php echo $homepage->site_title .' '. Date('Y'); ?>

=== Link zur Seite anhand URL-Pfad ===
<?php echo $pages->get('/ueber-uns/')->url; ?>

=== Feld einer Seite ===
$content_left = $page->get('content_left');

=== Bild ===
if($page->main_image){$image = $page->main_image->size(640,960);}
else $image = NULL;

=== Simple Navigation ===
<pre>
<ul class='nav-list'>
<?php
// Childrens
foreach(($page->children) as $item) {
if($item->id == $page->rootParent->id) {
echo '<li class="current">';
} else {
echo '<li>';
}
echo '<a class="ajax-link" href="'.$item->url.'">'.$item->title.'</a></li>';
}
?>
</ul>
</pre>

=== Auflistung mit div. Feldern aus Kindseiten ===
<syntaxhighlight lang="php">
/**
* Publications list template
*
*/
$publications = '';
$children = $page->children;
foreach($children as $child){
$publications .= '<div class="box">';
$publications .= '<h2><a class="ajax-link" parent="'. $child->parent->title .'" name="'.$child->title.'" href="'. $child->url. '">'. $child->title . '</a></h2>';
$publications .= $child->body;
$publications .= '</div>';
}

$content = $page->body . $publications;
</syntaxhighlight>

=== Minigalerie ===
Thumbnails / Child Pages
<syntaxhighlight lang="php">
$works = '<div class="gallery">';
$children = $page->children;
foreach($children as $child){
$works .= '<a class="ajax-link" parent="'. $child->parent->title .'" name="'.$child->title.'" href="'. $child->url. '">';
$works .= '<h2>'. $child->title . '</h2>';

if(count($child->thumbnail)){
$works .= '<div class="thumbnail"><img src="'. $child->thumbnail->getThumb('thumbnail') .'" title="'. $image->description .'"></div>';
}

$works .= '</a>';
}
$works .= '</div>';

$content = $page->body . $works . '<br/>' . $page->video;
</syntaxhighlight>

=== Page Navigation ===
<syntaxhighlight lang="php">
// add next button if there is another page next
if($page->next->id){
$next = '<div class="next"><i>Next:</i> <a class="ajax-link" name="'.$page->next->title.'" href="'. $page->next->url .'">'. $page->next->title .'<span class="fa fa-arrow-right"><span></a></div>';
}

$content = '<h2>'. $page->title . '</h2>' . $page->body . '<br/><div class="video">' . $page->video .'</div>' . $next;
</syntaxhighlight>

=== Simple Gallery with next Page ===
<syntaxhighlight lang="php">
$gallery = '<div class="gallery">';
$images = $page->gallery;

// add thumbnail to gallery
if(count($page->thumbnail)){
$gallery .= '<a class="chocolat-image gallery-item" href="'.$page->thumbnail->url.'"><img src="'. $page->thumbnail->getThumb('thumbnail') .'" title="'. $image->description .'"></a>';
}

foreach($images as $image){
$gallery .= '<a class="chocolat-image gallery-item" href="'.$image->url.'"><img src="'. $image->getThumb('thumbnail') .'" title="'. $image->description .'"></a> ';
}
$gallery .= '</div>';

// add next button if there is another page next
if($page->next->id){
$next = '<div class="next"><i>Next:</i> <a class="ajax-link" name="'.$page->next->title.'" href="'. $page->next->url .'">'. $page->next->title .'<span class="fa fa-arrow-right"><span></a></div>';
}

$content = '<h2>'. $page->title . '</h2>' . $page->body . '<br/>' . $gallery . '<br/><div class="video">' . $page->video .'</div>'. $next;

</syntaxhighlight>

ProcessWire - Navigation Snippets

2017-06-06T15:06:01Z

91.33.206.179: /* Nächste Seite / Next Page Navigation */

== Basics ==

=== Page Level ===
In which level in page tree we are?
$level = count($page->parents);
=== Link to Subpage und Platzhalter (Spacer) ===
Kann man gut für Superfish Menüs etc. benutzen. Bildet das Verhalten von Shortcuts und Spacern aus TYPO3 nach.

Anpassung der renderNavTree() Funktion von Ryan Cramer. Options Field Installieren und als globales Feld "navigation_type" mit den Optionen
<pre>
1=normal|Normal
2=doNotLink|Do not link
3=linkToFirstChild|Link to first childpage
</pre>
konfigurieren. Dann Funktion etwa so anpassen:
<pre>
...
// cycle through all the items
foreach($items as $item) {

// markup for the list item...
// if current item is the same as the page being viewed, add a "current" class to it
$out .= $item->id == wire('page')->id ? "<li class='current'>" : "<li>";

// markup for the link
$navigation_type = $item->navigation_type->id;
switch ( $navigation_type ) {
case 2: // do not link
$out .= "<span class='spacer'>$item->title</span>";
break;
case 3: // link to subpage
if( $item->hasChildren() ){
$out .= '<a href="'.$item->child->url.'">'.$item->title.'</a>';
}else{
$out .= "<span class='spacer'>$item->title</span>";
}
break;
default:
$out .= "<a href='$item->url'>$item->title</a>";
break;
}
...
</pre>

=== Redirect (301) ===
==== Redirect zu erster Unterseite ====
https://processwire.com/talk/topic/15-how-do-i-create-a-page-that-redirects-to-its-first-child/

Field ''redirects_to_first_child'' erstellen und im Template einfügen.
<syntaxhighlight lang="php">
<?php
if($page->numChildren && $page->redirects_to_first_child)
$session->redirect($page->child()->url);
?>
</syntaxhighlight>
Erzeugt 301 Weiterleitung

Anderer Ansatz wäre evtl. den Link bei der Menügenerierung direkt zu generieren.

==== Redirect anderer Seite in der Navigation ====
https://processwire.com/talk/topic/762-howto-menu-item-that-links-to-another-page/

1. Create a new field and call it 'redirect_url' or something like that, and use the 'URL' fieldtype.

2. Add that field to your template where you'd want to use it, or create a new template just for the purpose, like a template named 'redirect'.

3. Edit the page that you want to be a symlink and populate the 'redirect_url' field with the URL you want it to redirect to.

4. In your nav-generation code that links to the pages, do something like this:
<syntaxhighlight lang="php">
<?php
$url = $subpage->get("redirect_url|url"); // use redirect_url if there, otherwise use url
echo "<a href='$url'>{$subpage->title}</a>";
</syntaxhighlight>
5. You might also want to add this to your template that has the 'redirect_url' field: just in case there's anything linking to it directly. That way it'll send people to the right place either way:

<?php
if($page->redirect_url) $session->redirect($page->redirect_url);

=== Breadcrumb ===
<pre>

<div class='breadcrumbs'><?php
// breadcrumbs are the current page's parents
foreach($page->parents() as $item) {
echo "<span><a href='$item->url'>$item->title</a></span> ";
}
// optionally output the current page as the last item
echo "<span>$page->title</span> ";
?></div>
</pre>

=== Main Level Navigation Bar ===
Homepage + Kindseiten (1 Level). Die Variable $homepage wird i.d.R. in init.php definiert:
$homepage = $pages->get('/');

<pre>
<ul class='topnav'><?php
// top navigation consists of homepage and its visible children
foreach($homepage->and($homepage->children) as $item) {
if($item->id == $page->rootParent->id) {
echo "<li class='current'>";
} else {
echo "<li>";
}
echo "<a href='$item->url'>$item->title</a></li>";
}
// output an "Edit" link if this page happens to be editable by the current user
if($page->editable()) echo "<li class='edit'><a href='$page->editUrl'>Edit</a></li>";
?></ul>
</pre>

=== Nächste Seite / Next Page Navigation ===
// add next button if there is another page next
<syntaxhighlight lang="php">
if($page->next->id){
$next = '
<div class="next">
<i>Next:</i> 
<a class="ajax-link" name="'.$page->next->title.'" href="'. $page->next->url .'">
'. $page->next->title .'<span class="fa fa-arrow-right"><span>
</a>
</div>';
}
</syntaxhighlight>

=== Zurück zur Elternseite ===
<syntaxhighlight lang="php">
<div class="back"><a href="'.$page->parent()->url.'">zurück</a></div>
</syntaxhighlight>

=== Kindseiten mit $page->children ===
<?=$page->children?>
Output
5723,4958,5937

Beispiel
<syntaxhighlight lang="php">
<ul>
<?php
foreach($page->children as $child)
echo "<li><a href='{$child->url}'>{$child->title}</a></li>";
?> 
</ul>
</syntaxhighlight>
Ergebnis:
<pre>
<ul> 
<li><a href='/about/contact/'>Contact Us</a></li>
<li><a href='/about/press/'>Press Releases</a></li>
<li><a href='/about/staff/'>Our Staff</a></li> 
</ul>
</pre>
=== Children Tree ===
<syntaxhighlight lang="php">
function listChildrenTree($children, $current, $w) {

echo "<ul>";

foreach($children as $page) {

$class = '';
if($page === $current || $current->parents->slice(1)->has($page) ) {
$class = "class='on' style='font-weight:bold'";
}

$rootid = $w->pages->get("/")->id;

echo "<li><a href='{$page->url}' $class>";
if($page->id == $rootid) echo "<img src='" . $w->config->urls->templates . "styles/images/home.png' width='24' height='28' alt='' />";
echo "{$page->title}</a> ";

if($page->numChildren && $page->id != $rootid) listChildrenTree($page->children, $current, $w);

echo "</li>";
}
echo "</ul>";
}

$children = $pages->get("/")->children();
$children->prepend($pages->get("/"));

listChildrenTree($children, $page, $wire);
</syntaxhighlight>

== Bootstrap Navigation ==
<syntaxhighlight lang="php">
<?php namespace ProcessWire;
// Markup to use wicht navigation_type field (normal=1, no-link=2,subpage=3)
?>

<?php

// bundle up the first level pages and prepend the root home page
$homepage = $pages->get(1);
$pa = $homepage->children;
$pa = $pa->prepend($homepage);

// Set the ball rolling...
$myMenu = renderChildrenOf($pa);
$wrapper = '
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Menü</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse-1">
|
</div>
</div>
</div>';
$myMenu = wrap($myMenu,$wrapper);
echo $myMenu;
/*
Navigation for ProcessWire using the Bootstrap 2.2.2 markup
This menu was written by Soma based on work by NetCarver and a bit thrown in by Joss

Navigation Bootstrap 3 update by Damienov, with multi level dropdown support fix
*/

function renderChildrenOf($pa, $output = '', $level = 0)
{
$output = '';
$level++;

foreach ($pa as $child) {
$atoggle = '';
$class = '';

if ($child->numChildren && count($child->parents) == 1) {
$class .= 'dropdown';
$atoggle .= ' class="dropdown-toggle" data-toggle="dropdown"';
} else if ($child->numChildren && count($child->parents) > 1 ) {
$class .= 'dropdown-submenu';
$atoggle .= ' class="dropdown-toggle"';
} else if ($child->numChildren && $child->id != 1) {
$class .= 'dropdown-menu';
}

// Makes the current page and it's top level parent add an active class
$class .= ($child === wire("page") || $child === wire("page")->rootParent) ? " active" : '';
$class = strlen($class) ? " class='" . trim($class) . "'" : '';

if ($child->numChildren && count($child->parents) == 1) {
// Add Caret if have children
$output .= "<li$class><a href='$child->url'$atoggle>$child->title <b class='caret'></b></a>";
} else if ($child->numChildren && count($child->parents) > 1) {
$output .= "<li$class><a tabindex='-1' href='$child->url'$atoggle>$child->title</a>";
} else {
$output .= "<li$class><a href='$child->url'$atoggle>$child->title</a>";
}

// If this child is itself a parent and not the root page, then render it's children in their own menu too...
if ($child->numChildren && $child->id != 1) {
$output .= renderChildrenOf($child->children, $output, $level);
}
$output .= '</li>';
}
$outerclass = ($level == 1) ? "nav navbar-nav" : 'dropdown-menu';
return "<ul class='$outerclass'>$output</ul>";
}

?>
</syntaxhighlight>
== MarkupSimpleNavigation==
[[Processwire Modul - MarkupSimpleNavigation]]

== Weitere Menüs ==
=== Metamenü / Footer-Navigation ===
Checkbox anlegen (footer_nav), und dann das Seitenarray etwa so modifizieren.
<pre>
$footer_nav = $pages->find("parent=1, footer_checkbox=1");
$main_nav = $pages->find("parent=1, footer_checkbox!=1");
</pre>

=== Zweispaltige Navigation aus Kindseiten ===
Verbesserungsvorschlag: Anstatt if lieber zwei for Schleifen -> bessere Performance
<syntaxhighlight lang="php">
// Childrens
$n = count($page->children);
$m = ceil($n/2);
$c = 0;

// NAVIGATION & SLIDER Items
$listItem = '';
$navList = '';
$col1 = '<ul class="nav-list col1">';
$col2 = '<ul class="nav-list col2">';
foreach ($page->children as $item) {
if($item->id == $page->rootParent->id) {
$listItem = '<li class="current">';
} else {
$listItem = '<li>';
}
$listItem .= '<a class="ajax-link" href="'.$item->url.'">'.$item->title.'</a></li>';
($c < $m) ? $col1 .= $listItem : $col2 .= $listItem;
$c++;
}
$col1 .= '</ul>';
$col1 .= '</ul>';
$navList = $col1.$col2;
</syntaxhighlight>

ProcessWire - Navigation Snippets

2017-06-06T15:04:05Z

91.33.206.179: /* Nächste Seite / Next Page Navigation */

== Basics ==

=== Page Level ===
In which level in page tree we are?
$level = count($page->parents);
=== Link to Subpage und Platzhalter (Spacer) ===
Kann man gut für Superfish Menüs etc. benutzen. Bildet das Verhalten von Shortcuts und Spacern aus TYPO3 nach.

Anpassung der renderNavTree() Funktion von Ryan Cramer. Options Field Installieren und als globales Feld "navigation_type" mit den Optionen
<pre>
1=normal|Normal
2=doNotLink|Do not link
3=linkToFirstChild|Link to first childpage
</pre>
konfigurieren. Dann Funktion etwa so anpassen:
<pre>
...
// cycle through all the items
foreach($items as $item) {

// markup for the list item...
// if current item is the same as the page being viewed, add a "current" class to it
$out .= $item->id == wire('page')->id ? "<li class='current'>" : "<li>";

// markup for the link
$navigation_type = $item->navigation_type->id;
switch ( $navigation_type ) {
case 2: // do not link
$out .= "<span class='spacer'>$item->title</span>";
break;
case 3: // link to subpage
if( $item->hasChildren() ){
$out .= '<a href="'.$item->child->url.'">'.$item->title.'</a>';
}else{
$out .= "<span class='spacer'>$item->title</span>";
}
break;
default:
$out .= "<a href='$item->url'>$item->title</a>";
break;
}
...
</pre>

=== Redirect (301) ===
==== Redirect zu erster Unterseite ====
https://processwire.com/talk/topic/15-how-do-i-create-a-page-that-redirects-to-its-first-child/

Field ''redirects_to_first_child'' erstellen und im Template einfügen.
<syntaxhighlight lang="php">
<?php
if($page->numChildren && $page->redirects_to_first_child)
$session->redirect($page->child()->url);
?>
</syntaxhighlight>
Erzeugt 301 Weiterleitung

Anderer Ansatz wäre evtl. den Link bei der Menügenerierung direkt zu generieren.

==== Redirect anderer Seite in der Navigation ====
https://processwire.com/talk/topic/762-howto-menu-item-that-links-to-another-page/

1. Create a new field and call it 'redirect_url' or something like that, and use the 'URL' fieldtype.

2. Add that field to your template where you'd want to use it, or create a new template just for the purpose, like a template named 'redirect'.

3. Edit the page that you want to be a symlink and populate the 'redirect_url' field with the URL you want it to redirect to.

4. In your nav-generation code that links to the pages, do something like this:
<syntaxhighlight lang="php">
<?php
$url = $subpage->get("redirect_url|url"); // use redirect_url if there, otherwise use url
echo "<a href='$url'>{$subpage->title}</a>";
</syntaxhighlight>
5. You might also want to add this to your template that has the 'redirect_url' field: just in case there's anything linking to it directly. That way it'll send people to the right place either way:

<?php
if($page->redirect_url) $session->redirect($page->redirect_url);

=== Breadcrumb ===
<pre>

<div class='breadcrumbs'><?php
// breadcrumbs are the current page's parents
foreach($page->parents() as $item) {
echo "<span><a href='$item->url'>$item->title</a></span> ";
}
// optionally output the current page as the last item
echo "<span>$page->title</span> ";
?></div>
</pre>

=== Main Level Navigation Bar ===
Homepage + Kindseiten (1 Level). Die Variable $homepage wird i.d.R. in init.php definiert:
$homepage = $pages->get('/');

<pre>
<ul class='topnav'><?php
// top navigation consists of homepage and its visible children
foreach($homepage->and($homepage->children) as $item) {
if($item->id == $page->rootParent->id) {
echo "<li class='current'>";
} else {
echo "<li>";
}
echo "<a href='$item->url'>$item->title</a></li>";
}
// output an "Edit" link if this page happens to be editable by the current user
if($page->editable()) echo "<li class='edit'><a href='$page->editUrl'>Edit</a></li>";
?></ul>
</pre>

=== Nächste Seite / Next Page Navigation ===
// add next button if there is another page next
<syntaxhighlight lang="php">
if($page->next->id){
$next = '
<div class="next">
<i>Next:</i> 
<a class="ajax-link" name="'.$page->next->title.'" href="'. $page->next->url .'">
'. $page->next->title .'<span class="fa fa-arrow-right"><span>
</a>
</div>';
}
</syntaxhighlight>

=== Kindseiten mit $page->children ===
<?=$page->children?>
Output
5723,4958,5937

Beispiel
<syntaxhighlight lang="php">
<ul>
<?php
foreach($page->children as $child)
echo "<li><a href='{$child->url}'>{$child->title}</a></li>";
?> 
</ul>
</syntaxhighlight>
Ergebnis:
<pre>
<ul> 
<li><a href='/about/contact/'>Contact Us</a></li>
<li><a href='/about/press/'>Press Releases</a></li>
<li><a href='/about/staff/'>Our Staff</a></li> 
</ul>
</pre>
=== Children Tree ===
<syntaxhighlight lang="php">
function listChildrenTree($children, $current, $w) {

echo "<ul>";

foreach($children as $page) {

$class = '';
if($page === $current || $current->parents->slice(1)->has($page) ) {
$class = "class='on' style='font-weight:bold'";
}

$rootid = $w->pages->get("/")->id;

echo "<li><a href='{$page->url}' $class>";
if($page->id == $rootid) echo "<img src='" . $w->config->urls->templates . "styles/images/home.png' width='24' height='28' alt='' />";
echo "{$page->title}</a> ";

if($page->numChildren && $page->id != $rootid) listChildrenTree($page->children, $current, $w);

echo "</li>";
}
echo "</ul>";
}

$children = $pages->get("/")->children();
$children->prepend($pages->get("/"));

listChildrenTree($children, $page, $wire);
</syntaxhighlight>

== Bootstrap Navigation ==
<syntaxhighlight lang="php">
<?php namespace ProcessWire;
// Markup to use wicht navigation_type field (normal=1, no-link=2,subpage=3)
?>

<?php

// bundle up the first level pages and prepend the root home page
$homepage = $pages->get(1);
$pa = $homepage->children;
$pa = $pa->prepend($homepage);

// Set the ball rolling...
$myMenu = renderChildrenOf($pa);
$wrapper = '
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Menü</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse-1">
|
</div>
</div>
</div>';
$myMenu = wrap($myMenu,$wrapper);
echo $myMenu;
/*
Navigation for ProcessWire using the Bootstrap 2.2.2 markup
This menu was written by Soma based on work by NetCarver and a bit thrown in by Joss

Navigation Bootstrap 3 update by Damienov, with multi level dropdown support fix
*/

function renderChildrenOf($pa, $output = '', $level = 0)
{
$output = '';
$level++;

foreach ($pa as $child) {
$atoggle = '';
$class = '';

if ($child->numChildren && count($child->parents) == 1) {
$class .= 'dropdown';
$atoggle .= ' class="dropdown-toggle" data-toggle="dropdown"';
} else if ($child->numChildren && count($child->parents) > 1 ) {
$class .= 'dropdown-submenu';
$atoggle .= ' class="dropdown-toggle"';
} else if ($child->numChildren && $child->id != 1) {
$class .= 'dropdown-menu';
}

// Makes the current page and it's top level parent add an active class
$class .= ($child === wire("page") || $child === wire("page")->rootParent) ? " active" : '';
$class = strlen($class) ? " class='" . trim($class) . "'" : '';

if ($child->numChildren && count($child->parents) == 1) {
// Add Caret if have children
$output .= "<li$class><a href='$child->url'$atoggle>$child->title <b class='caret'></b></a>";
} else if ($child->numChildren && count($child->parents) > 1) {
$output .= "<li$class><a tabindex='-1' href='$child->url'$atoggle>$child->title</a>";
} else {
$output .= "<li$class><a href='$child->url'$atoggle>$child->title</a>";
}

// If this child is itself a parent and not the root page, then render it's children in their own menu too...
if ($child->numChildren && $child->id != 1) {
$output .= renderChildrenOf($child->children, $output, $level);
}
$output .= '</li>';
}
$outerclass = ($level == 1) ? "nav navbar-nav" : 'dropdown-menu';
return "<ul class='$outerclass'>$output</ul>";
}

?>
</syntaxhighlight>
== MarkupSimpleNavigation==
[[Processwire Modul - MarkupSimpleNavigation]]

== Weitere Menüs ==
=== Metamenü / Footer-Navigation ===
Checkbox anlegen (footer_nav), und dann das Seitenarray etwa so modifizieren.
<pre>
$footer_nav = $pages->find("parent=1, footer_checkbox=1");
$main_nav = $pages->find("parent=1, footer_checkbox!=1");
</pre>

=== Zweispaltige Navigation aus Kindseiten ===
Verbesserungsvorschlag: Anstatt if lieber zwei for Schleifen -> bessere Performance
<syntaxhighlight lang="php">
// Childrens
$n = count($page->children);
$m = ceil($n/2);
$c = 0;

// NAVIGATION & SLIDER Items
$listItem = '';
$navList = '';
$col1 = '<ul class="nav-list col1">';
$col2 = '<ul class="nav-list col2">';
foreach ($page->children as $item) {
if($item->id == $page->rootParent->id) {
$listItem = '<li class="current">';
} else {
$listItem = '<li>';
}
$listItem .= '<a class="ajax-link" href="'.$item->url.'">'.$item->title.'</a></li>';
($c < $m) ? $col1 .= $listItem : $col2 .= $listItem;
$c++;
}
$col1 .= '</ul>';
$col1 .= '</ul>';
$navList = $col1.$col2;
</syntaxhighlight>

ProcessWire - Navigation Snippets

2017-06-06T15:02:01Z

91.33.206.179: /* Nächste Seite */

== Basics ==

=== Page Level ===
In which level in page tree we are?
$level = count($page->parents);
=== Link to Subpage und Platzhalter (Spacer) ===
Kann man gut für Superfish Menüs etc. benutzen. Bildet das Verhalten von Shortcuts und Spacern aus TYPO3 nach.

Anpassung der renderNavTree() Funktion von Ryan Cramer. Options Field Installieren und als globales Feld "navigation_type" mit den Optionen
<pre>
1=normal|Normal
2=doNotLink|Do not link
3=linkToFirstChild|Link to first childpage
</pre>
konfigurieren. Dann Funktion etwa so anpassen:
<pre>
...
// cycle through all the items
foreach($items as $item) {

// markup for the list item...
// if current item is the same as the page being viewed, add a "current" class to it
$out .= $item->id == wire('page')->id ? "<li class='current'>" : "<li>";

// markup for the link
$navigation_type = $item->navigation_type->id;
switch ( $navigation_type ) {
case 2: // do not link
$out .= "<span class='spacer'>$item->title</span>";
break;
case 3: // link to subpage
if( $item->hasChildren() ){
$out .= '<a href="'.$item->child->url.'">'.$item->title.'</a>';
}else{
$out .= "<span class='spacer'>$item->title</span>";
}
break;
default:
$out .= "<a href='$item->url'>$item->title</a>";
break;
}
...
</pre>

=== Redirect (301) ===
==== Redirect zu erster Unterseite ====
https://processwire.com/talk/topic/15-how-do-i-create-a-page-that-redirects-to-its-first-child/

Field ''redirects_to_first_child'' erstellen und im Template einfügen.
<syntaxhighlight lang="php">
<?php
if($page->numChildren && $page->redirects_to_first_child)
$session->redirect($page->child()->url);
?>
</syntaxhighlight>
Erzeugt 301 Weiterleitung

Anderer Ansatz wäre evtl. den Link bei der Menügenerierung direkt zu generieren.

==== Redirect anderer Seite in der Navigation ====
https://processwire.com/talk/topic/762-howto-menu-item-that-links-to-another-page/

1. Create a new field and call it 'redirect_url' or something like that, and use the 'URL' fieldtype.

2. Add that field to your template where you'd want to use it, or create a new template just for the purpose, like a template named 'redirect'.

3. Edit the page that you want to be a symlink and populate the 'redirect_url' field with the URL you want it to redirect to.

4. In your nav-generation code that links to the pages, do something like this:
<syntaxhighlight lang="php">
<?php
$url = $subpage->get("redirect_url|url"); // use redirect_url if there, otherwise use url
echo "<a href='$url'>{$subpage->title}</a>";
</syntaxhighlight>
5. You might also want to add this to your template that has the 'redirect_url' field: just in case there's anything linking to it directly. That way it'll send people to the right place either way:

<?php
if($page->redirect_url) $session->redirect($page->redirect_url);

=== Breadcrumb ===
<pre>

<div class='breadcrumbs'><?php
// breadcrumbs are the current page's parents
foreach($page->parents() as $item) {
echo "<span><a href='$item->url'>$item->title</a></span> ";
}
// optionally output the current page as the last item
echo "<span>$page->title</span> ";
?></div>
</pre>

=== Main Level Navigation Bar ===
Homepage + Kindseiten (1 Level). Die Variable $homepage wird i.d.R. in init.php definiert:
$homepage = $pages->get('/');

<pre>
<ul class='topnav'><?php
// top navigation consists of homepage and its visible children
foreach($homepage->and($homepage->children) as $item) {
if($item->id == $page->rootParent->id) {
echo "<li class='current'>";
} else {
echo "<li>";
}
echo "<a href='$item->url'>$item->title</a></li>";
}
// output an "Edit" link if this page happens to be editable by the current user
if($page->editable()) echo "<li class='edit'><a href='$page->editUrl'>Edit</a></li>";
?></ul>
</pre>

=== Nächste Seite / Next Page Navigation ===
// add next button if there is another page next
<syntaxhighlight lang="php">
if($page->next->id){
$next = '<div class="next"><i>Next:</i> <a class="ajax-link" name="'.$page->next->title.'" href="'. $page->next->url .'">'. $page->next->title .'<span class="fa fa-arrow-right"><span></a></div>';
}
</syntaxhighlight>

=== Kindseiten mit $page->children ===
<?=$page->children?>
Output
5723,4958,5937

Beispiel
<syntaxhighlight lang="php">
<ul>
<?php
foreach($page->children as $child)
echo "<li><a href='{$child->url}'>{$child->title}</a></li>";
?> 
</ul>
</syntaxhighlight>
Ergebnis:
<pre>
<ul> 
<li><a href='/about/contact/'>Contact Us</a></li>
<li><a href='/about/press/'>Press Releases</a></li>
<li><a href='/about/staff/'>Our Staff</a></li> 
</ul>
</pre>
=== Children Tree ===
<syntaxhighlight lang="php">
function listChildrenTree($children, $current, $w) {

echo "<ul>";

foreach($children as $page) {

$class = '';
if($page === $current || $current->parents->slice(1)->has($page) ) {
$class = "class='on' style='font-weight:bold'";
}

$rootid = $w->pages->get("/")->id;

echo "<li><a href='{$page->url}' $class>";
if($page->id == $rootid) echo "<img src='" . $w->config->urls->templates . "styles/images/home.png' width='24' height='28' alt='' />";
echo "{$page->title}</a> ";

if($page->numChildren && $page->id != $rootid) listChildrenTree($page->children, $current, $w);

echo "</li>";
}
echo "</ul>";
}

$children = $pages->get("/")->children();
$children->prepend($pages->get("/"));

listChildrenTree($children, $page, $wire);
</syntaxhighlight>

== Bootstrap Navigation ==
<syntaxhighlight lang="php">
<?php namespace ProcessWire;
// Markup to use wicht navigation_type field (normal=1, no-link=2,subpage=3)
?>

<?php

// bundle up the first level pages and prepend the root home page
$homepage = $pages->get(1);
$pa = $homepage->children;
$pa = $pa->prepend($homepage);

// Set the ball rolling...
$myMenu = renderChildrenOf($pa);
$wrapper = '
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Menü</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse-1">
|
</div>
</div>
</div>';
$myMenu = wrap($myMenu,$wrapper);
echo $myMenu;
/*
Navigation for ProcessWire using the Bootstrap 2.2.2 markup
This menu was written by Soma based on work by NetCarver and a bit thrown in by Joss

Navigation Bootstrap 3 update by Damienov, with multi level dropdown support fix
*/

function renderChildrenOf($pa, $output = '', $level = 0)
{
$output = '';
$level++;

foreach ($pa as $child) {
$atoggle = '';
$class = '';

if ($child->numChildren && count($child->parents) == 1) {
$class .= 'dropdown';
$atoggle .= ' class="dropdown-toggle" data-toggle="dropdown"';
} else if ($child->numChildren && count($child->parents) > 1 ) {
$class .= 'dropdown-submenu';
$atoggle .= ' class="dropdown-toggle"';
} else if ($child->numChildren && $child->id != 1) {
$class .= 'dropdown-menu';
}

// Makes the current page and it's top level parent add an active class
$class .= ($child === wire("page") || $child === wire("page")->rootParent) ? " active" : '';
$class = strlen($class) ? " class='" . trim($class) . "'" : '';

if ($child->numChildren && count($child->parents) == 1) {
// Add Caret if have children
$output .= "<li$class><a href='$child->url'$atoggle>$child->title <b class='caret'></b></a>";
} else if ($child->numChildren && count($child->parents) > 1) {
$output .= "<li$class><a tabindex='-1' href='$child->url'$atoggle>$child->title</a>";
} else {
$output .= "<li$class><a href='$child->url'$atoggle>$child->title</a>";
}

// If this child is itself a parent and not the root page, then render it's children in their own menu too...
if ($child->numChildren && $child->id != 1) {
$output .= renderChildrenOf($child->children, $output, $level);
}
$output .= '</li>';
}
$outerclass = ($level == 1) ? "nav navbar-nav" : 'dropdown-menu';
return "<ul class='$outerclass'>$output</ul>";
}

?>
</syntaxhighlight>
== MarkupSimpleNavigation==
[[Processwire Modul - MarkupSimpleNavigation]]

== Weitere Menüs ==
=== Metamenü / Footer-Navigation ===
Checkbox anlegen (footer_nav), und dann das Seitenarray etwa so modifizieren.
<pre>
$footer_nav = $pages->find("parent=1, footer_checkbox=1");
$main_nav = $pages->find("parent=1, footer_checkbox!=1");
</pre>

=== Zweispaltige Navigation aus Kindseiten ===
Verbesserungsvorschlag: Anstatt if lieber zwei for Schleifen -> bessere Performance
<syntaxhighlight lang="php">
// Childrens
$n = count($page->children);
$m = ceil($n/2);
$c = 0;

// NAVIGATION & SLIDER Items
$listItem = '';
$navList = '';
$col1 = '<ul class="nav-list col1">';
$col2 = '<ul class="nav-list col2">';
foreach ($page->children as $item) {
if($item->id == $page->rootParent->id) {
$listItem = '<li class="current">';
} else {
$listItem = '<li>';
}
$listItem .= '<a class="ajax-link" href="'.$item->url.'">'.$item->title.'</a></li>';
($c < $m) ? $col1 .= $listItem : $col2 .= $listItem;
$c++;
}
$col1 .= '</ul>';
$col1 .= '</ul>';
$navList = $col1.$col2;
</syntaxhighlight>