December 10, 2012 at 2:15 pm #18560
I used to have a website created with Joomla/Virtuemart.
When I wanted to add new products to the shop, I first created thumbnails of appropriate sizes (easily done e.g. in Adobe Lightroom on the basis of a custom template).
In Virtuemart I could then choose whether to have Joomla/Virtuemart create the thumbnails or to import my custom thumbnails (without Joomla/Virtuemart messing with resizing).
Personally I prefer having control over the process of creating the thumbnails. If WP/WooCommerce screw up your images, there is currently nothing you can do about it.
Would it be possible to get this option in a future version of Flashlight?
BrunoDecember 10, 2012 at 3:14 pm #99940
You sort of can do that now but not directly through wordpress. Just access your media files via FTP and you can download the thumbnails that have been automatically created. Use those file names to create your own thumbnails then upload and replace them on your server.
Just make sure the new thumbnails will work in the same areas (nothing smaller than what is created etc) and that will do it.
DevinDecember 10, 2012 at 3:19 pm #99941
Well, what you need to do, is count how many different image sizes do you want the same image to be in. 1 time of product page, 1-2 times in lightbox, etc.. And figure out exact size you want in each of those instances and let me know and we get you back on track.
[Edit] Devin’s idea is quite brilliant. Then can control the size with css.
NickDecember 10, 2012 at 4:13 pm #99942
what I already had tried is:
From an image file “1109_D3B_1167.jpg” I created a thumbnail 190x284px and renamed it “1109_D3B_1167-190×284.jpg”.
Then I FTP uploaded it into the Media Library.
I created a new product “MT 1167″
When I click on the “upload” button (in the “add product” page), I have no access to the Media Library, only to my computer.
Only when I click on the “set as featured image” button I have access to the Media Library.
I uploaded and it was correctly displayed on the “add product” page.
However: as soon as I click the “update” button, the image disappears and does not appear on the website.
What’s going on?
BrunoDecember 10, 2012 at 4:40 pm #99943
Adding -###x### to an image doesn’t mean the theme will use it. The theme is what creates those kinds of files via functions.
What I was describing above is to look at your specific items already generated image file and then replace it with whatever you want. Example: on the demo, the first item “Donec Quam” in the catalog view uses this specific image for the thumbnail: http://www.kriesi.at/themes/flashlight/files/2011/12/envato_red-giant2sm-200×140.jpg
On the individual item page it uses this file for the slideshow at the top: http://www.kriesi.at/themes/flashlight/files/2011/12/envato_red-giant2sm-430×200.jpg
And for the big background image it uses the originally uploaded file: http://www.kriesi.at/themes/flashlight/files/2011/12/envato_red-giant2sm.jpg
For you, you can replace either of the thumbnails to be exactly what you want to show. Just make sure that you replace them with the exact same file name.
DevinDecember 10, 2012 at 5:25 pm #99944
To further expand, if image says dog-300×500.png after you upload it, you login through ftp, download that image, resize it to 600×900 (for example) and upload it back again (without renaming it) *with ftp* to overwrite the original file dog-300×500.png (though in reality the image is now 600×900) but WordPress still thinks its 300×500 so it will not try to resize it. You basically fool WordPress. :)
NickDecember 10, 2012 at 8:21 pm #99945
now I’m even more confused.
In order to figure out which thumbnail I should replace, I uploaded 2 images of the same size, but of different orientation (vertical/horizontal).
Upon upload I selected the size option “Medium (284×188)” for both images.
Then I inspected the thumbnails generated by the theme:
The horizontal image resulted in 9 thumbnails.
The vertical image resulted in 10 thumbnails.
Both (vertical and horizontal image) resulted in thumbnails of the 4 sizes I could select in the upload process.
The additional sizes are not the same for the vertical and the horizontal image – despite the identical setting upon uploading.
In one instance the vertical image resulted in a horizontal thumbnail (300×201 px)!
Then I measured the size of the images displayed on the frontend.
The horizontal image measures 284×188 px, which is what I had selected upon uploading.
However: the vertical image is 282×428 px – but NO thumbnail of this size was created (closest are 240×361 and 430×647).
I checked the size of all thumbnail files in Photoshop – they match what their name says.
I inspected the thumbnail on the frontend with Firebug: it tells me that the vertical thumbnail is the one named “126×190″.
However: the 126×190 thumbnail really IS 126×190 px. How come it is displayed at 282×428?
I did another test:
I created a new product, uploaded the (vertical) image and let the theme create the thumbnails.
Same result: the thumbnail displayed on the frontend was 282×428 px.
I grabbed my FTP client and deleted the 126×190 px thumbnail from the Media Library
Whereupon the thumbnail disappeared from the frontend .
This IMHO proves that a thumbnail sized 126×190 px suddenly increases to 282×428 px when it appears on the frontend (same monitor).
What’s going on?
The size options that can be selected upon uploading are:
- Thumbnail (150×150)
- Medium (284×188)
- Large (1024×680)
- Full (3947×2622)December 10, 2012 at 8:31 pm #99946
I think I need:
2 sizes for the 3:2 (horizontal) images:
- lightbox (e.g. 900×600 px )
- category/subcategory/featured image/product detail (e.g. 300×200 px))
2 sizes for the 2:3 (vertical) images:
- lightbox (e.g. 520×780 px )
- category/subcategory/featured image/product detail (e.g. 200×300 px))
2 sizes for the square images
- lightbox (e.g. 600×600 px)
- category/subcategory/featured image/product detail (e.g. 300×300)
1 size for the background (slider): 1024×682 px (horizontal images only)
Does this make sense?
BrunoDecember 10, 2012 at 8:45 pm #99947
The size option when you upload has nothing to do with how wordpress saves the files. Its only for what you do after its been uploaded (if you were to insert it into the page or post).
I’m not clear on what you are trying to do, but the whole thing is a bit long winded of an explanation on the relationship between the various layouts and how every image gets sized.
The overall goal if I originally understood it was to be able to have your choice of custom thumbnails that get displayed on the catalog view of your shop or generic thumbnail preview. In that respect, what you would do is download the image that was generated by the theme on initial upload via ftp.
Then open that image in your photo editor. Now replace the image with one of your choice and save this back on your computer so the file name is identical.
Finally, upload the edited image onto your server via FTP in the exact same place you downloaded it from so that it replace the one on your server.
The end result is that wordpress will call the image like normal except it will be the one you defined in your photo editor.
There is no interaction with wordpress beyond the initial upload of the image and setting for the specific area/function.
DevinDecember 10, 2012 at 9:51 pm #99948
Okay, thanks for clarifying what you had in mind. I eventually got it, I think:
I created a new product, uploaded a vertical image, let the theme create the thumbnails and published it.
Again the thumbnail displayed on the frontend was much bigger than it should.
After I figured out that this was the thumbnail named “-126×190″ I copied this thumbnail file to my computer and opened it in Photoshop.
Then I opened a previously created thumbnail sized 188×190 px and copied it into the file from the Media Library and saved it.
Then I uploaded this file via FTP back to the Media Library, replacing the original thumbnail.
If you look at the frontend http://www.wp.fotowalther.ch/?product_cat=devins-suggestion you will see that again the vertical thumbnail
(DEV 1193) is neither displayed 126×190 (as its name suggests), nor at the size it really is (188×284 px) but 282×428 px.
So, in fact I was able to fool the theme and upload a custom sized thumbnail.
(The theme thinks the file “-126×190″ contains still an image sized 126x190px, but in fact it contains an image sized 188×284)
However, IMHO the problem has shifted from an upload-problem or a resizing-problem to a display-problem.
(Therefore I will start a new thread to avoid confusion)
Please have a close look at http://www.wp.fotowalther.ch/?product_cat=devins-suggestion
Please remember: both thumbnails displayed are of the same size (188×284 and 284×188 px, respectively).
Do you see them all the same size? Is it only me to perceive DEV 1193 much bigger (almost double the size of DEV 1191)?
I checked on my wife’s computer (different OS, different monitor). I see the same thing: DEV 1193 is much bigger than DEV 1191.
But both thumbnails are proven to be the same size!
I think this is a real problem!
BrunoDecember 11, 2012 at 2:45 am #99949
This is into a realm of change I was not intending. This kind of manipulation should only be used for change the content of the thumbnail and not the size. The size is controlled by css in conjunction with the generated size by the themes functions.php and the woo commerce config file in the woocommerce folder in the theme files.
Additionally, the theme only constrains the width of images used in these kinds of column layouts so it will allow for different sizes of actual images and isn’t set to hard crop them unless the setting is changes in one of the files mentioned before.
I tried to explain clearly before but I’ll say it once again so there is no confusion, the size of your image displayed on the front end is not what this kind of thing is for and I would not have considered this advice if that was what I though you would be doing.
If you want complete control over the size of each thumbnail you will not find it any this theme as it just isn’t possible without redoing how the catalog is generated.
DevinDecember 11, 2012 at 6:52 pm #99950
I’m sure we got lost in translation, sort of, and carried away in a direction none of us intended to go.
I will inspect the css file and carry on with my trial-and-error approach trying to understand what’s going on. I generally don’t like the idea of taking “no” for an answer (no offense, please).
- I need to find out the logic of the resizing process (which I assume is buried in some php file).
- Regarding the display issue I assume that the width of the page might be part of the problem.
Nevertheless, I still would be happy, if the theme would let me determine the size of the image container (e.g. 300×300 px) and let me select which of my pre-sized images (e.g. 300×200 or 200×300 or whatever size would fit) the theme should put into the container.
Instead of the theme resizing the images automatically.
After all, I need to downsize my images anyway as it does not make sense uploading 6 to 14MB per image.
In Joomla/Virtuemart I used to have a container of 50×50 px for thumbnails and a container of 300×300 px for product images.
For every product I created a 50×50 thumbnail and a product image (custom sized to fit into the container).
I needed to tell Virtuemart which file to use and was done. This experience led to this thread.December 11, 2012 at 8:10 pm #99951
At that level of customization, you’ll definitely need to either look into making the theme modifications or having a freelance developer do it for you.
You can quickly use a plugin like this to change and modify the image sizes generated by the theme: http://wordpress.org/extend/plugins/simple-image-sizes/
But keep in mind the theme adapts the catalog image size to fit with how many columns are being displayed and then its only on the width of the photo and not the height (unless the photo size is set to crop with that plugin or manually in the themes files).
I’ll go ahead and close this topic for now, but let us know if you have any other issues or questions :)
The topic ‘Importing custom product thumbnails’ is closed to new replies.