[matteo bologna]

As many threads begin, "I have tried for hours and cannot seem to find a CSS adjustment that will do what I need."

In a shop I am developing, I have inserted a 200x50px image (more or less) in my product description . I would like this image to show up when a visitor is browsing products in list view. But somehow the images get stripped out, and I'm hoping there is a CSS selector that I can set the Display or Visibility to show this image right under the Product Name and SKU (which i currently have Display: None).

Please?

My "sandbox" store is http://clients.thebranding.company/m...titled-11.html

Here is a product example with an image (and why does it show up TWICE?? Grr.)

Here is the list view where I would like that image to appear, just as the text from the description appears.

In a perfect world with butterflies everywhere, I would like the above Product List page to look something like this:

[Rick G]

Originally Posted by matteo bologna

As many threads begin, "I have tried for hours and cannot seem to find a CSS adjustment that will do what I need."

In a shop I am developing, I have inserted a 200x50px image (more or less) in my product description. I would like this image to show up when a visitor is browsing products in list view. But somehow the images get stripped out, and I'm hoping there is a CSS selector that I can set the Display or Visibility to show this image right under the Product Name and SKU (which i currently have Display: None).

Please?

My "sandbox" store is http://clients.thebranding.company/m...titled-11.html

Here is a product example with an image (and why does it show up TWICE?? Grr.)

Here is the list view where I would like that image to appear, just as the text from the description appears.

In a perfect world with butterflies everywhere, I would like the above Product List page to look something like this:

Hi,

Thank you for contacting us.

All Ecwid storefronts have three types of displaying products from your Ecwid catalog:
Grid: the main element here is an image, therefore it is displayed alongside with the product name and the price. Also you can enable the Buy now buttons under the product price by enabling the option in Ecwid control panel > System settings > General > Cart > Show "Buy now" buttons on products list pages.

List: this view type is usually used to display a brief description of the product and the products in this mode include: product name, product image, price, and a part of its description. If you have images in that product's description, then they will not be displayed as well as the links will not be active to preserve the consistency of the product display, thus it looks the same way for all products.

Table: this view type can be used if you have a lot of products to display in a single category and the image and presentation is not as important as the ability to see the product name and SKU right away and select multiple products.

In case if you need to display an image that you added to the product description, then I can suggest two options:
1. You can use product image as a small preview of the font that user can expect and specify in the description that in order to see the full image the user will need to open that product and see the image itself in the product's description.

2. Use CSS to add an image to a specific product.

Basically you will upload the image to an image hosting and then add it after the product description in list view.

Let's say you have a category with ID 1234 and you need to add an image to the first product in List view.

In order to do that you will need to add this code to your CSS themes:

.ecwid-productBrowser-CategoryPage-1234 .ecwid-productBrowser-productsList-productRow:nth-child(2) .ecwid-productBrowser-productsList-details div:nth-child(3):after {
	content: url('URL_TO_IMAGE');
}

The part that I highlighted in red specifies that we will target the first product (the second product will be nth-child(4) and so on), the part in blue specifies that we will add the image after the product's description. And in the 'content' section we specify a URL to our image that we want to display. The green part specifies that we target the category pages of the category with ID 1234.

So this way you can display the images that you want in List mode.

3. Another way here is to create a custom script and it will work like this:
- In your product description you will add just a link to your image
- the script will 'see' that link in the product description once the List view is opened and replace it with the image HTML element using the same very link, thus the image will appear
- the condition here is to make this script will only execute on the list view only using Ecwid Javascript API

At the moment I am not able to provide you with a ready solution, unfortunately, so in case it is created - I will update you here. In the meantime if you are not sure how to do this script yourself, please contact a professional developer for this task.
Thank you.

[matteo bologna]

Originally Posted by Vitaliy G

Hi,

Thank you for contacting us.

...

2. Use CSS to add an image to a specific product.

Basically you will upload the image to an image hosting and then add it after the product description in list view.

Let's say you have a category with ID 1234 and you need to add an image to the first product in List view.

In order to do that you will need to add this code to your CSS themes:

.ecwid-productBrowser-CategoryPage-1234 .ecwid-productBrowser-productsList-productRow:nth-child(2) .ecwid-productBrowser-productsList-details div:nth-child(3):after {
	content: url('URL_TO_IMAGE');
}

The part that I highlighted in red specifies that we will target the first product (the second product will be nth-child(4) and so on), the part in blue specifies that we will add the image after the product's description. And in the 'content' section we specify a URL to our image that we want to display. The green part specifies that we target the category pages of the category with ID 1234.

So this way you can display the images that you want in List mode.

3. Another way here is to create a custom script and it will work like this:
- In your product description you will add just a link to your image
- the script will 'see' that link in the product description once the List view is opened and replace it with the image HTML element using the same very link, thus the image will appear
- the condition here is to make this script will only execute on the list view only using Ecwid Javascript API

At the moment I am not able to provide you with a ready solution, unfortunately, so in case it is created - I will update you here. In the meantime if you are not sure how to do this script yourself, please contact a professional developer for this task.
Thank you.

Aaaah.... the CSS method is what I was aiming for. I tried the code, but probably because of some CSS I've tweaked, I'm getting TWO images, so I'll have to play with your suggested selectors to drill down to the proper nth child. But THANK YOU for the :after idea...

Although, I'll have to create a CSS entry for EVERY product? Or else find someone who knows javascript better than I do who can write up a quick snippet...

So there is no way to create a CSS selector to force-display an image URL already added to the product's description back in the Control Panel UI?

[Rick G]

Originally Posted by matteo bologna

Aaaah.... the CSS method is what I was aiming for. I tried the code, but probably because of some CSS I've tweaked, I'm getting TWO images, so I'll have to play with your suggested selectors to drill down to the proper nth child. But THANK YOU for the :after idea...

Although, I'll have to create a CSS entry for EVERY product? Or else find someone who knows javascript better than I do who can write up a quick snippet...

So there is no way to create a CSS selector to force-display an image URL already added to the product's description back in the Control Panel UI?

Hi,

Thank you for contacting us.

Yes, you are correct, the CSS :after elements will need to be added for every product and every category, if you want to go using the option 2 - manual modifying of CSS.

The 3rd option will be more automated: you will add the url to the product description, then the script will see that the link is present and then convert it to the image HTML element.

We will need to do this, because of how the list view works:

List: this view type is usually used to display a brief description of the product and the products in this mode include: product name, product image, price, and a part of its description. If you have images in that product's description, then they will not be displayed as well as the links will not be active to preserve the consistency of the product display, thus it looks the same way for all products.

So if you add images, text and links to your product description, then that description will be always converted to a string of text from your description and any links/images will not be physically present in the code, thus we are not able to 'switch' it back up using CSS.

I perfectly understand your position and I wish that your store looks the way you want to, so in order to achieve this please consider the options that I suggested in my previous message and if you have any questions on how to use them, please let me know.
Thank you.