Jump to content

Help with understanding how Presta handles Images


Recommended Posts

Hopefully someone can help turn the light on with regards to image handling in Prestashop 1.5.3.1

Note: This site is not live or attached to my domain yet. As a result, I do not have mod-rewrite enabled until it can utilize my existing domain which is live on a static site.

 

Using my PrestaShop home page as an example: http://69.36.191.225/index.php

 

Why do some images show as the name I have given them:

<img src="/modules/wdhomeadvertising/images/cornice-adblock.jpg" alt="Window Cornice - Elegant Window Treatments">

 

and in the default featured home slider:

<img src="http://69.36.191.225/img/p/1/0/4/104-home_default.jpg" alt="Cornice - Mission Series">

The image I uploaded through the BO is called cornice-mission-12w.jpg

 

Additionally, the attribute tags are not being passed through consistently (width/height) but I guess that is another topic.

 

For SEO purposes, 104-home_default.jpg does not help me unless I am selling default homes.

Link to comment
Share on other sites

I don't want to always defend PS. I'm finding so many crazy things, it's ... crazy. The attribute system is just plain insane. But the image sizing thing is pretty standard in the carts I have tried.

 

Sliders and other modules may need custom images so PS default images would not be used in some modules, wdhomeadvertising is one of them.

 

This is just my opinion, I don't work for Google but to a search engine, cornice-mission-12w.jpg is all one word and there isn't much gold in parsing that word into individual words. When you do a search, Google can pattern match and highlight a word in that image name, but that isn't the same thing as indexed or helping your "SEO". What Google can and will index is the image alt tag, and I certainly take advantage of the alt tag every time I add a new image. That also puts info on screen on a mouse over. Plus, you get the benefit of installing a third party module that can make use of images without the need to be setup to do so.

 

As for not always consistently being passed w/h? You can't pass PS an image size. The images sizes are set and if you do not load an image at the preset w/h that image will be resized.

 

So let me be clear on that point, if the image size is 500 x 500 and you upload a 500 x 300 you could end up with a mess.

 

You can control what happen in that situation a little, for example you can set PS to resize by H or W.

 

Currently the site I'm working on is set to resize by H, so if I upload a 500 x 300 image, PS will not resize the image, however it will add white space to the width to make the image 500 x 500. I'm using a white back ground so this isn't a problem for me. If however I was using an image that doesn't use a white background I would need to make sure I uploaded an image 500 x 500 or larger but still square.

 

You also need to take into account the use of thickbox, usually that will be your starting image size. But most important is the way your theme is designed. Some designs will require square images, others will require images with more H than W. And if your theme designer did not think about the default image sizes it can really make it hard for you.

 

It can help if you make a couple of image templates and then paste your images into the template. I do that with my slider, because I want the background of each image to look the same. Or if you have an image that is the right H but not the right W, you must either increase the canvas size of that image to match the PS size, or copy that image into a properly size image template before uploading to PS.

Edited by Bill Dalton (see edit history)
  • Like 1
Link to comment
Share on other sites

Thanks Bill

 

I understand the resize issue and scaling (i.e. 500x500 to 500x200) HTML, css, and photoshop graphics are my strengths so that is not a problem. I always make image templates for all my images and I agree with you about the thickbox. This is why my iamge template for products is set at 600x600. Like you, I use a white background and adjust for any white space on the image itself before I upload so that it is always square.

 

What MY problem is... is understanding why/how when I upload an image name cornice-mission-12w.jpg gets changed to home_default.jpg or medium_default.jpg (depending where it appears on the site home page, specials block, product page etc.) is where I am stumped. I agree with what you say about the images and google. I parse my image names mainly for readability and make sure my pertinent descriptive keywords are in my alt tag. Therein lies the other problem.

 

Even on your site, an image in your specials section on the home page carries the name of your file abt10-xx-xxxxx-xxxxx-xxxx.jpg

and when you click that your thickbox image caries the same name, not 104-thickbox_default.jpg as it does in mine. This is what I don't understand. And the alt tag, your thickbox image passes the alt tag - mine does not.

 

These are the things I am trying to wrap my head around. When I code websites in html, these things are second nature to me and I can bend them at will. Not having the ability to do that with Presta, granted from my own ignorance of how it works, is frustrating. This is why I want to understand how it works so I can take care of these issues as they arise. If I can see an example of the correct method to ensure my file name and alt tags are passed to all versions of my image (home page, specials block, thick box, etc.) then it will click and I can edit whatever .tpl file (assuming it is a .tpl file) .

 

I hope what am asking to understand makes sense. It is strictly related to either PrestaShop or the theme itself.

Link to comment
Share on other sites

Using the site I'm working on as an example. The template is a cheap TM and I got what I paid for. :)

 

Point is there are issues with the template. For example, the specials on the home page is tmspecials, third party software, and yet also made by TM is tmnewproducts also on the home page. However the TM coder that created tmnewproducts made use of the alt tag, but the person that coded tmspecials did not. PS has them, but that coder did not use them, so now it is on my to do list to compare the code from one to the other and fix the alt tag issue that exists in tmspecials. Or I may replace tmspecials all together.

 

Thickbox works well enough, but I decided to use something more feature rich and user friendly, I'm using Magic Thumb . It not only allows for alt tag, it will use your title and description as well.

 

As I said above, PS handles images pretty much the same way all shopping cart software does. For example here is a user question from a Magento user.

 

I'm using Magento any thoughts on how I can specify the file name that Magento saves the image as?

 

Answer is pretty much what you will need to do in PS

 

-----------------------------------

I'm using Magento any thoughts on how I can specify the file name that Magento saves the image as?

 

>>>

 

 

You can't specify the filename. The only solution would be for you change the Magento files to allow a filename as suggested in this thread. For your convenience I've included the solution below (and adapted it based on the fact that you're sending the filename as name above):

Modify ./app/code/core/Mage/Catalog/Model/Product/Attribute/Media/Api.php:

You'll want to replace $fileName = 'image.' . $this->_mimeTypes[$data['file']['mime']];with:

if ( ! empty($data['file']['name']) )

$fileName = $data['file']['name'];

else

$fileName = 'image.' . $this->_mimeTypes[$data['file']['mime']];

If you feel a little more adventurous, you could extend the class instead of changing it and override thecreate function with your own functionality.

Edited by Bill Dalton (see edit history)
Link to comment
Share on other sites

Thanks Bill - I appreciate the example you gave for the magento user and that is what I need to figure out. I just wish I knew which file in Prestashop I need to make the changes to. I guess it's just a matter of digging into the code and make adjustments where needed to get the desired results.

Edited by Whispar1 (see edit history)
Link to comment
Share on other sites

×
×
  • Create New...