FANDOM


  • I am to trying to create a frame template that users can input an image and adjust which portion of the image they want to display. This is the template[1] and CSS[2].

    Basically, under the covers, the img is using absolute coordinates and the position can be adjusted through CSS using the top, right, left, bottom properties. However,

    [[File:XXX]]

    provides no option to adjust the style, so if possible I was wondering if there was a way to get the url that gets extracted for

    [[File:XXX]]

    For example:

    [[File:Example.jpg]]
    

    becomes

    <img src="https://vignette.wikia.nocookie.net/community/images/8/87/Example.jpg/revision/latest/scale-to-width-down/600?cb=20180218035435" alt="" class="" data-image-key="Example.jpg" data-image-name="Example.jpg">
    

    Is there a way to get the src of img?

      Loading editor
    • filepath: 100pxangela.jpg
      {{Filepath:100pxangela.jpg}}
        Loading editor
    • That's close but not exactly what I need. I want to the src url of the img instead. So for your example, I would need "100pxangela.jpg"

        Loading editor
    • Schen13 wrote:
      That's close but not exactly what I need. I want to the src url of the img instead. So for your example, I would need 
      "https://vignette.wikia.nocookie.net/central/images/d/d7/100pxangela.jpg/revision/latest?cb=20051101015623"
        Loading editor
    • it is. exactly. read the link above.

        Loading editor
    • I tried that, but it was returning me img not the actual URL.

      <img src="{{filepath:100pxangela.jpg}}" />
      

      was returning

      <img src=""<img src="https://vignette.wikia.nocookie.net/central/images/d/d7/100pxangela.jpg/revision/latest?cb=20051101015623" alt="100pxangela.jpg">
      "" />
      
        Loading editor
    • you can't use <img> tag in wikitext.

        Loading editor
    • It isn't complete yet, but I started to create this a while ago in response to two similar requests. Two other recent similar requests prompted me to continue the effort. It hotlinks the images which is not ideal but it is the only way (as far as I know) to get the effect you want without either using JS or requiring users to download-crop-upload separate versions of the images. The reason hotlinking isn't ideal is because the images are images are treated as external content. In addition to issues I probably haven't thought of, this means that the hotlinks don't count towards the image use counts. So, for example, if you use an image 20 times but all 20 instances are hotlinks, the image will still be shown in the database as unused.

        Loading editor
    • Sometime things don't work because your assumptions are wrong (img tag works in wikitext)... even if the answer to your question is absolutely correct.

        Loading editor
    • Really? I thought it wasn't on the whitelist.

        Loading editor
    • "img tag works in wikitext" is a wrong assumption... you seem to have misread my statement.

        Loading editor
    • Indeed I did misread your statement.

        Loading editor
    • Is there a way to add a link to the image? If you look at my current template, it looks like what I want, but now I want to add a link to the image. I can’t use
      [[File]]
      because I can’t get it to look like the filepath implantation with css. I tried the localurl function but I can’t wrap it around the image.
        Loading editor
    • filepath: returns the filename. could you explain, with more words, what are you trying to do, and why you can't use [filepath:file name] or [[file:file?

        Loading editor
    • So to clarify, I updated my template[1] again to demonstrate the issue. So the top left triangel is using Template:Filepath while the bottom right triange is using [[File:]]. The problem [[File:]] is having is that for whatever reason, it does not scale the width when I changing the height. Template:Filepath does not have that problem. In the CSS, the wrapping div is set to 'height: 100%'. I'm not sure what the difference is between the two, so I'm trying to see if there is another way of adding a link to an image.

        Loading editor
    • Never mind, I think I figured it out. I think because [[File:]] sets the width height properties, it skrews up the scaling. I fixed the issue by setting width/height to auto fixes the scaling issue. 

        Loading editor
    • So everything is all set then?

        Loading editor
    • Yeah, thanks everyone for your help.

        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.