FANDOM


  • Hi, I just wanted to come on here for some help on how to resize the image in an infobox.

    Here are images of what I've been trying to do:

    1221Adira
    09
    I may have not been using the code correctly or maybe it's an old style that isn't used anymore.






    If there is a new coding to this, I would probably need to use it.

      Loading editor
    • Please provide links not screenshots. How you change the image size would depending on whether or not you are using a portable infobox or a classic infobox. This is something that cannot be determined from the images you posted.

        Loading editor
    • I'll remember to use links not screenshots, I didn't know that screenshots weren't allowed.

      I have another question, is this infobox a portable or a classic infobox?

        Loading editor
    • Screenshots are allowed; it is just they aren't anywhere near as useful as access to the page itself. For example, you just asked me to check if this is a portable infobox or not. I can't do that with the images you provided. However, I could do it if I had access to the page itself.

        Loading editor
    • This page is from this wiki

      I do know how to use tabber codes, but our pages we like to have a certain size, not too big or too small, I tried resizing the transparent image in a program, but the image remains the same when you uploaded to the wiki

      There's also a few pages on here that may also have that problem, I could list them if you want, there isn't too many that have that problem.

      This time i'm going to send links, because you could do it if you had access, you can click the link here

        Loading editor
    • Okay. Thanks for the links. They help a lot.

      The infobox is indeed a portable infobox. From your screenshot, it looks like you are trying to use code from an older infobox that was not a portable infobox. In short, your hypothesis regarding the style of your attempted change is correct.

      With portable infoboxes, you cannot set the width of the image via the infobox input. Instead, you have to use site CSS. What is it you are trying to do about the size?

      I am not sure how your comment on tabber is related. Could you explain? Was it just to provide context or are you having an issue with tabber as well?

        Loading editor
    • I don't have issues with doing tabber codes, but, All I'm pretty much doing is trying to use the code to just resize the image in the infobox.

        Loading editor
    • Well, like I said, resizing images in portable infoboxes has to be done using site CSS. The infobox should restrict the width of the image to the default with of the infobox. Are you trying to make it even less wide than that? I am just trying to understand what you are trying to achieve by controlling the size. What you are trying to do will determine what CSS you use.

        Loading editor
    • I chatted with a user I know on this wiki earlier today, he said that he knows a wiki I think he said "Big Idea Wiki." He said that when I uploaded a transparent image of that page on our wiki, he said that the wiki he also contributes too uses those types of infoboxes, and he tried copying me the source what they use, and It didn't really work so I thought to come on here for help, they use that for tabber codes with the image sizing. I am just wanting to use it for the image in the infobox to be viewed resized.

        Loading editor
    • So, are you just giving me background information or are you trying to say that someone else has found the solution to your issue? If you still need help with this, then my previous question still stands. What is it you are trying to do by resizing the image? Are you trying to fix it to a specific width, a specific height, or both? Are you just trying to makes sure it doesn't get too big or are you trying to make sure it doesn't get too small?

        Loading editor
    • He didn't really found the situation, so far, he just tried to explain to what he knows so far about the coding. The image I am wanting to do is expand it's height.

        Loading editor
    • Okay, so you want to make the image taller. How much taller? Are you okay with stretching the image? If not, you are either going to have to uploaded a cropped version or make it wider as well. While you could make it wider, I wouldn't suggest that. The image is currently as wide as it can be without chanign the size of the infobox. While you could do that, it would sort of ruin the overall aesthetic of the infobox.

        Loading editor
    • Probably around 275px. And yes Id be fine if the image is stretched. 

      Here are list of pages besides that, that have that problem

      [1]


      [2]

        Loading editor
    • In that case, just add this CSS to the wiki's CSS.

      .portable-infobox .pi-image img {
          min-height: 275px;
      }

      This will force all infobox images to stretch until they have a height of 275px. If the image already has a height of 275px or larger, the image will be left unaltered.

        Loading editor
    • Does that mean the image could disappear?

        Loading editor
    • Huh? What do you mean?

        Loading editor
    • Like when you said "the image would be left unaltered." ?

        Loading editor
    • Oh. The CSS will not impact images that are already 275px or more in height. So no, they won't disappear.


      Edit:

      think of it this way. The CSS I gave you is telling the page to make sure every image in the infobox is at least 275px tall. If the page finds an image that is already that tall (or taller), then no change is needed. If the page finds an image that is not that tall, then the image is stretched.

        Loading editor
    • Ok, I see where it's going. :)

        Loading editor
    • Where would the CSS go, would it go after were it says "Image1 ="?

        Loading editor
    • No, it would go on your wiki's CSS page.

        Loading editor
    • Do you add it to the CSS page or when you do it, it'll come up there automatically?

        Loading editor
    • Andrewds1021 wrote:
      Oh. The CSS will not impact images that are already 275px or more in height. So no, they won't disappear.----

      Edit:

      think of it this way. The CSS I gave you is telling the page to make sure every image in the infobox is at least 275px tall. If the page finds an image that is already that tall (or taller), then no change is needed. If the page finds an image that is not that tall, then the image is stretched.

      So do you think you might come on the wiki and try to do it? Hey I almost got it actually, but the coding I copied had a color code so I reverted my edit because all I want is just to have that image resized a little.

        Loading editor
      1. Only wiki admins can edit the CSS, so I wouldn't be able to help.
      2. Did you copy CSS from somewhere else as well? The CSS I gave you for the image size doesn't have a color code in it.
      3. Which wiki and page did you edit? I don't see any changes to the site CSS for the wiki you previously linked to.
        Loading editor
    • Would it be a bad idea if I could give you permission rights? I'm a content moderator on charactercommunity.fandom.com

      And yes I did copy a CSS that an administrator knows another wiki that uses it, but it isn't the same thing what I'm trying to use, I don't want tabber or color background, just image resize.

      There's were I tried to edit

        Loading editor
    • Again, you do not add this to the page that has the template. You add it to a separate page dedicated to hosting the wiki's site-wide CSS. Only wiki admins are allowed to edit these pages so you will need to ask one of the admins to add it for you.

        Loading editor
    • Oh I see what your saying, but are you able to show me that page and I'll try to copy it on that page in our wiki

        Loading editor
    • You're a content moderator. You can't.

      You need an admin to add this

      .portable-infobox .pi-image img {
          min-height: 275px;
      }

      to MediaWiki:Wikia.css. It already has some code for infobox styling, so it's best to add it under that section.

        Loading editor
    • Thank You for providing the source and since I'm just content moderator here, I don't have the permission to edit it, I just left the main admin on his wall that if he could do it. :)

        Loading editor
    • 21EvanED155508
      21EvanED155508 removed this reply because:
      Don't worry I toke care of it.
      05:10, April 4, 2020
      This reply has been removed
    • 21EvanED155508
      21EvanED155508 removed this reply because:
      Never mind
      05:09, April 4, 2020
      This reply has been removed
    •   Loading editor
    • That's because only the height is being changed; with the width remaining untouched and the height being increased, the image ends up being squished.

      To fix that issue, the width has to be set to auto; but then, this causes another issue: the width of image would be too big to fit the width of infobox so the image will appear cut off by horizontal side. You can increase the width of infobox, but the expanding it enough to fit the enlarged images would end up too big and it'd make the layout look rather unpleasant... I wouldn't recommend it.

      Why are you trying to make the images in infoboxes huger? The default sizing of them is well enough and free of hassles.

        Loading editor
    • I did start to increase the width as well, I was doing this with a different issue because some pages images aren't a big enough size and what happened was unexpected.

      Does the width have to be close amount with scaling the height?

        Loading editor
    • Squished and stretched are essentially referring to the same issue; which I already pointed out in an earlier post. Each image has a width and height. The ratio of width to height is referred to as the aspect ratio. When changing the size an image is displayed at, you can either preserve the aspect ratio or not. If you don't, the image will be stretched/squished; whichever term you prefer.

      Unfortunately, it is not possible with portable infoboxes to increase the size of an image and preserve its aspect ratio. If you want all of your images to have the same width and height as each other when in infoboxes, you will need to make sure that images that are uploaded all have the same aspect ratio as each other; which they currently do not.

      There is a maximum width that is imposed. By default, images that are wider than the infobox are scaled (resized while preserving the aspect ratio) down such that the width fits inside the infobox. Images that are not wider than the infobox are displayed at their original size.

      You can use CSS to resize the images but you would need to have a separate CSS rule for each an every image. Furthermore, images that have an aspect ratio not equal to the one you are looking for will have parts of the image cut-off.

        Loading editor
    • Can you explain what the border radius, is suppose to be? Is it something that helps or is it a part of the code?

        Loading editor
    • Border radius is what gives your infoboxes the rounded corners. It is not directly related to the images.

        Loading editor
    • Also is there a way to do this for only the pages you want to have the infobox image to resize?

        Loading editor
    • Yes, you can use theme for it.

      As an example, you'd use following CSS:
      .portable-infobox.pi-theme-250px .pi-image-thumbnail {
        width: auto;
        height: 250px;
      }
      And this'll go on the infobox template:
      <infobox theme-source="image_size">
      And then you'd use it on the page infobox like this:
      | image_size = 250px
        Loading editor
    • Just to clarify, you will need to write a different CSS rule for each size you use. For isntance, if you later decided to do

      | image_size = 251px
      

      Then you would need to add

      .portable-infobox.pi-theme-251px .pi-image-thumbnail {
        width: auto;
        height: 251px;
      }
        Loading editor
    • CrazyForMyself wrote:
      Yes, you can use theme for it. As an example, you'd use following CSS:
      .portable-infobox.pi-theme-250px .pi-image-thumbnail {
        width: auto;
        height: 250px;
      }
      And this'll go on the infobox template:
      <infobox theme-source="image_size">
      And then you'd use it on the page infobox like this:
      | image_size = 250px

      For the infobox template: Which one goes first?

        Loading editor
    • Hmm, sorry, I don't understand what you mean. To explain it more clearly, though: on Template:CharacterInfoboxRemake (assuming that's the infobox you need it for), you'll have to replace <infobox> with <infobox theme-source="image_size">.

        Loading editor
    • Ok, that was what I was talking about. :)

        Loading editor
    • Rickpinguipolo
      Rickpinguipolo removed this reply because:
      I know how now
      16:53, April 20, 2020
      This reply has been removed
    • CrazyForMyself wrote:
      Hmm, sorry, I don't understand what you mean. To explain it more clearly, though: on Template:CharacterInfoboxRemake (assuming that's the infobox you need it for), you'll have to replace <infobox> with <infobox theme-source="image_size">.

      It's strange, I don't see this "<infobox.>"

        Loading editor
    • Your template is simply enough that InfoboxBuilder is still triggered when you attempt to edit it. You need to switch to source editing in order to see the infobox tags themselves. In the editing panel on the right, there should be a link in the bottom right that says "[[ ]] Source Editor". Click that to enter source mode.

        Loading editor
    • 21EvanED155508 wrote:
      CrazyForMyself wrote:
      Yes, you can use theme for it. As an example, you'd use following CSS:
      .portable-infobox.pi-theme-250px .pi-image-thumbnail {
        width: auto;
        height: 250px;
      }
      And this'll go on the infobox template:
      <infobox theme-source="image_size">
      And then you'd use it on the page infobox like this:
      | image_size = 250px
      For the infobox template: Which one goes first?

      Ok so another thing I need to know about , "|image_size = 250px?

        Loading editor
    • That goes on the article page as part of the template call.

        Loading editor
    • source mode, or visual editor?

        Loading editor
    • I think you should be able to use either. However, source mode would definitely work.

        Loading editor
    • Do you do it in a way similar to doing tabbed like at the end use the same code but with a / symbol by the <

        Loading editor
    • No, you do it like a regular template parameter. For example:

      {{CharacterInfoboxRemake
      |title1=Example Title
      |image_size=250px
      |image1=Example.png
      |caption1=This is an example caption.
      }}
      
        Loading editor
    • Ok

        Loading editor
    • 21EvanED155508
      21EvanED155508 removed this reply because:
      Never mind
      10:43, April 21, 2020
      This reply has been removed
    • And is there a way where it will stay in the center of the infobox because the issue I"m having two pages's images are hanging outside of the infobox.

        Loading editor
    • Can you link to these two pages?

        Loading editor
    • [[1]]

      [[2 ]]

        Loading editor
    • As I suspected, these images are being too enlarged to fit in the width of infobox. There isn't really a way to fix it, besides either increasing the infobox width (which - as I explained before - isn't an ideal solution) or not enlarging them that much but lesser so.

        Loading editor
    • How did we end up here again? This is like the 3rd time we have had to explain this "issue".

        Loading editor
    • I just realized something if you make an image to decrease it's width, it wouldn't be dealing with this issue.

        Loading editor
    • A FANDOM user
        Loading editor
Give Kudos to this message
You've given this message Kudos!
See who gave Kudos to this message
Community content is available under CC-BY-SA unless otherwise noted.