blurring an image within an infobox to be unblurred on click/hover

[white gale]

as the title says.. i got it to work outside of an infobox. No luck when images are inside an infobox which is what I need. Example;

the closest I got it to work was surrounding the said infobox with a div with the blur class but that blurs the entire infobox ;_;

[pure viper]

You could change the selector so it only selects the infobox image, you can check which class(es) it has with inspect element

[white gale]

this would make it so all infoboxes are blurred no

because they share the same class

[pure viper]

oh true

then you could edit the infobox template/module to add a parameter for classes that should be added to the image like e.g. image_classes=blurred-infobox-image

[white gale]

uuuuuhhh

<infobox>
  <title source="title"><default>{{PAGENAME}}</default></title>
  <image source="image"/>
  <data source="Location"><label>Location</label></data>
  <data source="Connections"><label>Connections</label></data>
  <data source="Gender"><label>Gender</label></data>
  <data source="Appearence"><label>Appearance</label></data>
  <data source="nsfwimage"><label>NSFW Image</label></data>
</infobox>

{{#if: {{{image|}}}|{{#seo:|image={{{image}}}}}|}}
{{#if: {{{nsfwimage|}}}|<span class="nsfw-image">{{{image}}}</span>|{{{image}}}}}

like so?

[white gale]

doesn't work ..

i mean it does

just not at all

instead of applying the blurred image class to the image it writes down the image parameter and blurs the text eg: image=file:adada.png, writes down file:adadada.png and blurs the text

[slow hare]

did you do .nsfw-image img

[pure viper]

well the image parameter is in a span right now which is a text element, you need to apply the class to the img element instead (I'm not sure how to do that with portable infobox though)

[white gale]

nope but I've tried changing it to that and wrapping the info box around in a div with the blur class

instead of blurring the entire info box it blurs nothing

[white gale]

yeahhh

I'm not sure either @_@ I'm just trying to blur a suggestive image

[white gale]

i'm thinking about doing <div class="blabla">(infobox here)</div> but that seems like a very cornercut way and I don't know how much issues it'll cause later on ,, maybe it's just a css issue on my part?

https://blacksouls.miraheze.org/wiki/MediaWiki:Common.css

[pure viper]

I feel like there is no better solution considering that (at least from what I know) PortableInfobox does not seem to allow giving elements like the image or just the infobox itself custom classes

Although another thing you could do is have an invisible <div class="nsfw-infobox"/> before the infobox if the nsfw-image parameter is set and then select infoboxes that are preceded by such divs

[white gale]

Yeppp

[white gale]

I don't quite understand

[pure viper]

So in the infobox template, you'd have

{{#if: {{{nsfwimage|}}}|<div class="nsfw-infobox"/>|}}
<infobox>
... rest of the infobox template

Then you can have a css similar to this, which basically checks if the page has the div with the nsfw-infobox element class and gives all infobox thumbnails the blur effect:

.mw-body-content:has(.nsfw-infobox) .pi-image-thumbnail {
  filter:blur(20px);
  transition:filter 0.6s ease;
}

.mw-body-content:has(.nsfw-infobox) .pi-image-thumbnail:hover {
  filter:blur(0)
}

And to have an infobox be marked as nsfw you'd just add the parameter like

|nsfwimage=true

when using the infobox template

[white gale]

for the infobox template aren't we missing a </div> at the end? also .. it doesn't work ;_;

Ssir

envermind

i love u

it works

i'll have to .. scale up the blur filter I think, you can still make out the nsfw

[gentle shard]

Actually there kinda is.
For an infobox as a whole there is the theme paramter you can specify so say <infobox theme=nsfw> this in the resulting HTML would add a class called .pi-theme-nsfw you can target with css.

For specific elements, while there isn't a class specifically, but there is a name, so say <image name=nsfw> for fields like data, image etc., which will add a data-item-name property to the resulting HTML. This one is a bit weirder to target, but would be done for say an image something like this .pi-image[data-item-name="nsfw"].

Additionally you have the <format> tag (as a subtag to title, data and caption), as well as <navigation>(can be inside infobox, group and section, so basically anywhere that makes even remotely sense in the infobox), which both accepts any wikitext, meaning in theory you could even make divs inside those (though I haven't personally tried making a div there, but it should qualify as wikitext, I have made a table inside one at least)

For all the possible tags and their options see this (the MH version is basically identical to the fandom one, so fandoms documentation works for it too) https://community.fandom.com/wiki/Help:Infoboxes/Tags