Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

2334BS Product image size


Recommended Posts

Hi

 

I would like to make the image/s on the product info pages a little smaller. Do I only need to change as follows in

User.css

#piGal img {

height: auto;

max-width: 150px;

}

 

Would this be OK. It seems to work but may not be the correct way.

 

Many thanks

Grandpa

Link to comment
Share on other sites

@@burt

Thanks for your reply.

So I guess that means that the above code I had, isn't correct and I need to find the relative container for the image and amend that.

 

Cheers

Grandpa

Link to comment
Share on other sites

@@burt

Many thanks burt for your untireing efforts and knowledge helping us all, and all the work you do inhelping develop oscommerce.

I wish I had even a quarter of the knowlwdge you have

Again many, many thanks

 

Kind regards

Grandpa

Link to comment
Share on other sites

Hi

 

On the product_info page I would like to have a 10px gap between the 2 pics.What do I need to add to the css. Ive tried padding and margin but must be doing it in the wrong place.

 

post-276414-0-60977800-1401248147_thumb.jpg

 

Many thanks

Grandpa

Link to comment
Share on other sites

Hi Grandpa

 

I am not sure what i am gonna tell you know is the "right" way to do it or not. But it gives you a space between the images.

 

Look for this code inside the product info file (around line 109)

 

echo tep_image(DIR_WS_IMAGES . $pi['image'], '', '', '', 'id="piGalImg_' . $pi_counter . '"');
 }

 

and change that to this

 

echo tep_image(DIR_WS_IMAGES . $pi['image'], '', '', '', 'id="piGalImg_' . $pi_counter . '"');
echo '<br />';
 }

 

I am sure @@burt or someone else will confirm if what i just told you here is correct or not.

Link to comment
Share on other sites

@@Tsimi : Dirty solution, I think. I will try to avoid the usage of '<br />' in the new html code.

 

Best, if needed, add a margin/pading in the css in the #piGaImg_ selector. Something like that:

 

img[id^=piGaImg_] {

 

border-botton: 10px;

}

Link to comment
Share on other sites

ok, ok. But @@wHiTeHaT, do you think that is a good idea insert CSS into a 'ht_XXX.php file?

 

As you can see if the module has CSS endebed, then people have problems trying to add a css rule in their CSS that will be miserably overwritten with the php file (no good idea).

 

I know, we are not working in this moment in a MVC model, but I vote to add ONLY html info in the 'ouput' funciton of the th_ class.

 

Only to avoid issues like that. :)

Link to comment
Share on other sites

@@wHiTeHaT thank you for that, works like a charm

 

.@@Antonio Garcia, thank you for your help, unfortunately even with the ammendment and assuming it was to be placed ion user.css it wouldn't work.

 

Many thanks guys, your help is very much appreciated

 

@@Tsimi Thanks for your thoughts.

 

Kind regards

Grandpa

Link to comment
Share on other sites

Using the gutter setting is the correct way to do this in the colorbox script, which changes the default setting of photosetgrid gutter of "none". It makes zero difference that this is in a .js file, it simply takes your setting and adds css along the way.

 

If you set:

gutter: XYpx

 

CSS:

margin-bottom: XYpx

padding-right and padding-left on all internal gridded images (ie not the extreme left and not the extreme right): 0.5 * XYpx

 

@@wHiTeHaT is correct in this matter.

Link to comment
Share on other sites

imo if gutter is described as a parameter in photogrid/colorbox, it is where the default should be changed, not in the main css file

KEEP CALM AND CARRY ON

I do not use the responsive bootstrap version since i coded my responsive version earlier, but i have bought every 28d of code package to support burts effort and keep this forum alive (albeit more like on life support).

So if you are still here ? What are you waiting for ?!

 

Find the most frequent unique errors to fix:

grep "PHP" php_error_log.txt | sed "s/^.* PHP/PHP/g" |grep "line" |sort | uniq -c | sort -r > counterrors.txt

Link to comment
Share on other sites

@@bruyndoncx:

 

All right, all right!!!

 

So, WHY no add a variable accesible when you install this module (apart of the numbers to define the layout of the images) with a input form where the user may enter a integer that defines the number of pixels to define the space between images?

 

Please, see the attached image. If someone thought in it and he can desing it, we will be able to do the same and much better!!!! :thumbsup:

 

A new module should avoid the this kind of sin of deSINg, Well, if it it is intended to be used by people that don't know the term 'IDE'.... :-

 

Link to comment
Share on other sites

@@Antonio Garcia if you dont agree with how something works, easiest solution is for you to recode the offensive part, then post the code here so that a developer can take a look to decide if it is viable (in other words, well coded) and useable (ie useable for a majority of shops). At least have a go at coding, prior to talking, just to prove your point if nothing else.

Link to comment
Share on other sites

@@burt:

 

1.- I don't want offend anyone.

2.- If someday I became idiot and want to offend to someone in this blog YOU will be the last person that will be the target of my words. Why? You are in this moment the almost ONLY person (in the staff level) that try to clean the 'obsolete oscommerce' to bring it to the XXI. I know that my limitations of the knowledge of your language will cause some misunderstandings. So, from now to the end of times I BEG YOUR PARDON and beg the pardon of everyone that thinks that my writting is frivolous.

 

