search

borkweb / BootstrapMediaWiki

A MediaWiki skin using Bootstrap 4 & FontAwesome 4
Apache License 2.0
266 stars 249 forks source link

Bootstrap Carousel #81

Closed CrispyCrafter closed 7 years ago

CrispyCrafter commented 7 years ago

I'm trying to implement a Bootstrap Carousel on the Main page of a MW site. For simplicity I am currently injecting the code directly into wikitext on Main. The code executes fine on desktop, but images fail to re-scale below 700px, In other words its hiding in overflow, not scaling.

The fix is simple, change the image scaling to, max-width=100% and height=auto. However, seeing as this information is parsed by MediaWiki with the link: [[File:Slider1.png|center|link=Page One]], this seems a bit more tricky.

Do you guys have any advice on maybe injecting this from the Bootstrap PHP side, without losing the wikitext functionality ? Maybe by using something like DynamicPageList3 and a random categorized page for the link and image ?

< div class="container"> < div id="SampleCarousel" class="carousel slide" data-ride="carousel" >

<ol class="carousel-indicators" >
  <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
  <li data-target="#myCarousel" data-slide-to="1"></li>
  <li data-target="#myCarousel" data-slide-to="2"></li>
</ol>

<div class="carousel-inner">
  <div class="item active">
    [[File:Slider1.png|center|link=Page One]]
    <div class="carousel-caption">
      <p>Sample page one description</p>
    </div>
  </div>

  <div class="item">
    [[File:Slider2.png|center|link=Page Two]]
    <div class="carousel-caption">
      <p>Sample page two description</p>
    </div>
  </div>

  <div class="item">
    [[File:Slider3.png|center|link=Page Three]]
    <div class="carousel-caption">
      <p>Sample page three description</p>
    </div>
  </div>
 </div>

</div

Think it would be a nice touch

MediaWiki 1.28.2 PHP 5.6.25 Bootstrap-mw – (4ef5a0f)

samwilson commented 7 years ago

Can you add the img-responsive class to the images? e.g. [[File:Slider1.png|center|class=img-responsive|link=Page One]].

CrispyCrafter commented 7 years ago

Thank you so much! Worked perfectly

tone2526 commented 6 years ago

