0

I have img tags that have parameters as part of the url. These parameters are used for an ajax image crop. They look like this

<img src="/resize/45-800/files/myImage.jpeg" alt="Chania">

By adding /resize/45-800/ in front of the url

I am able to tell the ajax script to get that file from the files directory, and dump a cropped version into /resize/files/

My question is, is there a way to remove these parameters 45-800/, which can be different each time, for file reading purposes only, so that html will read for the image like this

<img src="/resize/files/myImage.jpeg" alt="Chania">

but the world will see the src still like this

<img src="/resize/45-800/files/myImage.jpeg" alt="Chania">

Is this possible using htaccess?

I know I could use a query string and just use the ajax script to read from the src like this

<img src="/resize/files/myImage.jpeg?params=45-800" alt="Chania">

I was just hoping for a prettier way. I don't really want to use the question mark '?'.

The /resize and /files will always be there every time.

Does anyone know of a way?

kiko carisse
  • 1,634
  • 19
  • 21
  • *"so that html will read for the image like this `Chania` but the world will see the src still like this `Chania`"* ... I'm not entirely sure what you're getting at. – CD001 Feb 03 '17 at 14:28
  • Where do your files reside? You can use 'url slugs' and link that will actual file location. But the src of img has to be equal to the location, else you would have to write a complicated js script that intercepts all img requests. – Nitin Feb 03 '17 at 14:32
  • My files live in the `files` folder, but if I pass in `/resize/45-800/` in front of that in the src url, it puts a cropped copy of the image in the `/resize/files/` folder, which is where I would also like it to read from if the resize params are passed into the img src url. – kiko carisse Feb 03 '17 at 15:46
  • on `php` an [example](http://stackoverflow.com/a/900228/521880) – ramabarca Feb 03 '17 at 16:27

2 Answers2

0

I just had an epiphany... I could just put the crop width and height parameters in data attributes instead of in the url... So this

<img src="/resize/files/myImage.jpeg" data-wh="45-800" alt="Chania">

Instead of this

<img src="/resize/45-800/files/myImage.jpeg" alt="Chania">

Then I can serve them from the resize/files/ directory for all images that have the resize parameter passed into the url; and I don't have to use an ugly query string.

"/resize/45-800/files/myImage.jpeg?ugly=45-800"

kiko carisse
  • 1,634
  • 19
  • 21
0

So I haven't tested this, but I think I found the legit answer to my original question. I know its possible as the people at the last job I worked at used to resize images based on src url params. Here is the link - http://sneak.co.nz/projects/img-resizing/

My plugin is already finished and working now 8/ This method looks a little nicer though, they walk you through the whole image resize process, and use image caching as well.

Hope this helps someone as much as it does me if it works! I'll leave a comment if I end up testing it out and it works well.

kiko carisse
  • 1,634
  • 19
  • 21