If you need further comments of explanations from my side, please, send a PM and, sure, we will arrange everything.

 

Now, social and etiquette apart, go to the code:

 

1.- Goto:

osCommerce-2334-bootstrap / includes / modules / header_tags / ht_product_colorbox.php

 

2.- insert in line 21:

 

// variables for made the life easy to shoppers nº1
var $gutter_that_shopper_wants = MODULE_HEADER_TAGS_PRODUCT_COLORBOX_GUTTER_THAT_SHOPER_WANTS;
var $image_width_that_shopper_wants = MODULE_HEADER_TAGS_PRODUCT_COLORBOX_IMAGE_WIDTH_THAT_SHOPPER_WANTS;

Link to comment
Share on other sites

I know exactly what you want, but it is time for you to not just "talk" but also to "prove" that talk. In other words, time for you (and other shopowners who want to help) to get into the code, so that you can further your knowledge, and help me (and others) in what we are trying to achieve...

 

In other words, I want to EMPOWER you so that you can learn a little (or a lot) code.

Look at how @@Tsimi is learning Bootstrap inside out in his Bootstrap Admin build.

 

I have all the time in the world for those who can actively offer solutions...

 

So. Install 2334bs, amend the colorbox/psgrid until it works exactly as you want it. Once done, post the full code changes. If I like it, I'll commit it. If I don't like it, I'll tell you why and help you to make it better. But before I spend time with you on it, I want to see that you took the time to make your ideas work.

Link to comment
Share on other sites

Sorry, timeout of the blog, I try to put all the code propposed now:

 

 

 

@@burt:

 

1.- I don't want offend anyone.

2.- If someday I became idiot and want to offend to someone in this blog YOU will be the last person that will be the target of my words. Why? You are in this moment the almost ONLY person (in the staff level) that try to clean the 'obsolete oscommerce' to bring it to the XXI. I know that my limitations of the knowledge of your language will cause some misunderstandings. So, from now to the end of times I BEG YOUR PARDON and beg the pardon of everyone that thinks that my writting is frivolous.

 

If you need further comments of explanations from my side, please, send a PM and, sure, we will arrange everything.

 

Now, social and etiquette apart, go to the code:

 

1.- Goto:

osCommerce-2334-bootstrap / includes / modules / header_tags / ht_product_colorbox.php

 

2.- insert in line 21:

 

// variables for made the life easy to shoppers nº1
var $gutter_that_shopper_wants = MODULE_HEADER_TAGS_PRODUCT_COLORBOX_GUTTER_THAT_SHOPER_WANTS;
var $image_width_that_shopper_wants = MODULE_HEADER_TAGS_PRODUCT_COLORBOX_IMAGE_WIDTH_THAT_SHOPPER_WANTS;

 

3.- In line 28. Wait! Now is NOT 28 but 31... Replace:

 

}

 

with:

 

$this->gutter_that_shopper_wants = MODULE_HEADER_TAGS_PRODUCT_COLORBOX_GUTTER_THAT_SHOPER_WANTS;
$this->image_width_that_shopper_wants = MODULE_HEADER_TAGS_PRODUCT_COLORBOX_IMAGE_WIDTH_THAT_SHOPPER_WANTS;
}

 

4.- In line 49 (ok, ok, may be a little bellow!):

 

Replace

 

	 $oscTemplate->addBlock('<script>var ImgCount = $("#piGal").data("imgcount"); $(function() {$("#piGal").hide();$(\'#piGal\').photosetGrid({layout: ""+ ImgCount +"",width: \'250px\',highresLinks: true,rel: \'pigallery\',onComplete: function() {$(\'#piGal\').css({ \'visibility\': \'visible\'});$(\'#piGal a\').colorbox({maxHeight: \'90%\',maxWidth: \'90%\',rel: \'pigallery\'});$(\'#piGal img\').each(function() {var imgid = $(this).attr(\'id\').substring(9);if ( $(\'#piGalDiv_\' + imgid).length ) {$(this).parent().colorbox({ inline: true, href: "#piGalDiv_" + imgid });}});}});$("#piGal").show();});</script>', $this->group);

 

With:

 


	 $oscTemplate->addBlock('<script>var ImgCount = $("#piGal").data("imgcount"); $(function() {$("#piGal").hide();$(\'#piGal\').photosetGrid({layout: ""+ ImgCount +"",width: \'' $this->image_width_that_shopper_wants ''\', gutter: \'' $this->image_width_that_shopper_wants '', highresLinks: true,rel: \'pigallery\',onComplete: function() {$(\'#piGal\').css({ \'visibility\': \'visible\'});$(\'#piGal a\').colorbox({maxHeight: \'90%\',maxWidth: \'90%\',rel: \'pigallery\'});$(\'#piGal img\').each(function() {var imgid = $(this).attr(\'id\').substring(9);if ( $(\'#piGalDiv_\' + imgid).length ) {$(this).parent().colorbox({ inline: true, href: "#piGalDiv_" + imgid });}});}});$("#piGal").show();});</script>', $this->group);

 