<?php /**

get_page_links('Bootstrap:Subnav') ) { ?>
nav_select( $subnav_links ); if ( trim( $subnav_select ) ) { ?>
data['sitenotice'] ) { ?>
html('sitenotice') ?>
data['undelete'] ): ?>
html( 'undelete' ) ?>
data['newtalk'] ): ?>
html( 'newtalk' ) ?>

html( 'title' ) ?> html('subtitle') ?>

html( 'bodytext' ) ?>
data['catlinks'] ): ?>
html( 'catlinks' ); ?>
data['dataAfterContent'] ): ?>
html( 'dataAfterContent' ); ?>
html('bottomscripts'); /* JS call to runBodyOnloadHook */ $this->html('reporttime'); if ( $this->data['debug'] ) { ?>
  • Render one or more navigations elements by name, automatically reveresed
  • when UI is in RTL mode */ private function nav( $nav ) { $output = ''; foreach ( $nav as $topItem ) { $pageTitle = Title::newFromText( $topItem['link'] ?: $topItem['title'] ); if ( array_key_exists( 'sublinks', $topItem ) ) { $output .= '
  • '; $output .= '' . $topItem['title'] . ' '; $output .= ''; $output .= '
    • '; } else { if( $pageTitle ) { $output .= '<li' . ($this->data['title'] == $topItem['title'] ? ' class="active"' : '') . '>' . $topItem['title'] . ''; }//end if }//end else }//end foreach return $output; }//end nav /**
  • Render one or more navigations elements by name, automatically reveresed
  • when UI is in RTL mode / private function nav_select( $nav ) { $output = ''; foreach ( $nav as $topItem ) { $pageTitle = Title::newFromText( $topItem['link'] ?: $topItem['title'] ); $output .= ''; if ( array_key_exists( 'sublinks', $topItem ) ) { foreach ( $topItem['sublinks'] as $subLink ) { if ( 'divider' == $subLink ) { $output .= "\n"; } elseif ( $subLink['textonly'] ) { $output .= "\n"; } else { if( $subLink['local'] && $pageTitle = Title::newFromText( $subLink['link'] ) ) { $href = $pageTitle->getLocalURL(); } else { $href = $subLink['link']; }//end else $output .= ""; }//end else }//end foreach } elseif ( $pageTitle ) { $output .= ''; }//end else $output .= ''; }//end foreach return $output; }//end nav_select private function get_page_links( $source ) { $titleBar = $this->getPageRawText( $source ); $nav = array(); foreach(explode("\n", $titleBar) as $line) { if(trim($line) == '') continue; if( preg_match('/^**\sdivider/', $line ) ) { $nav[ count( $nav ) - 1]['sublinks'][] = 'divider'; continue; }//end if $sub = false; $link = false; $external = false; if(preg_match('/^*\s([^*])[[:?(.+)]]/', $line, $match)) { $sub = false; $link = true; }elseif(preg_match('/^*\s([^*[])[([^[ ]+) (.+)]/', $line, $match)) { $sub = false; $link = true; $external = true; }elseif(preg_match('/^**\s([^*[])[([^[ ]+) (.+)]/', $line, $match)) { $sub = true; $link = true; $external = true; }elseif(preg_match('/**\s([^*])[[:?(.+)]]/', $line, $match)) { $sub = true; $link = true; }elseif(preg_match('/**\s([^* ])(.+)/', $line, $match)) { $sub = true; $link = false; }elseif(preg_match('/^*\s*(.+)/', $line, $match)) { $sub = false; $link = false; } if( strpos( $match[2], '|' ) !== false ) { $item = explode( '|', $match[2] ); $item = array( 'title' => $match[1] . $item[1], 'link' => $item[0], 'local' => true, ); } else { if( $external ) { $item = $match[2]; $title = $match[1] . $match[3]; } else { $item = $match[1] . $match[2]; $title = $item; }//end else if( $link ) { $item = array('title'=> $title, 'link' => $item, 'local' => ! $external , 'external' => $external ); } else { $item = array('title'=> $title, 'link' => $item, 'textonly' => true, 'external' => $external ); }//end else }//end else if( $sub ) { $nav[count( $nav ) - 1]['sublinks'][] = $item; } else { $nav[] = $item; }//end else } return $nav;
    }//end get_page_links private function get_array_links( $array, $title, $which ) { $nav = array(); $nav[] = array('title' => $title ); foreach( $array as $key => $item ) { $link = array( 'id' => Sanitizer::escapeId( $key ), 'attributes' => $item['attributes'], 'link' => htmlspecialchars( $item['href'] ), 'key' => $item['key'], 'class' => htmlspecialchars( $item['class'] ), 'title' => htmlspecialchars( $item['text'] ), ); if( 'page' == $which ) { switch( $link['title'] ) { case 'Page': $icon = 'file'; break; case 'Discussion': $icon = 'comment'; break; case 'Edit': $icon = 'pencil'; break; case 'History': $icon = 'clock-o'; break; case 'Delete': $icon = 'remove'; break; case 'Move': $icon = 'arrows'; break; case 'Protect': $icon = 'lock'; break; case 'Watch': $icon = 'eye-open'; break; case 'Unwatch': $icon = 'eye-slash'; break; }//end switch $link['title'] = ' ' . $link['title']; } elseif( 'user' == $which ) { switch( $link['title'] ) { case 'My talk': $icon = 'comment'; break; case 'My preferences': $icon = 'cog'; break; case 'My watchlist': $icon = 'eye-close'; break; case 'My contributions': $icon = 'list-alt'; break; case 'Log out': $icon = 'off'; break; default: $icon = 'user'; break; }//end switch $link['title'] = ' ' . $link['title']; }//end elseif $nav[0]['sublinks'][] = $link; }//end foreach return $this->nav( $nav ); }//end get_array_links function getPageRawText($title) { global $wgParser, $wgUser; $pageTitle = Title::newFromText($title); if(!$pageTitle->exists()) { return 'Create the page [[Bootstrap:TitleBar]]'; } else { $article = new Article($pageTitle); $wgParserOptions = new ParserOptions($wgUser); // get the text as static wiki text, but with already expanded templates, // which also e.g. to use {{#dpl}} (DPL third party extension) for dynamic menus. $parserOutput = $wgParser->preprocess($article->getRawText(), $pageTitle, $wgParserOptions ); return $parserOutput; } } function includePage($title) { global $wgParser, $wgUser; $pageTitle = Title::newFromText($title); if(!$pageTitle->exists()) { echo 'The page [[' . $title . ']] was not found.'; } else { $article = new Article($pageTitle); $wgParserOptions = new ParserOptions($wgUser); $parserOutput = $wgParser->parse($article->getRawText(), $pageTitle, $wgParserOptions); echo $parserOutput->getText(); } } public static function link() { } }