Home › Forums › WoodMart support forum › Combine images using CSS sprites

Combine images using CSS sprites

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • April 28, 2018 at 11:23 am #55155

    Hosein Vahhabi
    Participant

    in GTmetrix we get a issue of “Combine images using CSS sprites”
    that want to combine small image of category that come right of category title. see image.
    How can I fix it?

    Attachments:
    You must be logged in to view attached files.
    April 28, 2018 at 11:49 am #55159

    Artem Temos
    Keymaster

    Hi,

    Sorry, but there is no an automatic tool in WordPress to combine your website images into sprites. We can’t implement it in the theme as well.

    Regards

    April 28, 2018 at 11:50 am #55160

    Hosein Vahhabi
    Participant

    How can I implement it?

    April 28, 2018 at 11:50 am #55161

    Artem Temos
    Keymaster

    We don’t have an instruction for this since it is not a theme related question.

    June 19, 2018 at 1:55 am #63641

    John
    Participant

    Hey regarding this topic.
    I also have this issue. I have set pngs to my categories and i got this in report to combine.
    Any ideas how to set md5 png to categories ?
    Or any advice how to do it manually?

    June 19, 2018 at 6:54 am #63666

    Artem Temos
    Keymaster

    Hi,

    Categories images are managed and displayed by WooCommerce plugin. It doesn’t have an option for images sprites.

    Kind Regards

    June 19, 2018 at 8:10 am #63692

    John
    Participant

    If i set svg like you did the the width js too large and the icon is ln on top of the text instead of left.

    June 19, 2018 at 8:56 am #63697

    Artem Temos
    Keymaster

    Sorry, but it is not quite clear for us. Could you please send a screenshot of the problem?

    June 19, 2018 at 11:11 am #63714

    John
    Participant

    https://imgur.com/a/UKE7EbH
    The width is set to 100% and height to 18px so if it is a .svg i have 149 x 18 px.

    June 19, 2018 at 11:16 am #63716

    Artem Temos
    Keymaster

    To fix this problem, you need to open your SVG icons file with some editor like Sublime Text or default system text editor and add height and width attributes to your <svg> tag like it is shown on the screenshot https://gyazo.com/83fd36b0bb9628bb1aed2bd3d5d063c5
    Then you will need to reupload your icons in WordPress Dashboard.

    June 19, 2018 at 11:20 am #63717

    John
    Participant

    Ok thanks.
    The thing is that i’ve tried to upload one of your svg from demo and same thing happened.
    Any ideas?

    June 19, 2018 at 12:15 pm #63725

    Artem Temos
    Keymaster

    Please, send us a link where we can see this on your website.

    June 19, 2018 at 12:28 pm #63728

    John
    Participant

    thanks
    i’ve used this instead
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 512.006 512.006" style="enable-background:new 0 0 512.006 512.006;" xml:space="preserve" width="512px" height="512px">
    seems to work 🙂 hope i get rid of that css combine error

    June 19, 2018 at 1:46 pm #63741

    Artem Temos
    Keymaster

    OK, we are glad that you sorted it out.

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)