Problems with .png files

Kateryna
New Member
11 0 0

I am experimenting with different coloured backgrounds in symmetry theme and would therefore like my images to have transparent backgrounds.  I have several png images which look absolutely fine in Photoshop ie they are trannsparent, but when I upload them to my homepage slideshow they have a rectangular white background.

Can anyone help me with this?

 

Thanks.

 

I

0 Likes
Pedro_Mauricio
Shopify Partner
14 0 1

Probably the container which you are inserting the images have a default background. Could you post your source code for the Image and it's css?

0 Likes
Kateryna
New Member
11 0 0

 

Hi Pedro

https://cdn.shopify.com/s/files/1/0959/4634/t/10/assets/slide_1.jpg?6631492094846902890

 

I copied this from the assets folder which hold the image as slide_1 .jpg even though I uploaded it as a .png

 

I've looked under settings_schema.json   for my theme(symmetry) and it seems that all images are converted to jpegs.

 

Here is an extract from the code in question.:

 

  {
    "name": "Home page - slideshow",
    "settings": [
      {
        "type": "header",
        "content": "Slide 1"
      },
      {
        "type": "checkbox",
        "id": "slide_1_show",
        "label": "Enable"
      },
      {
        "type": "image",
        "id": "slide_1.jpg",
        "label": "Image",
        "info": "1200px wide minimum"
      },
      {
        "type": "text",
        "id": "slide_1_alt_txt",
        "label": "Image title and alt text"
      },
      {
        "type": "text",
        "id": "slide_1_url",
        "label": "Link URL"
      },
      {
        "type": "checkbox",
        "id": "slide_1_txt_show",
        "label": "Show overlay text"
      },
      {
        "type": "text",
        "id": "slide_1_txt",
        "label": "Overlay text"
      },
      {
        "type": "select",
        "id": "slide_1_txt_pos",
        "label": "Overlay position",
        "options": [
          {
            "value": "left",
            "label": "Left"
          },
          {
            "value": "centre",
            "label": "Centre"
          },
          {
            "value": "right",
            "label": "Right"
          }
        ]
      }

I tried changing the .jpg file extensions to .png  within these setting but to no avail.

Hope you are able to help with this.  Thanks

 

 

0 Likes
Kasimir
Shopify Partner
385 0 62

Hello Kateryna,

You are in the right tracks, .jpg is never transparent.

Aswell as changing the image in the settings_schema.json you will also need to change the links on the actual slider, what ever the image is being used as. As it will not automaticly update to .png when setting_schema.json is changed.

I would help you with exact things you need to do but I do not have access to the theme.

Hope this helps to push you to the right direction.

Kasimir

"Good design is good business"
0 Likes
Kateryna
New Member
11 0 0

Hi Kasimir. Thank you for your reply. I read somewhere that I may have to change something in Assets too but I'm not sure how to do that.  If you could have a look at my theme that would be great. I have made a copy of my theme for doing experimental work."Shopify Guru edit"

 

retrievertest1 

mdrs19dr

 

At the moment I am just workling on the Homepage Slideshow but it would be nice to know how to change other images too. 

 

Another thing I'd like to be able to do is change the colour of the slider arrows on the Homepage Slideshow  if it is not too much trouble.

 

Thanks for your help.

0 Likes
Jason
Shopify Expert
10037 119 1872

Just as a quick note, in the schema file this is what determines the name and type of file:

{
  "type": "image",
  "id": "slide_1.jpg",
  "label": "Image",
  "info": "1200px wide minimum"
},

If you wanted the image to be a png you would need to make a change like so:

{
  "type": "image",
  "id": "slide_1.png",
  "label": "Image",
  "info": "1200px wide minimum"
},

^ This is only half the battle however. You'll also need to find the section of code where this is used and make sure the filename (slide_1.jpg) is changed to slide_1.png.

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
0 Likes
Kateryna
New Member
11 0 0

Hi Jason. When I look at "Assets"  there are lists of images in a column to the left, including the image_1 .jpg etc. When I click on that all it does is display the image of that name. How do I find the section of code where the image is used.  What would the start of the code look like?   I presume it is within styles.scss.liquid.

0 Likes
Jason
Shopify Expert
10037 119 1872

The assets folder in the theme is where the files will go when uploading something via the Theme Settings. The code will be found in the templates, or in one of the snippets. 

If we're talking about the home page - index.liquid is a good place to start. That's the template that is used for the home (aka: index) page. 

For symmetry - and assuming our versions are the same - you'll want to look in home-slideshow.liquid. If you've changed every slide to be a png you'll want to change the line like this:

{% assign slide_img_url = 'slide_' | append: i | append: '.jpg' %}

into this:

{% assign slide_img_url = 'slide_' | append: i | append: '.png' %}

^ don't assume the code is same so be sure adapt as needed. Once done you'll also need to upload the images again - this time as png files with the png extension.

Also, it's always a good idea to make a copy of the theme and work in the copy. That way any errors are not made in the master version.

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
0 Likes
Kateryna
New Member
11 0 0

Got it to work..Thank you Jason,  excellent job! 

0 Likes
kiyalse333
New Member
1 0 0

You can change the file format to get the solution. There are many online tools which may help you to convert your file format to any other format.

0 Likes