CODEWITHSUNDEEP
phpmediawiki
Alexander Kim
Alexander Kim

Reputation: 18410

How to add image with link in a sidebar - MediaWiki

I can add links to a MediaWiki sidebar this way:

* some-url|url-text

But how can i add image instead of text without hacking core or standard templates?

I have read this: http://www.mediawiki.org/wiki/Manual_talk:Interface/Sidebar#Images_in_the_navigation_bar

But it's just a feature request.

Upvotes: 4

Views: 2571

Answers (3)

Venkatesh Gotimukul
Venkatesh Gotimukul

Reputation: 761

You can achieve this entirely from mediawiki interface itself by using [[Mediawiki:Sidebar]] and [[Mediawiki:Vector.css]]

[[Mediawiki:Sidebar]]
* navigation
** mainpage|mainpage-description
** recentchanges-url|recentchanges
** randompage-url|randompage
** helppage|help
** https://www.google.co.in/|hi
** https://www.youtube.com/|hi1
* SEARCH
* TOOLBOX
* LANGUAGES

[[Mediawiki:Vector.css]]
/* CSS placed here will affect users of the Vector skin */
#p-navigation
{
border-image: url("http://farm3.static.flickr.com/2357/2230414856_45f9552c28.jpg") 30 
round;
border-top: 25px solid black;   
border-left: 2px solid black;
border-right: 2px solid black;
border-bottom: 2px solid black;
}
#p-tb
{
border-image: url("http://farm3.static.flickr.com/2357/2230414856_45f9552c28.jpg") 30 
round;
border-top: 25px solid black;   
border-left: 2px solid black;
border-right: 2px solid black;
border-bottom: 2px solid black;
}
/* That will place a temporary campaign/launch/event/whatever image right down the 
main logo - pretty useful hun? nah  */

/* Make clickable text on links invisible. */
li#n-hi {
color:#f6f6f6;
visibility: visible;
font-size:0em;
}

#n-hi:hover ::after, #n-hi ::after {
content: '';
display:inline-block;
width: 48px;
height: 48px;

background: url('http://farm3.static.flickr.com/2357/2230414856_45f9552c28.jpg');
}

/* Every image need to have its own rule defined. */
#n-hi::after{
background: url('http://farm3.static.flickr.com/2357/2230414856_45f9552c28.jpg');
}

#n-hi:hover ::after {
background: url('http://farm3.static.flickr.com/2357/2230414856_45f9552c28.jpg');
}
#n-hi:hover ::after, #n-hi ::after{
background-repeat: no-repeat;
background-size: contain;
}

#mw-panel .portal .body li#n-hi {
font-size:0em;
padding:10px;
}

/* Make clickable text on links invisible. */
#n-hi1 {
color:#f6f6f6;
font-size:0em;
}

#n-hi1:hover ::after, #n-hi1 ::after {
content: '';
display:inline-block;
width: 48px;
height: 48px;

background: url('https://www.gstatic.com/webp/gallery/1.jpg');
}

/* Every image need to have its own rule defined. */
#n-hi1::after{
background: url('https://www.gstatic.com/webp/gallery/1.jpg');
}

#n-hi1:hover ::after {
background: url('https://www.gstatic.com/webp/gallery/1.jpg');
}
#n-hi1:hover ::after, #n-hi1 ::after{
background-repeat: no-repeat;
background-size: contain;
}

#mw-panel .portal .body li#n-hi1 {
font-size:0em;
padding:10px;
}

enter image description here

Upvotes: 1

amichai
amichai

Reputation: 728

here is an example how to override the SkinBuildSidebar hook:

register your extension in the LocalSettings.php file

require_once( "$IP/extensions/my-extension.php" );

hook your function in your extension file ("my-extension.php")

$wgHooks['SkinBuildSidebar'][] = 'myExtension::mySidebar';

add your function

class myExtension {
    static function mySidebar($skin, &$bar) {
// the index of the bar array are keywords that will appear as the heading of the submenu.
//the real value of these keywords are define at:Special:AllMessages
    $bar[ 'my-submenu-title-keyword' ] = '
    <ul style="text-align:center;">
        <li>
            <a href="myLink...">
                <img style="width:110px;" src="my-picture.jpg" />
            </a>
        </li>
    </ul>';
    return true;
    }
  }

in the $bar array use for the index the title of the submenu as a string or as a keyword of message (to use with multiple languages) and define the message related to this keyword at Special:AllMessages

Upvotes: 4

leo
leo

Reputation: 8541

Three possible approaches:

  1. Write a custom skin, that handles the sidebar any way you want.
  2. Write a tiny extension using the hook SkinBuildSidebar, to handle some custom code for images
  3. Use MediaWiki:Common.js to modify the sidebar using javascript.

I would without doubt go for 2.

edit: Note that some skins might ignore the SkinBuildSidebar hook. As long as you have no custom skins enabled, you should be fine, though.

Upvotes: 4

Related Questions