Topic on Project:Support desk

Jump to navigation Jump to search

Can I pass a template parameter into a TemplateStyles stylesheet?

6
John Stumbles (talkcontribs)

I want to style responsive images. (I am running mediawiki 1.34.1 and I have the TemplateStyles extension installed.) Some Googling lead me to create a Template:ResponsiveImage like:

<templatestyles src="ResponsiveImage/style.css" />
<div class="responsive-image">
 {{{1}}}
</div>

with a style sheet Template:ResponsiveImage/style.css like:

/* To make images responsive */
.responsive-image img {
    max-width:100%;
    height:auto;
}

So far so good. I can do {{ResponsiveImage|[[File:some image.png]]}} and it fits across the full screen width and shrinks with the screen size.

But it would be neat to be able to pass max-width to give other responsive width images, but I can't find any documentation or examples of how to do it. I've tried the obvious - max-width:{{{1}}}; - but just get an error

Invalid or unsupported value for property 
max-width
at line 3 character 12.

Is there some way to do this? (Or any other way to make responsive images or arbitrary percentage of the screen width.)

Bawolff (talkcontribs)

TemplateStyles extension does not support parameters.


You could put the image inside a div tag with an inline style attribute containing a max-width, since the parent element should constrain the child element afaik

John Stumbles (talkcontribs)
Bawolff (talkcontribs)

I was thinking combining both might work:

<div class="responsive-image" style="width:50%">[[image:...]]</div>

Keeping your templatestyles the way they are currently where it sets a width on the img tag.

Although i havent tested so i could be wrong.

John Stumbles (talkcontribs)

It looks as if Extension:AdaptiveThumb which Cheema mentioned still exists so I'll try that next.

John Stumbles (talkcontribs)

I tried it. The documentation (at Extension:AdaptiveThumb and the author's own website, staerk DOT de SLASH thorsten SLASH AdaptiveThumb) is scanty and contradictory, but it seems to only work with external images, and when I tried it, it threw a load of php errors over my page complaining that I hadn't set a bunch of parameters it says nothing about, like align, border, link, title, alt, and margin.

So that's not my answer :-(

Reply to "Can I pass a template parameter into a TemplateStyles stylesheet?"