Thumbnail cache filenames
Permalink
I use the Image Helper function getThumbnail() fairly often to generate varying sizes of images automatically.
My issue is the naming convention;
c02d8f92b24f8f78a0dce40baef972f0.jpg
Has anyone attempted to programmatically overcome this? I'd actually like it to be formed from the standard filename for the parent image, since this basically ruining any SEO efforts for image-based search.
My issue is the naming convention;
c02d8f92b24f8f78a0dce40baef972f0.jpg
Has anyone attempted to programmatically overcome this? I'd actually like it to be formed from the standard filename for the parent image, since this basically ruining any SEO efforts for image-based search.
Yes I've seen that, but I wondered if anyone's done it?
I'm guessing there's a bit more too it to ensure they get renamed/maintained whenever the parent image gets updated.
If there's nothing out there, I guess I'll write a package.
I'm guessing there's a bit more too it to ensure they get renamed/maintained whenever the parent image gets updated.
If there's nothing out there, I guess I'll write a package.
For as specific asset, the fID is constant, even if you updated the master image without updating the thumbnail, the fID is constant. There is a separate fvID that changes with versions of a file asset.
I think the ideal situation, if you write a package, is to allow the thumbnail to be regenerated from just the filename.
Theoretically (though not necessarily) it'd provide for better SEO. But, most importantly, I've run into the situation where the thing that generates the thumbnail doesn't get called as frequently as the thumbnail is used, and that thumbnail gets deleted, causing 404s.
The most obvious example is if your images are interesting enough that they're getting indexed and shown in google image searches. Google will refer to the thumbnail, which you might delete from the cache directory, and thus show 404s. Also even on-site stuff, where the output (including the img src) is cached, and then the thumb is deleted.
One of the side benefits of this (depending on how you do it) is quicker loading times. Right now if you load a page with 25 thumbnails that aren't generated then, during page generation, c5 will thumbnailize those images, causing the page itself to take a LONG time to load. In the other scenario (where the thumbnail code just generates a URL), you end up with the same total time, but the page loads quite fast, and the images load one by one (though more slowly).
If you go ahead with this, there are two solutions. One is to add all the data to the thumbnail name (either as directories or part of the filename). You'd ideally do this with an array of all options (so that it maintains things like crop and whatever gets added in the future), but remove default options (to keep the filename from getting too long). Keeping it in the filename allows for more forward compatibility.
Or you could create a "tID" that has a row in the db that contains all info necessary to recreate...
Theoretically (though not necessarily) it'd provide for better SEO. But, most importantly, I've run into the situation where the thing that generates the thumbnail doesn't get called as frequently as the thumbnail is used, and that thumbnail gets deleted, causing 404s.
The most obvious example is if your images are interesting enough that they're getting indexed and shown in google image searches. Google will refer to the thumbnail, which you might delete from the cache directory, and thus show 404s. Also even on-site stuff, where the output (including the img src) is cached, and then the thumb is deleted.
One of the side benefits of this (depending on how you do it) is quicker loading times. Right now if you load a page with 25 thumbnails that aren't generated then, during page generation, c5 will thumbnailize those images, causing the page itself to take a LONG time to load. In the other scenario (where the thumbnail code just generates a URL), you end up with the same total time, but the page loads quite fast, and the images load one by one (though more slowly).
If you go ahead with this, there are two solutions. One is to add all the data to the thumbnail name (either as directories or part of the filename). You'd ideally do this with an array of all options (so that it maintains things like crop and whatever gets added in the future), but remove default options (to keep the filename from getting too long). Keeping it in the filename allows for more forward compatibility.
Or you could create a "tID" that has a row in the db that contains all info necessary to recreate...
Here's how I accomplished this...
For anyone new to overriding concrete5 functions: copy concrete/helpers/image.php to your base helpers/ directory, then paste the following within class ImageHelper.
This will return thumbnails with the following naming convention:
(original filename)-(max width of thumbnail)-(max height of thumbnail)-(quality)-(cropped: 1 for yes 0 for no)-(file ID).(file extension)
The full helpers/image.php file is attached.
For anyone new to overriding concrete5 functions: copy concrete/helpers/image.php to your base helpers/ directory, then paste the following within class ImageHelper.
This will return thumbnails with the following naming convention:
(original filename)-(max width of thumbnail)-(max height of thumbnail)-(quality)-(cropped: 1 for yes 0 for no)-(file ID).(file extension)
public function getThumbnail($obj, $maxWidth, $maxHeight, $crop = false) { $fID = false; if ($obj instanceof File) { $path = $obj->getPath(); $fID = $obj->getFileID(); } else { $path = $obj; } /* BEGIN: Updated code */ $fh = Loader::helper('file'); $suffix = $this->jpegCompression; // Add prefix for compression level to serve the properly compressed images $suffix .= ($crop ? '-1' : '-0'); // Name cropped images different from resized images so they don't get mixed up in the cache $origName = strtolower(preg_replace('/_/', '-', preg_replace('/.'.$fh->getExtension($path).'$/', '', substr(strrchr($path, "/"), 1)))); if (file_exists($path) && $fID) { $filename = $origName . '-' . $maxWidth . '-' . $maxHeight . '-' . $suffix . '-' . $fID . '.' . $fh->getExtension($path);
Viewing 15 lines of 38 lines. View entire code block.
The full helpers/image.php file is attached.
Hi there,
I've built a site in 5.6.3.2 and my SEO person is not happy that 247 images have been indexed with "http://www.mysite.com/files/cache/009d8e7ee0dccbd7ec0611d357762920_f147.jpg" names. They specifically gave file names based on their keywords research.
There are only 86 images actually used on the site, the rest are the resized versions in galleries, blog thumbnails etc.
I see the code you have suggested. Will this work (in 5.6.3.2) and only moving forward once implemented? Or is there someway to get all of those 'non seo named' images renamed without creating 404's?
Any help is greatly appreciated!
Thanks in advance
I've built a site in 5.6.3.2 and my SEO person is not happy that 247 images have been indexed with "http://www.mysite.com/files/cache/009d8e7ee0dccbd7ec0611d357762920_f147.jpg" names. They specifically gave file names based on their keywords research.
There are only 86 images actually used on the site, the rest are the resized versions in galleries, blog thumbnails etc.
I see the code you have suggested. Will this work (in 5.6.3.2) and only moving forward once implemented? Or is there someway to get all of those 'non seo named' images renamed without creating 404's?
Any help is greatly appreciated!
Thanks in advance
robkovacs, thank you so much for this code! I've got lots of images and thanks to your code they now have much more SEO friendly file names now!
designsforchange, if you download and extract the archive provided above, then upload the php file to /helpers/ in your site you should see your file names are much more improved. It will affect existing images and new.
designsforchange, if you download and extract the archive provided above, then upload the php file to /helpers/ in your site you should see your file names are much more improved. It will affect existing images and new.
Hi madesimplemedia,
I have implemented as per your suggestion and I do not see any change to existing cached images. They still all have the file name similar to:
http://www.mysite.com/files/cache/7109fb37208ec5684cc87b8f49b2722f_...
Am I missing something? In the helper class it has by default {}. Should the code be in between those brackets? I've tried with and without?
Thank you for your efforts! Super appreciated
Cheers
I have implemented as per your suggestion and I do not see any change to existing cached images. They still all have the file name similar to:
http://www.mysite.com/files/cache/7109fb37208ec5684cc87b8f49b2722f_...
Am I missing something? In the helper class it has by default {}. Should the code be in between those brackets? I've tried with and without?
Thank you for your efforts! Super appreciated
Cheers
Hi,
If you use your browser console to inspect the image in the website, do you still see the un-seo'd file name?
You should just be able to download the attached one above (image.php) and upload to your /helpers/ directory in the root of your site.
I am seeing a strange "x" on the front of some file names though.
If you use your browser console to inspect the image in the website, do you still see the un-seo'd file name?
You should just be able to download the attached one above (image.php) and upload to your /helpers/ directory in the root of your site.
I am seeing a strange "x" on the front of some file names though.
Hi there,
I see it has renamed them now, but now on the News page where it lists all of the blog posts, I get this error instead of the thumbnail chosen. I've created a new blog and it doesn't have this issue with the thumbnail?
Warning: preg_replace(): Unknown modifier 'h' in /home/foundry/public_html/helpers/image.php on line 36
http://www.pentictonfoundry.com/news/...
Any help is greatly appreciated.
I see it has renamed them now, but now on the News page where it lists all of the blog posts, I get this error instead of the thumbnail chosen. I've created a new blog and it doesn't have this issue with the thumbnail?
Warning: preg_replace(): Unknown modifier 'h' in /home/foundry/public_html/helpers/image.php on line 36
http://www.pentictonfoundry.com/news/...
Any help is greatly appreciated.
if you look at the image helper code, you can see how fID is added after the hashed name is generated.