Based on In MediaWiki, is there a way I can apply [[Image:<name>]] style resizing to external images?
Instead of adding an entry like this in the [[MediaWiki:Common.css]] page on the wiki
.image100px img { width: 100px; }
Would it be possible to change the css line with use of a mediawiki passed variable to set the width to an arbitrary value at runtime?
I now have 10 such lines to have a relative flexibility in external image sizing but would prefer to have something of the kind
.imagewidthpx img { width: {{{1}}}; }
I have no idea how to interact dynamically with common.css or even if this is feasible and I really need to embed external images with resizing.
Thanks
Something like this might work...
In MediaWiki:Commmon.css add:
.externalimage-holder {
position: relative;
}
.externalimage-holder img {
width: 100%;
height: auto;
}
then set up a template Template:Sized-external-image like this:
<div class="externalimage-holder" style="width:{{{1}}}">{{{2}}}</div>
and call it like this:
{{sized-external-image|250px|https://upload.wikimedia.org/wikipedia/commons/thumb/0/08/%D0%A2%D1%80%D0%BE%D1%97%D1%86%D1%8C%D0%BA%D0%B8%D0%B9_%D0%BC%D0%BE%D0%BD%D0%B0%D1%81%D1%82%D0%B8%D1%80.jpg/1024px-%D0%A2%D1%80%D0%BE%D1%97%D1%86%D1%8C%D0%BA%D0%B8%D0%B9_%D0%BC%D0%BE%D0%BD%D0%B0%D1%81%D1%82%D0%B8%D1%80.jpg}}
Unfortunately I can't test it right now as I'm having some difficulties with my local installation.
Related
I want to make the major event image on the left height larger, without affecting other pages.
https://islandeguide.com/event/
I Noticed this page has this that makes it unique
h2 class="theme-title" data-trans="Featured Events">Featured Events/h2
So I thought I may be able to do something like
page.themetitle[Featured Events] .col-sm-5 > .theme-box.theme-box-vertical > .theme-box-content img{
height: 350px;
}
I made this part up page.themetitle[Featured Events] so I knew it would not work.
Does anyone know if I can put something there that would work?
Note:
I can add CSS to custom CSS document, but that is all! I do not have access to change the HTML/PHP, also I can not add Javascript.
This website was designed in a way that makes it very difficult to target elements without changing others on different pages, as they share Classes everywhere.
Try this:
h2[data-trans="Featured Events"].theme-title + div.row div.col-sm-5 div.theme-box.theme-box-vertical img {
height: 350px;
}
Edit: You can shorten it a little using the child selector:
h2[data-trans="Featured Events"].theme-title + .row > .col-sm-5 > .theme-box.theme-box-vertical img {
height: 350px;
}
I have created an external stylesheet named new.css. It is linked in new.html, but the problem is, the image is not displaying. I have put all my three files new.html, new.css, and banner_bg.png in the same mobile assets folder.
I'm new in Cascading Style Sheets, so please guys help me out how to do this. Thank you.
Here's my code in JSFiddle.
You have absolute path for the image in the CSS.
Use relative path instead:
background-image: url("banner_bg.png");
Your div is absolutely positioned and has no content in it, which means its dimensions are 0x0. You will need to add some height and width (you might want to add them in %).
height: 200px;
width: 700px;
If for some reason you want to use the absolute path, you would do it like this (not recommended, as it will work for you, but nobody else):
background-image: url("file:///E:/Assignment Work/SWP/Assets/mobile assets/banner_bg.png");
You need to remove
position: absolute
and specify some height to check (as #pol suggested)
.top
{
height: 500px;
background-image:url("https://www.hello.com/img_/hello_logo_hero.png"); // Change with this your RELATIVE path
}
Please try this
.top
{
background-image:url("https://cdn3.tnwcdn.com/wp-content/blogs.dir/1/files/2015/04/usertesting.jpg");
width:100%;
height:500px;
display:block;
}
Basic question but I can't find it anywhere, is it possible to set the width and the height on the same line at the same time with the same value in my CSS?
I'm not asking for something like:
width:100%;height:100%;
But more like one of those:
width, height: 100%; // Same for both
width, height: 100%, 90%; // Different for each ones
dimensions: 100% 90%; // Like padding/margin,
I'm just asking about declaration, not Javascript on how to do that.
I found a related question to this one but for border and the short answer was no.
If it's not possible with CSS, is it with SCSS ?
There is no short hand for setting the height and width of the element in a single property declaration. You cannot do it with SASS as well.
But yea, SASS will provide you a feature to hold the common value shared in both property by declaring a variable like
$some-var-name: 100px;
.some-class {
height: $some-var-name;
width: $some-var-name;
}
As I said, even SASS won't help you writing height and width at the same time but you can use change the value of both from a single variable.
Ok I was about to add the #extend in the answer but since other user has already answered the same, (which is now deleted)
.size{
height:100%;
width:100%;
}
element {
#extend .size; //Sets element to height:100%;width:100%;
// more stuff here
}
I would suggest you to use a declaration of % instead of . so instead of using .size suggested use %size. This way your literal class of .size used only for extend purpose won't be included in the compiled stylesheet.
you can use css variable
/* css file */
:root {
--length: 50px;
--ratio: 1;
}
.box {
background: cornflowerblue;
width: calc(var(--ratio) * var(--length));
height: var(--length);
}
<!-- html file -->
<div class="box"></div>
then you can change --length in many ways and box width and height will respect to changes.
and Its better method than the SCSS variable for debugging purposes.
Articles
Comparison between CSS variable vs SCSS variable
Why we prefer CSS Custom Properties to SASS variables
You can set up Sass Mixin, like this:
#mixin size($width, $height) {
width: $width;
height: $height;
}
Then write just:
#include size(100%, 100%);
My little contribution if both w & h are equals :
div {
width: 100%;
aspect-ratio: 1;
}
This doesn't help much in typing, but with this, there is only one place to update.
To add onto the mixin solution by #Allrightman, you could even account for when the width and height are the same by setting a default value for the second parameter to equal the first:
#mixin size($width, $height: $width) {
width: $width;
height: $height;
}
If a user inputs a single value opposed to two, this will set them both to the same thing, covering both use cases.
There is no way to declare height and width at the same time in pure CSS, but you can use preprocessors css like SASS or LESS to declare the value to avoid repetition, but don't forget that after they get complied to CSS, they become pure CSS again...
Fo example in SASS you can do:
$width-height: 100%;
body {
height: $width-height;
width: $width-height;
}
So as you see, you can define it, but after it gets complied to CSS, it becomes like this again:
body {
height: 100%;
width: 100%;
}
But we all know this is not always the case, the CSS for the big applications could be much more complex, and reusing and declaring values using preprocessors css will help a lot to manage your css in a tidier way!...
I'm trying to figure out a way to make a page go full width (I'm using Drupal 7).
The page has an embedded form on it.
Previously there were two blocks, which when I removed I'd hoped the iframe would fill.
Current iframe
What I'm trying to achieve
How do I go about this? - Link
You should edit your theme's style.css file and remove the following lines (line 481):
#right {
display: block;
float: right;
width: 740px;
}
You still have an extra block in the left region (region-left-sidebar).
I'm using the excellent Jalbum to create a photo album for a website. Each page of the generated photo album is a complete webpage, so the recommended way to embed the album within a website is to use an iframe.
A problem arises when I want to style the images contained within the embedded iframe. If I add a rule such as:
img {
-ms-interpolation-mode: bicubic;
}
to my stylesheet, it does not select the images within the iframe. Is there a way to select elements contained within an embedded iframe?
Of course, I could manually edit the CSS file created by Jalbum before I embed the iframe, but I would need to remember to do this every time I regenerate the album.
You could use JavaScript code to insert a CSS include into the document of the iframe.
From my experience it is just about making CSS rules that are more specific than the rules within the iframe itself. this can be accomplished by for instance giving an ID to the iframe, and have that has the outer element, making it more specific (LESS example with a livestream embed that we are using on our platform):
#livestream-iframe-wrapper {
width: 100%;
height: 100%;
#livestream-viewer {
width: 100%;
height: 100%;
#layout0, #layout1, #layout2, #layout3 {
#layout4, #layout0-lsplayer, #layout1-lsplayer, #layout2-lsplayer, #layout3-lsplayer, #layout4-lsplayer {
width: 100%;
height: 100%;
#lsplayer {
width: 100% ;
height: 100%;
}
}
}
}
}
I cant give any specific information on how to do this for your case, but use the DOM inspector in the browser development tools to inspect the DOM and find the classes to override.