search

jameskoster / woocommerce-accepted-payment-methods

Extends WooCommerce giving you the option to display accepted payment methods via widget, shortcode or template tag.
17 stars 27 forks source link

Reduce HTTP requests: Combine images into CSS sprite #12

Open chirag-v opened 10 years ago

chirag-v commented 10 years ago

For those who have several payment methods active, all images generate individual HTTP request. CSS sprites have to be generated manually, which involves generating one image of all logo. Uploading it to server. Pasting the appropriate css in stylesheet.

Would be great if this is possible out of the box.

We need a combined image of logos (preferably in all possible combinations) such as this: http://s16.postimg.org/3wss2n4ol/payment_methods_logos.png

Then make use of background-position property to render it in correct location.

Right now this can be done by adding something like this to style sheet:

//payment logo sprite ul.accepted-payment-methods li.american-express span { background-image: url("../images/amex.png"); background-image: url("/path/to/image/payment-methods-logo-stripe.png"); background-position: -6px -6px; } ul.accepted-payment-methods li.cash-on-delivery span { background-image: url("../images/cod.png"); background-image: url("/path/to/image/payment-methods-logo-stripe.png"); background-position: -6px -90px; } ul.accepted-payment-methods li.mastercard span { background-image: url("../images/mastercard.png"); background-image: url("/path/to/image/payment-methods-logo-stripe.png"); background-position: -6px -174px; } ul.accepted-payment-methods li.visa span { background-image: url("../images/visa.png"); background-image: url("/path/to/image/payment-methods-logo-stripe.png"); background-position: -6px -258px; }

jameskoster commented 10 years ago

Feel free to send a PR, I don't have time to do this myself atm.

chirag-v commented 10 years ago

Have sent through with all necessary changes.