Importing custom product thumbnails « Support Forum | Kriesi.at - Wordpress Themes and HTML Templates

Kriesi.at - Wordpress Themes and HTML Templates

Support Forum » Flashlight

closed

not a support question

Importing custom product thumbnails

13 posts from 3 voices

Started 5 months ago by bruwa
Latest reply from Devin
This topic is closed
This topic is not a support question

Tags:

No tags yet.

bruwa
Member

Hi,

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?

Regards,

Bruno

Posted 5 months ago #
Devin
Moderator

Hi Bruno,

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.

Regards,

Devin

Posted 5 months ago #
Nick
Moderator

Hi,

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.

Thanks,

Nick

Posted 5 months ago #
bruwa
Member

Hi Devin

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-190x284.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?

Regards,

Bruno

Posted 5 months ago #
Devin
Moderator

Hey Bruno,

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-200x140.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-430x200.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.

Regards,

Devin

Posted 5 months ago #
Nick
Moderator

Hi,

To further expand, if image says dog-300x500.png after you upload it, you login through ftp, download that image, resize it to 600x900 (for example) and upload it back again (without renaming it) *with ftp* to overwrite the original file dog-300x500.png (though in reality the image is now 600x900) but Wordpress still thinks its 300x500 so it will not try to resize it. You basically fool Wordpress. :)

Thanks,

Nick

Posted 5 months ago #
bruwa
Member

Devin

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 (284x188)" 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 (300x201 px)!

Then I measured the size of the images displayed on the frontend.
http://www.wp.fotowalther.ch/?product_cat=devins-suggestion

The horizontal image measures 284x188 px, which is what I had selected upon uploading.
However: the vertical image is 282x428 px - but NO thumbnail of this size was created (closest are 240x361 and 430x647).
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 "126x190".
However: the 126x190 thumbnail really IS 126x190 px. How come it is displayed at 282x428?

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 282x428 px.
I grabbed my FTP client and deleted the 126x190 px thumbnail from the Media Library
Whereupon the thumbnail disappeared from the frontend .

This IMHO proves that a thumbnail sized 126x190 px suddenly increases to 282x428 px when it appears on the frontend (same monitor).

What's going on?

Regards,

Bruno

PS
The size options that can be selected upon uploading are:
- Thumbnail (150x150)
- Medium (284x188)
- Large (1024x680)
- Full (3947x2622)

Posted 5 months ago #
bruwa
Member

Hi Nick

I think I need:

2 sizes for the 3:2 (horizontal) images:
- lightbox (e.g. 900x600 px )
- category/subcategory/featured image/product detail (e.g. 300x200 px))

2 sizes for the 2:3 (vertical) images:
- lightbox (e.g. 520x780 px )
- category/subcategory/featured image/product detail (e.g. 200x300 px))

2 sizes for the square images
- lightbox (e.g. 600x600 px)
- category/subcategory/featured image/product detail (e.g. 300x300)

1 size for the background (slider): 1024x682 px (horizontal images only)

Does this make sense?

Regards,

Bruno

Posted 5 months ago #
Devin
Moderator

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.

Regards,

Devin

Posted 5 months ago #
bruwa
Member

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 "-126x190" I copied this thumbnail file to my computer and opened it in Photoshop.
Then I opened a previously created thumbnail sized 188x190 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 126x190 (as its name suggests), nor at the size it really is (188x284 px) but 282x428 px.

So, in fact I was able to fool the theme and upload a custom sized thumbnail.
(The theme thinks the file "-126x190" contains still an image sized 126x190px, but in fact it contains an image sized 188x284)

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 (188x284 and 284x188 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!

Thanks

Bruno

Posted 5 months ago #
Devin
Moderator

Hi Bruno,

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.

Regards,

Devin

Posted 5 months ago #
bruwa
Member

Hi Devin

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. 300x300 px) and let me select which of my pre-sized images (e.g. 300x200 or 200x300 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.

Regards,

Bruno

PS
In Joomla/Virtuemart I used to have a container of 50x50 px for thumbnails and a container of 300x300 px for product images.
For every product I created a 50x50 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.

Posted 5 months ago #
Devin
Moderator

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 :)

Regards,

Devin

Posted 5 months ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.

© Copyright Kriesi.at – Wordpress Themes and HTML Templates

top