The information in this thread might be outdated
If the solution did not help, please, check our Help Portal or contact Ecwid Team.
 
 
Thread Tools Display Modes
  #1  
Old 05-03-2015, 05:19 AM
matteo bologna's Avatar
matteo bologna is offline
 
Join Date: Apr 2015
Posts: 2
Default

Forcing an image in product description to display in product list view description


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:

Attached Thumbnails
Click image for larger version

Name:	liminal-wish.png
Views:	209
Size:	66.3 KB
ID:	2996  

Last edited by Karina Summer; 08-03-2020 at 09:00 AM. Reason: Adding image mockup
  #2  
Old 05-05-2015, 06:31 PM
Rick G's Avatar
Rick G Rick G is offline
Ecwid Team
 
Join Date: Jun 2014
Posts: 1,271
Default

Quote:
Originally Posted by matteo bologna View Post
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:
Code:
.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.
__________________
Ecwid API and App Market Team
Ecwid Developer Website
  #3  
Old 05-06-2015, 12:02 AM
matteo bologna's Avatar
matteo bologna matteo bologna is offline
 
Join Date: Apr 2015
Posts: 2
Default

Quote:
Originally Posted by Vitaliy G View Post
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:
Code:
.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?
  #4  
Old 05-06-2015, 09:31 AM
Rick G's Avatar
Rick G Rick G is offline
Ecwid Team
 
Join Date: Jun 2014
Posts: 1,271
Default

Quote:
Originally Posted by matteo bologna View Post
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:
Quote:
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.
__________________
Ecwid API and App Market Team
Ecwid Developer Website
 
The information in this thread might be outdated
If the solution did not help, please, check our Help Portal or contact Ecwid Team.

Tags
css, image, list view, product description, thumbnail

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 05:02 PM.
Powered by vBulletin® Version 3.8.11. Copyright ©2000 - 2021, Jelsoft Enterprises Ltd.