FANDOM


  • I am trying to find how to zoom crop an image. Lets say I have an image that is 100px by 100px and I want give it the appearance of a zoom by 50% or even 100% from cropping but want it to stay 100px by 100px. I plan to have this in a gallery type setting or table.

      Loading editor
    • So you want to change the scaling of part of an image, but keep its frame the same size? You probably can't do that without JS or non-standard CSS (meaning it won't work reliably in all browsers). Also, what is supposed to fill in the blank area when you zoom out?

      Lastly, why do you want to do this?

        Loading editor
    • I figured js might be needed. Blank area would be cropped away. Well I have 1000s of items in my wiki and the top ways to search would be name, brand or colour and most of the images I want to use for it has too much blank space.

      These images tend to already come zoomed, so that was easy. These types will be hit or miss and some are 1000s of pics I am not cropping them and re-saving- that would take up all my time for eternity. Was hoping there was a CSS that could save me.

        Loading editor
    • I can't think of a way the blank area could get cropped, even with JS.

      CSS zoom appears to work on most browsers except Firefox, but that is a pretty major browser to cut out: https://caniuse.com/#feat=css-zoom

        Loading editor
    • Hmm, I thought it could be done cause I thought this site did it (I just can't figure out how they did it).

        Loading editor
    • I can't see anything on that site that looks like the feature you want.

        Loading editor
    • The zoomed in swatches on the left-hand side. The original image loos like a full circle, but the thumb is a zoomed cropped version.

      Zoom thumbnail sample

        Loading editor
    • lol Where do I flag spam?

        Loading editor
    • So that doesn't look like a zoom at all, just a scaled down version on the left. It also is nothing like you described in your original post.

        Loading editor
    • Fandyllic wrote: So that doesn't look like a zoom at all, just a scaled down version on the left. It also is nothing like you described in your original post.

      Ok, then I am wording it wrong I want a cropped image most of the original images are larger like this example but I'l be having them in a 100px by 100px setting but if I can crop like the example imo it looks zoomed and cropped but I guess yeah it's not technically zoomed.

      I looked and saw no original image of a segment of a circle, this appears to have came from the circle.

        Loading editor
    • Do you need the full images or are you using them just for this "zoomed" view? If the later, you could just crop all the images in some external program and reupload them.

        Loading editor
    • Andrewds1021 wrote: Do you need the full images or are you using them just for this "zoomed" view? If the later, you could just crop all the images in some external program and reupload them.

      I want to keep originals too (and I don't want two images of basically the same thing) and I do not want to re-crop all- my wiki has over 9k+ images and growing (prolly 1/2 ish or more would be a candidate eventually), I'd never stop cropping. That is why I was hoping there was css for it.

        Loading editor
    • If I can't get this I may re-crop a handful on 1-2 templates (which is being featured on main page) but that is it, anything more than a few dozen I should just opt out of the idea.

        Loading editor
    • Wait, so what definition of "crop" are we using here? Crop usually means you cut out a smaller rectangular portion of an original image and use that. It does not mean a scaled down version of the original image...

        Loading editor
    • The impression I had was that the desired effect was to display only a portion of the actual image.

        Loading editor
    • Fandyllic wrote: Wait, so what definition of "crop" are we using here? Crop usually means you cut out a smaller rectangular portion of an original image and use that. It does not mean a scaled down version of the original image...

      In my example here those are not the original sizes and 5 were auto cropped due to the galleries (orientation="square "). Due to this auto-crop it made those 5 images IMO appear zoomed (but you are right they are just cropped) and since the gallery has a scaling option (widths="60") I thought to get what I am looking for: scaling and/or zoom and crop.

      Gallery almost is what I want (but isn't fully- so I am looking for css, js or whatever to see if I can get what I want). In the laymen I want to remove/crop-out the white which I thought would mean the image would then be fit-to-scale. But I am not an expert and I am not versed eloquently to this terminology, so I am sorry I have cause some confusion.

        Loading editor
    • Andrewds1021 wrote: The impression I had was that the desired effect was to display only a portion of the actual image.

      Yes.

        Loading editor
    • You can do cropping easily with CSS and the MediaWiki engine can do the scaling for you. However, displaying in a separate frame of a different size will require JS.

        Loading editor
    • Doing this is going to be a bit more involved than your standard image syntax; but it seems like you already expected that. If all the images in a particular gallery are the same size and the desired portion is in the same place for all of them, then you could get away with just some CSS. Anything beyond that would require JS. Alternatively, you could not use galleries but then you would have to do a lot of work to make it look like a gallery. Even then, getting the view you want would still be a bit complicated; but doable.

        Loading editor
    • Andrewds1021 wrote: Doing this is going to be a bit more involved than your standard image syntax; but it seems like you already expected that. If all the images in a particular gallery are the same size and the desired portion is in the same place for all of them, then you could get away with just some CSS. Anything beyond that would require JS. Alternatively, you could not use galleries but then you would have to do a lot of work to make it look like a gallery. Even then, getting the view you want would still be a bit complicated; but doable.

      Yes, I did figure I may not be able to do this in a gallery or may require js.

      I am not in a rush with this (I still prioritize populating my database- this is just a side project I'd really like to eventually implement in various forms on various pages) and I have galleries as a crutch for some pages for now and that is totally fine for now. If I could get a start point of css/code or links of how to start- it would really be appreciated.

        Loading editor
    •   Loading editor
    • I probably should have noticed this earlier, but if you want to stick with using gallery tags (which will make the page markup simpler), then I believe you will have to use JS. If you are willing to hotink the images, you could use Vignette to do the cropping. I had previously started on a template for this but haven't finished it yet. The downside to hotlinkingis they won't register in the system of places where the images are used. As such, the images may appear to be unused when they actually are being used.

        Loading editor
    • Andrewds1021 wrote: I probably should have noticed this earlier, but if you want to stick with using gallery tags (which will make the page markup simpler), then I believe you will have to use JS. If you are willing to hotink the images, you could use Vignette to do the cropping. I had previously started on a template for this but haven't finished it yet. The downside to hotlinkingis they won't register in the system of places where the images are used. As such, the images may appear to be unused when they actually are being used.

      Even if the images are used else where without the alteration?

      Either way though simpler sounds easier.

        Loading editor
    • In that case, you may want to ask for help here. Although I have some idea of what the JS would do, I am not sure on how to implement part of it. If needed, I can provide the general procedure I have in mind but chances are whoever helps you there will be able to come up with something similar.

        Loading editor
    • Ty, I'll ask tomorrow when my head is less sleepy¬†:)

        Loading editor
    • Andrewds1021 wrote: In that case, you may want to ask for help here. Although I have some idea of what the JS would do, I am not sure on how to implement part of it. If needed, I can provide the general procedure I have in mind but chances are whoever helps you there will be able to come up with something similar.

      Every time I try to post there I get this.

        Loading editor
    • Hmmm... That is odd. Are you at least able to view the board?

        Loading editor
    • Yes, just cant seem to post.

        Loading editor
    • Hmm... That is odd. Let me see if I can start one. If so, I'll do that and then you can see if you are able to reply.


      Edit:

      See if you can reply to this thread.

        Loading editor
    • Andrewds1021 wrote: Hmm... That is odd. Let me see if I can start one. If so, I'll do that and then you can see if you are able to reply.


      Edit:

      See if you can reply to this thread.

      Yes I can reply! weird I couldn't post...

        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.