Jump to content
Latest News: (loading..)

Recommended Posts

Posted (edited)
4 hours ago, 14steve14 said:

What I meant was is there a way of making all the images the same size if they are uploaded to the store in different sizes. I make all my images the right size so both large and small images are consistent, but I do know others don't do this.

Some type of images system would have been high up the to-do list for a future release (probably Final).  I think I've talked about it previously;

  • shopowner uploads one large image
  • it is resized to (say) 5 different resolutions and saved appropriately
  • tep_image is updated to use srcset 
    srcset automatically works out which image is best shown at which resolution

Maybe in some future code?

Edited by burt

This is a signature that appears on all my posts.  
IF YOU MAKE A POST REQUESTING HELP...please state the exact version
of osCommerce that you are using. THANKS

 
Get the latest current code (community-supported responsive 2.3.4.1BS Edge) here

 

Share this post


Link to post
Share on other sites
1 hour ago, burt said:

Some type of images system would have been high up the to-do list for a future release (probably Final).  I think I've talked about it previously;

  • shopowner uploads one large image
  • it is resized to (say) 5 different resolutions and saved appropriately
  • tep_image is updated to use srcset 
    srcset automatically works out which image is best shown at which resolution

Maybe in some future code?

Definitely need this.


Let's make things easier for new osCommerce users http://forums.oscommerce.com/topic/402638-discussion-about-hard-coded-database-tables/?p=1718900  Getting there with osCommerce 2.4! :thumbsup:

Share this post


Link to post
Share on other sites
Posted (edited)

If you take a look at the "CARDS" module now, you hopefully will see my main issue, which I cannot now un-see.

http://template.me.uk/frozen2bs4/

I set the parameters as so;

  • SM - 2 (per row)
  • MD - 3
  • LG and up - 4

As I also set it to show just 6 items, what happens in LG and up, is Fugly in my opinion;

item | item | item | item
   item     |    item

I can't find a way to do this;

item | item | item | item
item | item

Can anyone find the answer ?

 

ps:  not bothered about the display of the price, name etc - that'll be squished as 4 boxes is too many in a row (for MD).  Only set to 4 in MD to show what I am struggling with...

Edited by burt

This is a signature that appears on all my posts.  
IF YOU MAKE A POST REQUESTING HELP...please state the exact version
of osCommerce that you are using. THANKS

 
Get the latest current code (community-supported responsive 2.3.4.1BS Edge) here

 

Share this post


Link to post
Share on other sites
Posted (edited)
8 hours ago, burt said:

item | item | item | item
item | item

Can anyone find the answer ?

 

ps:  not bothered about the display of the price, name etc - that'll be squished as 4 boxes is too many in a row (for MD).  Only set to 4 in MD to show what I am struggling with...

Try a regular row instead of card-deck, wrap cards with divs (col-*) and add h-100 to cards:

 

  <div class="row cm-i-card-products" itemscope="" itemtype="http://schema.org/ItemList">

    <meta itemprop="numberOfItems" content="6">
    <div class="col-3">
      <div class="card h-100 is-product" data-is-special="0" data-product-price="749.99" data-product-manufacturer="0" itemprop="itemListElement" itemscope="" itemtype="http://schema.org/Product" >
        <div class="card-header caption">
          <h6 class="group inner list-group-item-heading">
            <a itemprop="url" href="product_info.php?products_id=28"><span itemprop="name">Samsung Galaxy Tab</span></a>
          </h6>
        </div>
        <div class="card-body">
          <a href="product_info.php?products_id=28"><img src="cards2_files/galaxy_tab_1.jpg" alt="Samsung Galaxy Tab" title="Samsung Galaxy Tab" class="img-fluid" itemprop="image" width="640" height="480"></a>
        </div>
        <div class="card-footer">
          <div class="row">
            <div class="col-4" itemprop="offers" itemscope="" itemtype="http://schema.org/Offer">
              <meta itemprop="priceCurrency" content="USD">
              <p class="text-muted"><span class="align-middle" itemprop="price" content="749.99">$749.99</span></p>
            </div>
            <div class="col-8 text-right">
              <div class="btn-group" role="group">
                <a role="button" href="product_info.php?products_id=28" class="btn btn-light btn-sm btn-index btn-view">View</a><a role="button" href="index.php?action=buy_now&products_id=0" data-has-attributes="0" data-in-stock="0" data-product-id="0" class="btn btn-success btn-sm btn-index btn-buy">Buy</a>              </div>
            </div>
          </div>
        </div>
      </div>
      </div>

     ... etc ...
</div>

still needs bottom margins in the cards but seems to work. Equal heights on card titles would also make them nicer.

Edited by burt
remove loads of code

Share this post


Link to post
Share on other sites

@piernas this approach works but takes away all of the good stuff that Cards brings.  The reason for Cards is to entirely remove the Columns and Rows...and make flexbox do its thing without them.


This is a signature that appears on all my posts.  
IF YOU MAKE A POST REQUESTING HELP...please state the exact version
of osCommerce that you are using. THANKS

 
Get the latest current code (community-supported responsive 2.3.4.1BS Edge) here

 

Share this post


Link to post
Share on other sites

@burt

I guess it looks even sillier if you've got one on the last row! Bootstrap docs says

Quote
Sizing

Cards assume no specific width to start, so they’ll be 100% wide unless otherwise stated.

which makes it look like they're always going to do that unless you give them a fixed width, eg

.card-deck .card {
    max-width: calc(25% - 30px);
}

https://stackoverflow.com/questions/49095075/how-make-bootstrap-4-card-decks-same-width-each-row

but if you have different numbers per row at different sizes, that's a bunch of style rules...


For a new install or if your store isn't mobile-friendly, get the community-supported responsive osCommerce (2.3.4.1 CE) here: https://github.com/gburton/Responsive-osCommerce/archive/2341-Frozen.zip

Working on generalising bespoke solutions for Quickbooks integration, Easify integration and pay4later (DEKO) integration at 2.3.x

Share this post


Link to post
Share on other sites
3 minutes ago, BrockleyJohn said:

@burt

I guess it looks even sillier if you've got one on the last row! Bootstrap docs says

which makes it look like they're always going to do that unless you give them a fixed width, eg


.card-deck .card {
    max-width: calc(25% - 30px);
}

https://stackoverflow.com/questions/49095075/how-make-bootstrap-4-card-decks-same-width-each-row

but if you have different numbers per row at different sizes, that's a bunch of style rules...

Now you clearly see the problem. 

Cards are "nice", but are a PITA to correctly code.


This is a signature that appears on all my posts.  
IF YOU MAKE A POST REQUESTING HELP...please state the exact version
of osCommerce that you are using. THANKS

 
Get the latest current code (community-supported responsive 2.3.4.1BS Edge) here

 

Share this post


Link to post
Share on other sites

So, anyway, cards are a PITA.  

I expect that in future release of bootstrap we will see some card sizing utilities for responsiveness.

 


This is a signature that appears on all my posts.  
IF YOU MAKE A POST REQUESTING HELP...please state the exact version
of osCommerce that you are using. THANKS

 
Get the latest current code (community-supported responsive 2.3.4.1BS Edge) here

 

Share this post


Link to post
Share on other sites

I have split the chitchat out of this BSv4 thread.  Thanks


This is a signature that appears on all my posts.  
IF YOU MAKE A POST REQUESTING HELP...please state the exact version
of osCommerce that you are using. THANKS

 
Get the latest current code (community-supported responsive 2.3.4.1BS Edge) here

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×