Sorry, this block is written 'by hand' with no IDE in front of me to check if the "'" added are right or break the js...

 

5.- In line 66.... replace:

 

tep_db_query("insert into " . TABLE_CONFIGURATION . " (configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, date_added) values ('Sort Order', 'MODULE_HEADER_TAGS_PRODUCT_COLORBOX_SORT_ORDER', '910', 'Sort order of display. Lowest is displayed first.', '6', '0', now())");
}

 

with:

 

 

 


tep_db_query("insert into " . TABLE_CONFIGURATION . " (configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, date_added) values ('Sort Order', 'MODULE_HEADER_TAGS_PRODUCT_COLORBOX_SORT_ORDER', '910', 'Sort order of display. Lowest is displayed first.', '6', '0', now())");
tep_db_query("insert into " . TABLE_CONFIGURATION . " (configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, date_added) values ('Sort Order', 'MODULE_HEADER_TAGS_PRODUCT_COLORBOX_GUTTER_THAT_SHOPER_WANTS', '910', 'Gap wetween images (in pixels)', '6', '0', now())");
tep_db_query("insert into " . TABLE_CONFIGURATION . " (configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, date_added) values ('Sort Order', 'MODULE_HEADER_TAGS_PRODUCT_COLORBOX_IMAGE_WIDTH_THAT_SHOPPER_WANTS', '910', 'Max width of the image (in px)', '6', '250', now())");
}

 

6.- In line 74 replace:

 

 return array('MODULE_HEADER_TAGS_PRODUCT_COLORBOX_STATUS', 'MODULE_HEADER_TAGS_PRODUCT_COLORBOX_IMG_LAYOUT', 'MODULE_HEADER_TAGS_PRODUCT_COLORBOX_PAGES', 'MODULE_HEADER_TAGS_PRODUCT_COLORBOX_SORT_ORDER');

 

 

with:

 

 


 return array('MODULE_HEADER_TAGS_PRODUCT_COLORBOX_STATUS', 'MODULE_HEADER_TAGS_PRODUCT_COLORBOX_IMG_LAYOUT', 'MODULE_HEADER_TAGS_PRODUCT_COLORBOX_PAGES', 'MODULE_HEADER_TAGS_PRODUCT_COLORBOX_SORT_ORDER',
'MODULE_HEADER_TAGS_PRODUCT_COLORBOX_GUTTER_THAT_SHOPER_WANTS',
'MODULE_HEADER_TAGS_PRODUCT_COLORBOX_IMAGE_WIDTH_THAT_SHOPPER_WANTS'
);

 

 

My apologies again. And, please, tell me if someone, apart @@wHiTeHaT, thinks that this 'code' may be is a good idea or not.

Link to comment
Share on other sites

Thanks.

 

You need to test it, to ensure it works per your own specifications. After this, post again with any corrections, but please post code at www.pastebin.com and link to the paste. In other words, post the full code of the entire working file.

 

Or even better, fork the Bootstrap build and do it in your own fork, then I can easily cherry pick any code changes you make.

Link to comment
Share on other sites

@@wHiTeHaT:

 

abuse of store database configuration:

 

Yes, may be but how time takes the database to perform a query with compile all the config. parameters, 0.01 sec.?

 

May be I'm wrong, but may be the problem should be the memory and not the database performance.

 

May be is better to write these kind of params into a file instead in database, a 'file read' was faster than 'query database' but, in this moment this is not 100% true.

 

God thread (database performance)...

Link to comment
Share on other sites

@@burt

 

Yes, I will try to do this.

 

I was so embarrassed about your comments that I try to solve this as soon as possible, spending almost 45 minutes of my work time writting the code without the help of an IDE and without check the code. Only to show that I ony try to be constructive and not destructive. :wub:

 

Thanks for your understanding. :sweating:

Link to comment
Share on other sites

  • 1 month later...

Hi all..

 

I found an image crop in piGal but no idea why is it?

        <div data-width="250" style="display: block; width: 250px; visibility: visible;" id="piGal" data-imgcount="125" data-imgtitles="{"1":"Cliff CR feh\u00e9r d\u00edszt\u00e1rcsa"}" class="pull-right"><div style="clear: left; display: block; overflow: hidden; height: 244px;" class="photoset-row cols-1"><a style="float: left; display: block; line-height: 0; box-sizing: border-box; width: 100%;" rel="pigallery" href="http://gumisarok.hu/images/disztarcsa/Cliff_CR_disztarcsa.png" class="photoset-cell highres-link cboxElement"><img style="width: 100%; height: auto; margin-top: 0px;" src="http://gumisarok.hu/images/disztarcsa/Cliff_CR_disztarcsa.png" alt="" id="piGalImg_1" class="img-responsive" height="400" width="400"></a></div>    </div>    

The image width: 250px; but later the style element is height: 244px; so the bottom of the images is croped. I use 400x400px images.

:blink:
osCommerce based shop owner with minimal design and focused on background works. When the less is more.
Email managment with tracking pixel, package managment for shipping, stock management, warehouse managment with bar code reader, parcel shops management on 3000 pickup points without local store.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...