Guest Posted May 22, 2014 Share Posted May 22, 2014 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 More sharing options...
burt Posted May 22, 2014 Share Posted May 22, 2014 All images are sized to the width of their container. If the container is 300px, the image would be 300px. Link to comment Share on other sites More sharing options...
Guest Posted May 22, 2014 Share Posted May 22, 2014 @@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 More sharing options...
burt Posted May 22, 2014 Share Posted May 22, 2014 What you've done is fine is it looks good. You've said: set the max width of an image inside #pigal to 150, even if pigal is 300 wide. Link to comment Share on other sites More sharing options...
Guest Posted May 22, 2014 Share Posted May 22, 2014 @@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 More sharing options...
Guest Posted May 28, 2014 Share Posted May 28, 2014 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. Many thanks Grandpa Link to comment Share on other sites More sharing options...
♥Tsimi Posted May 28, 2014 Share Posted May 28, 2014 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 More sharing options...
Antonio Garcia Posted May 28, 2014 Share Posted May 28, 2014 @@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 More sharing options...
♥Tsimi Posted May 28, 2014 Share Posted May 28, 2014 @@Antonio Garcia yep, very dirty but quick. ;) Link to comment Share on other sites More sharing options...
Antonio Garcia Posted May 28, 2014 Share Posted May 28, 2014 Sorry, replace border-botton: 10px; by margin-botton: 10px; :wub: Link to comment Share on other sites More sharing options...
Antonio Garcia Posted May 28, 2014 Share Posted May 28, 2014 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 More sharing options...
Guest Posted May 28, 2014 Share Posted May 28, 2014 @@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 More sharing options...
burt Posted May 28, 2014 Share Posted May 28, 2014 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 More sharing options...
Antonio Garcia Posted May 29, 2014 Share Posted May 29, 2014 @@wHiTeHaT :thumbsup: As someone said: "Write code as if next person that mantain it will be a psychopath that knows where you lives"... Link to comment Share on other sites More sharing options...
♥bruyndoncx Posted May 29, 2014 Share Posted May 29, 2014 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 More sharing options...
Antonio Garcia Posted May 30, 2014 Share Posted May 30, 2014 @@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'.... :- https://drive.google.com/file/d/0B-4RD1RGignteEdPTHF4bC1XU0U/edit?usp=sharing Link to comment Share on other sites More sharing options...
burt Posted May 31, 2014 Share Posted May 31, 2014 @@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 More sharing options...
Antonio Garcia Posted May 31, 2014 Share Posted May 31, 2014 @@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 More sharing options...
burt Posted May 31, 2014 Share Posted May 31, 2014 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 More sharing options...
♥Tsimi Posted May 31, 2014 Share Posted May 31, 2014 @@burt and thanks to you, whitehat or matt (and many others) I learn more and more everyday. :thumbsup: Link to comment Share on other sites More sharing options...
Antonio Garcia Posted May 31, 2014 Share Posted May 31, 2014 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 More sharing options...
burt Posted May 31, 2014 Share Posted May 31, 2014 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 More sharing options...
Antonio Garcia Posted May 31, 2014 Share Posted May 31, 2014 @@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 More sharing options...
Antonio Garcia Posted May 31, 2014 Share Posted May 31, 2014 @@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 More sharing options...
tgely Posted July 24, 2014 Share Posted July 24, 2014 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. 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 More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.