PDA

View Full Version : Full width photo in product list



tenaja
04-06-2013, 02:36 PM
I am new here. I've tried a search, and haven't found an answer.
I am setting up a store that uses short but wide photos. I got the individual product page layout setup with a new template, by copying and editing the fallback directory, reorganizing the table cells. (Question 1: Is there another way?)

Question set 2: The Product List page seems to be "stuck" on very narrow photos for the product list. I tried to enlarge it, and hit two snags--first, the left & right columns also get enlarged, and second, the photos are stretched up from a very low resolution even though the original image is 1200 px wide. I'm hoping to get one column of items, with the photo on top (as in the grid view) but the rest of the list items (i.e. name, description, price, Buy Now, etc) in a ROW below the photo.

So...
a) is there a way to widen the photo for the product list without messing with the photo sizes in the outer columns?
b) is there an "easy" way to allow the photo to be above the product descriptions with one column in the product lists? I tried setting the "number of columns for product listing" to 1, but saw no change.

...and by "easy" in "question b)", I mean with a way that isn't going to jack up future upgrades, such as through the Admin panel or Templates. I have an old osC 2.2MS2 site that is so heavily modified (close to nearly osCmax condition) that about the only way to upgrade it is to start over. I am looking to osCmax to alleviate that.

Thanks a lot!

ridexbuilder
04-06-2013, 03:58 PM
You're going to need a custom catalog/includes/modules/product_listing.php and change DYNAMIC_MOPICS_THUMBS_DIR for DYNAMIC_MOPICS_PRODUCTS_DIR (assuming that you don't want your customers to have to scroll sideways, if their screen resolution doesn't match yours i.e. not IMAGES_BIG!). Plus change "SMALL" for "PRODUCT".
Line 353 in my 2.5.3 version of the file:


$lc_text = '&nbsp;<a href="' . tep_href_link(FILENAME_PRODUCT_INFO, ($cPath ? 'cPath=' . $cPath . '&' : '') . 'products_id=' . $listing[$x]['products_id']) . '">' . tep_image(DIR_WS_IMAGES . DYNAMIC_MOPICS_THUMBS_DIR . $listing[$x]['products_image'], $listing[$x]['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT) . '</a>&nbsp;';


Replace the non-breaking space with a line-feed and you should be good to go. You'll need to tweak the columns header, otherwise it'll not match up and will look strange - I suggest removing it, though sort options for the columns will be lost.


You will need to retain a copy of this file, when upgrading as it's not part of BTS templating and may be subject to change.

tenaja
04-07-2013, 08:47 AM
change DYNAMIC_MOPICS_THUMBS_DIR for DYNAMIC_MOPICS_PRODUCTS_DIR ...
Plus change "SMALL" for "PRODUCT".

This got me started, thanks. Now I just have to figure out how to make the rest of the data look decent.

Is there an easy way to have additional pic sizes? Three is kind of limiting. The "small" is far too small, and the "product" size is kind of large (and redundant) to put in the Product Listing.

Thanks again.

ridexbuilder
04-07-2013, 09:41 AM
.. Is there an easy way to have additional pic sizes? Three is kind of limiting. The "small" is far too small, and the "product" size is kind of large (and redundant) to put in the Product Listing.

Nope. There were only two previously and 4 is overkill, IMO. (Where do you stop? An infinite amount of sizes? Rhetorical.) You can adjust the product pic size in Admin. settings, to suit. Otherwise you'll need to 'go it alone' and start tweaking all the dynamic mopics stuff, which is counter-productive to your opening post.

[A 'thumbs up' to show appreciation for me looking into this, wouldn't go amiss. ;)]

tenaja
04-08-2013, 07:12 AM
While 4 may be overkill for your application, it makes perfect sense for me, given there are four locations for the image by default. On a store that sells "generic" products (such as DVD's) where the description the critical aspect, the photo is a mere token--many people will tolerate it being missing or inaccurate, as long as the description is correct.

However, when the products are unique, the photo is the critical feature in the list. With those four locations (side column, product list, product page, pop-out), why would you assume image size duplication? Additional views in the description can easily be handled by different photos, but since these are "forced" to be generated from the same image, one per use--that is where I would stop.

Here is a perfect example of what I want to AVOID in my Product List:
Writing-Rollers-Stationery (http://www.bicworld.com/en/products/categories/20/rollers)
Now imagine those having an artistic component...they would be even more useless.

With long, rectangular items that are visually unique (i.e. the text is NOT the important attribute in the list), they require as much detail as the screen real estate will permit, while trying to maintain efficiency in the layout. Like I said, 120x28 pixels may fit in a side column if it is a reminder, but it is WAY too tiny for a product list trying to draw attention. Since it is redundant to have it the same size as the product page itself--not to mention inefficient with space--a new size for this location is logical.

Remember, I am working with wide photos, with more than 4:1 ratio, not square ones. My only other option would be to eliminate the photos from the side columns to free up the SMALL size, but then you force the shopper to scroll to the bottom for that information. (Such as Recently viewed, which can have text as the reminder.) Or, if not scroll to the bottom, then have it "ugly" at the top.

Or perhaps, you can suggest a way to replace the products_image in the product_info template page? Then I can use small & product sizes respectively in the side column & product list, and an "Extra Image" in place of the products_image size ...?

Thanks for your help.

tenaja
04-08-2013, 10:47 AM
4 is overkill, IMO. (Where do you stop?
Clearly, that was written by a coding guy, not a marketing guy. Been there, done that. Reworked the site and saw the sales jump.

One size per position seems logical to me. There are four places by default that the image is displayed, so you need four sizes. Why restrict your overall layout quality based on an arbitrary number of image sizes? To drive your layout by your images is the tail wagging the dog.

I am working with items where the IMAGE is the most important aspect, and any text is fluff.

To keep the three standard sizes for side-column, Product List, and Pop-up, perhaps an alternative to add a size for the Product Page would be to replace the product-page image with for instance "Extra Image (1), " assuming it is NOT resized. Is there an easy way to do that? That would let me have the other three sizes for the side-columns, product-lists, and pop-up.

Thanks again.

ridexbuilder
04-08-2013, 11:50 AM
Here, you don't understand my positioning at all. My raison d'etre is not to code but to provide business-driven functionality, as might be seen from some of my past posts. I can code (not particularly well nor fluently) in PHP/HTML but I'm more interested in how the whole thing "hangs together". My commercial training/education/experience is at a slightly different level to daily hands-on programming.
Any piece of software cannot be "all things to all men" without incurring a vast amount of bloat and unused baggage - who mentioned MS Office? A solid core of well written/thought out functions, that can be extended is the way to go, IMO.
:snail:
Now, back to the actual crux of the matter (enough typing/drivel) with a quick re-iteration of "Content is King". The visual aspects of any page play a vital role in promoting any product but this shouldn't be at the expense of properly written descriptive prose - just witness some of the 'stuff' (being polite) not written ,in items for sale on feeBay, for example.
:guns:
The beauty part of Open Source is that the code is accessible and anyone can extend its' functionality to suit a given (personal) need. There is already a mechanism for unlimited images per product (Dynamic Mopics), inbuilt in osCmax, with the Slimbox image enhancements that I introduced some time ago. Not that long ago osCmax only had two Admin. controlled image sizes available and I saw the need for an additional one. Along with PGM, we've opened up far better possibilities to display images. The method of producing triple images is extensible and it could be extended to allow any number of product image sizes - should you so wish. For the majority of people/purposes this is overkill, putting unnecessary overhead on system resources.
:poke:
Just a thought: Employ the right person (if personally incapable) tp add in the additional size. A competent PHP 'coder' - that can figure out the new 'Max Admin menu structure - could put something together with a couple of days, fully tested. It's only a matter of copy/pasting of the right bits, in well-defined places.
:flush:

tenaja
04-08-2013, 01:11 PM
I understand where you are coming from; I set up another osC site starting 8yrs ago with way too many edits, so I really appreciate the so-called "bloat" that osCmax comes with over std osC! (Isn't that why any of us choose it?) Although I will only be using a fraction of those preinstalled features, most of my needed plugins are preinstalled--and it is very nice!

I'm just trying figure out if there is a way to "configure" or "template" the images into the four sizes, so version upgrades aren't too painful. It seems the "Extra Images" are resized as well, so they aren't helping. Maybe the "easiest" will be to make the "small" size appropriate for the Product List, and edit the side-column areas so they shrinks it to fit into the 120px wide space--should be the least amount of maintenance, without losing image quality. Plus, the side-columns have very few images compared to the product list. I'm hoping it will work, and will try it when I can.

So, yes, while Open Source makes these edits possible, it has made my oldest store virtually impossible to upgrade. I'm doing everything I can to avoid that mess with this current one.

I've tried to find someone to code it for me, but it seems like osC is falling out of favor for other sites, and it is no easy task finding someone with skills and availability.

tenaja
04-08-2013, 03:14 PM
... Maybe the "easiest" will be to make the "small" size appropriate for the Product List, and edit the side-column areas so they shrinks it to fit into the 120px wide space--should be the least amount of maintenance, without losing image quality. Plus, the side-columns have very few images compared to the product list. I'm hoping it will work, and will try it when I can.
I changed whats_new.php from this:
SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT
to:
SMALL_IMAGE_WIDTH/4, SMALL_IMAGE_HEIGHT/4

This worked great--for the side columns. And, as long as the edit is repeated for every box with images used in both side columns.

...and it totally jacked up the Featured and Your Viewed product lists, so the respective files need similar treatment. Not ideal, but a 4-character edit (plus comments) in a few files is more easily maintained than total rewrite of any file.

tenaja
04-12-2013, 08:06 AM
Nope. There were only two previously and 4 is overkill, IMO. (Where do you stop? An infinite amount of sizes? Rhetorical.)
I know this was rhetorical, but I was just testing out ZenCart. You think 4 is overkill? Zen Cart one has EIGHT image size settings!!! Every possible place the item can be displayed has a different size setting. Even "similar" display areas (i.e. a separate setting for each infobox) have different size settings.

ridexbuilder
04-12-2013, 08:45 AM
I know this was rhetorical, but I was just testing out ZenCart. You think 4 is overkill? Zen Cart one has EIGHT image size settings!!! Every possible place the item can be displayed has a different size setting. Even "similar" display areas (i.e. a separate setting for each infobox) have different size settings.

Yep, I do check other software, from time to time. Overkill, IMO.