Software for Party Rentals, Events, and Services
 
New Topic
SupportTopicQuestionUncategorized
This object is in archive! 

WP intergration needs larger images for products

Ken K. shared this question 7 years ago
Answered

WP integration needs larger images when creating product pages and product category pages.

Also need product category page thumbnails to go across the page instead of top down.

Would like to add multiple images of product on product pages

1 The same question

Comments (1)

photo
2
IO S. ● 6 years ago

There are several different image variables you can use in the shortcodes. Our default one uses a 250px thumnail, but there is another image available up to 750px.

Recently, we added the ability to add up to 4 images inside InflatableOffice that can be pushed into a WP site, but our older shortcode default didn't have all the images referenced so you probably need up update the io_rental shortcode with the newer images variables.

If you'd like to restore the default shortcode you can rename or delete your shortcodes then de-activate and re-activate the InflatableOffice plug-in. Here is the rental_io default shortcode as a reference to see all the images:

  1. <div class="cartInfo" style="display:none">
  2. <span class="simpleCart_quantity"></span> items
  3. </div>
  4. <div class="simpleCart_shelfItem" style="min-width: ;">
  5. <p>Customer Rating: <img src="%%rating_img%%" /> %%rating_txt%%</p>
  6. <p>%%description%%</p>
  7. <div class="wp-caption alignright">
  8. <b>Click image to see more</b><br />
  9. <a rel="img_group" id="single_image" href="%%image_big%%"><img class="size-medium wp-image-6" title="%%rental_name%%" src="%%image%%" alt="%%rental_name%%" /></a>
  10. <a rel="img_group" href="%%image_big2%%"></a>
  11. <a rel="img_group" href="%%image_big3%%"></a>
  12. <a rel="img_group" href="%%image_big4%%"></a>
  13. <p class="wp-caption-text item_name">%%rental_name%%</p>
  14. <p class="item_encoded" style="display:none;">%%name_encoded%%</p>
  15. </div>
  16. <div>
  17. <div>
  18. <a href="http://www.inflatableoffice.com/quotes/quoteme.php?name=%%page%%&clear_rentals=1&rental_names=%%name_encoded%%-1"; class="hudbtn primary">Book Now</a>
  19. <a class="item_add hudbtn" href=";" style="display:none;">Add to Cart</a>
  20. </div>
  21. <br>
  22. <span style="white-space: nowrap;">Date: <input type="text" class="datepicker" style="width:103px;height:28px" name="%%name_encoded%%" size="10"></span>
  23. <a class="hudbtn" onclick="checkAvail('%%name_encoded%%')">Check Availability</a>
  24. <div id="avail"></div>
  25. <br>
  26. <br>
  27. <p>Circuits needed: %%electric%%<br>
  28. Item Dimensions: %%dimensions%%<br>
  29. Space Needed: %%footprint%%<br>
  30. </p>
  31. </div>
  32. </div>
  33. <style>
  34. .hudbtn, .hudbtn:focus{
  35. -webkit-border-radius:3px;
  36. -moz-border-radius:3px;
  37. border-radius:3px;
  38. font:bold 13px/26px "FreightSans", sans-serif;
  39. color:#d9d9d9;
  40. text-shadow:1px 1px 1px rgba(0,0,0,.5);
  41. border:1px solid #000;
  42. -webkit-box-shadow:inset 0 1px 0 #6d6d6e;
  43. -moz-box-shadow:inset 0 1px 0 #6d6d6e;
  44. box-shadow:inset 0 1px 0 #6d6d6e;
  45. background: #64753D; /* Old browsers */
  46. background: -moz-linear-gradient(top, #64753D 0%, #343434 100%); /* FF3.6+ */
  47. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#64753D), color-stop(100%,#343434)); /* Chrome,Safari4+ */
  48. background: -webkit-linear-gradient(top, #64753D 0%,#343434 100%); /* Chrome10+,Safari5.1+ */
  49. background: -o-linear-gradient(top, #64753D 0%,#343434 100%); /* Opera 11.10+ */
  50. background: -ms-linear-gradient(top, #64753D 0%,#343434 100%); /* IE10+ */
  51. background: linear-gradient(top, #64753D 0%,#343434 100%); /* W3C */
  52. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#64753D', endColorstr='#343434',GradientType=0 ); /* IE6-9 */
  53. cursor: pointer;
  54. white-space: nowrap;
  55. min-width: 84px;
  56. display: inline-block;
  57. text-align: center;
  58. margin: 4px;
  59. padding: 0 5px;
  60. }
  61. .hudbtn:hover{
  62. color: #fff;
  63. }
  64. .hudbtn:active {
  65. background: #333c1e; /* Old browsers */
  66. background: -moz-linear-gradient(top, #333c1e 0%, #343434 100%); /* FF3.6+ */
  67. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#333c1e), color-stop(100%,#343434)); /* Chrome,Safari4+ */
  68. background: -webkit-linear-gradient(top, #333c1e 0%,#343434 100%); /* Chrome10+,Safari5.1+ */
  69. background: -o-linear-gradient(top, #333c1e 0%,#343434 100%); /* Opera 11.10+ */
  70. background: -ms-linear-gradient(top, #333c1e 0%,#343434 100%); /* IE10+ */
  71. background: linear-gradient(top, #333c1e 0%,#343434 100%); /* W3C */
  72. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#64753D', endColorstr='#343434',GradientType=0 ); /* IE6-9 */
  73. color: #606060;
  74. }
  75. .hudbtn.primary{
  76. border-color:#3D7530;
  77. background: #97c865; /* Old browsers */
  78. background: -moz-linear-gradient(top, #97c865 0%, #44933d 100%); /* FF3.6+ */
  79. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#97c865), color-stop(100%,#44933d)); /* Chrome,Safari4+ */
  80. background: -webkit-linear-gradient(top, #97c865 0%,#44933d 100%); /* Chrome10+,Safari5.1+ */
  81. background: -o-linear-gradient(top, #97c865 0%,#44933d 100%); /* Opera 11.10+ */
  82. background: -ms-linear-gradient(top, #97c865 0%,#44933d 100%); /* IE10+ */
  83. background: linear-gradient(top, #97c865 0%,#44933d 100%); /* W3C */
  84. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#97c865', endColorstr='#44933d',GradientType=0 ); /* IE6-9 */
  85. -webkit-box-shadow:inset 0 1px 0 #D8E994;
  86. -moz-box-shadow:inset 0 1px 0 #D8E994;
  87. box-shadow:inset 0 1px 0 #D8E994;
  88. color:#fff;
  89. cursor: pointer;
  90. }
  91. .hudbtn.primary:hover{
  92. background: #91bf61; /* Old browsers */
  93. background: -moz-linear-gradient(top, #91bf61 0%, #3f8738 100%); /* FF3.6+ */
  94. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#91bf61), color-stop(100%,#3f8738)); /* Chrome,Safari4+ */
  95. background: -webkit-linear-gradient(top, #91bf61 0%,#3f8738 100%); /* Chrome10+,Safari5.1+ */
  96. background: -o-linear-gradient(top, #91bf61 0%,#3f8738 100%); /* Opera 11.10+ */
  97. background: -ms-linear-gradient(top, #91bf61 0%,#3f8738 100%); /* IE10+ */
  98. background: linear-gradient(top, #91bf61 0%,#3f8738 100%); /* W3C */
  99. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#91bf61', endColorstr='#3f8738',GradientType=0 ); /* IE6-9 */
  100. }
  101. .hudbtn.primary:active,.hudbtn.primary:focus{
  102. background: #3f8738; /* Old browsers */
  103. background: -moz-linear-gradient(top, #3f8738 0%, #91bf61 100%); /* FF3.6+ */
  104. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3f8738), color-stop(100%,#91bf61)); /* Chrome,Safari4+ */
  105. background: -webkit-linear-gradient(top, #3f8738 0%,#91bf61 100%); /* Chrome10+,Safari5.1+ */
  106. background: -o-linear-gradient(top, #3f8738 0%,#91bf61 100%); /* Opera 11.10+ */
  107. background: -ms-linear-gradient(top, #3f8738 0%,#91bf61 100%); /* IE10+ */
  108. background: linear-gradient(top, #3f8738 0%,#91bf61 100%); /* W3C */
  109. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3f8738', endColorstr='#91bf61',GradientType=0 ); /* IE6-9 */
  110. -webkit-box-shadow:none;
  111. -moz-box-shadow:none;
  112. box-shadow:none;
  113. }
  114. </style>
  115. <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
  116. <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  117. <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
  118. <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.pack.js">;
  119. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css"; type="text/css" media="screen" />
  120. <script>
  121. function setCookie(cname, cvalue, exdays) {
  122. var d = new Date();
  123. d.setTime(d.getTime() + (exdays*24*60*60*1000));
  124. var expires = "expires="+d.toUTCString();
  125. document.cookie = cname + "=" + cvalue + "; " + expires + ";path=/";
  126. }
  127. function getCookie(cname) {
  128. var name = cname + "=";
  129. var ca = document.cookie.split(';');
  130. for(var i=0; i<ca.length; i++) {
  131. var c = ca[i];
  132. while (c.charAt(0)==' ') c = c.substring(1);
  133. if (c.indexOf(name) == 0) return c.substring(name.length,c.length);
  134. }
  135. return "";
  136. }
  137. function checkAvail(item){
  138. startdate = $('[name="'+item+'"]').val();
  139. if(startdate.length==0){
  140. $('#avail').html('Click the date box to set the date.');
  141. return;
  142. }
  143. setCookie("checkDate", startdate, 14);
  144. url = "https://www.inflatableoffice.com/quotes/check_availability.php?callback=?";
  145. + "&name=%%page%%"
  146. + "&startdate="+startdate
  147. + "&starttime=08:00"
  148. + "&duration=16"
  149. + "&usecushion=1"
  150. + "&showlocations=0"
  151. + "&rental_names="+item;
  152. $.getJSON( url, function( data ) {
  153. var items = [];
  154. $.each( data, function( rental_name, qty ) {
  155. //items.push( rental_name + ": " + qty + " Available" );
  156. items.push( qty + " Available" );
  157. });
  158. output = items.join( "" );
  159. $('#avail').html(output);
  160. });
  161. }
  162. function checkAvailLocations(item){
  163. startdate = $('[name="'+item+'"]').val();
  164. if(startdate.length==0){
  165. $('#avail').html('Click the date box to set the date.');
  166. return;
  167. }
  168. setCookie("checkDate", startdate, 14);
  169. url = "https://www.inflatableoffice.com/quotes/check_availability.php?callback=?";
  170. + "?name=%%page%%"
  171. + "&startdate="+startdate
  172. + "&starttime=08:00"
  173. + "&duration=16"
  174. + "&usecushion=1"
  175. + "&showlocations=1"
  176. + "&rental_names="+item;
  177. $.getJSON( url, function( data ) {
  178. var items = [];
  179. $.each( data, function( loc, rentals ) {
  180. $.each( rentals, function( rental_name, qty ) {
  181. items.push( loc + ": " + qty + " Available" );
  182. });
  183. });
  184. output = items.join( "<br>" );
  185. $('#avail').html(output);
  186. });
  187. }
  188. $(function() {
  189. $( ".datepicker" ).datepicker();
  190. $( ".datepicker" ).val(getCookie("checkDate"));
  191. $("a[href*='http'][rel=img_group]").fancybox({
  192. 'transitionIn' : 'none',
  193. 'transitionOut' : 'none',
  194. 'titlePosition' : 'over',
  195. 'cyclic' : true,
  196. helpers : {
  197. title : { type : 'over' }
  198. }, // helpers
  199. beforeShow : function() {
  200. this.title = (this.title ? '' + this.title + '' : '') + 'Image ' + (this.index + 1) + ' of ' + this.group.length;
  201. }
  202. });
  203. });
  204. </script>
  205. [sc name="io_cart" page="%%page%%"]

InflatableOffice will provide support regarding integration with Wordpress, but we do not provide support for hosting, building, maintaining, or customizing your website. Wordpress is a popular website platform and there are many resources available online.

Similarly, you'll need to make modifications to the io_category shortcode if you want the ordered list of inventory items to display differently.

Replies have been locked on this page!

Powered by: UseResponse - Ideas Management Software