Resize product image 1.7.8.8

[aliasali]

Hello forum friends,

When we click on the product photo, the photo opens with the short descriptions, before this it only opened 1 photo with an arrow to the left and right.

Who can help us with this setup please

PS 1.7.8.10

php 7.3.31

theme Prestashop default Classic

Edited April 4, 2024 by aliasali (see edit history)

[Prestashop Addict]

Please give context: ps version, php version and theme used

[aliasali]

41 minutes ago, Prestashop Addict said:

Please give context: ps version, php version and theme used

Sorry forgot:

 

PS 1.7.8.10

php 7.3.31

theme Prestashop default Classic

[Prestashop Addict]

You have a jscomposer module installed that is in conflict. See if you can deactivate caroussel like prettyphoto in jscomposer settings

[aliasali]

On 4/4/2024 at 10:41 AM, Prestashop Addict said:

You have a jscomposer module installed that is in conflict. See if you can deactivate caroussel like prettyphoto in jscomposer settings

Thank you we will check this out. We use Visual Composer and we have disable this module still the same issue.

[Prestashop Addict]

You have an other js error, that cause the issue 😞 InstantClick. To verify open browser dev tools and see errors in console tab.

[aliasali]

8 hours ago, Prestashop Addict said:

You have an other js error, that cause the issue 😞 InstantClick. To verify open browser dev tools and see errors in console tab.

Hi, We have check it with dev tools, there a couple of errors indeed, do you know what this mean?

[aliasali]

Who can help us with this?

We have tried everything and turned off some modules, but the problem remains.

When we click on product image it does not expand to 800 x 800

[Nickz]

1 hour ago, aliasali said:

When we click on product image it does not expand to 800 x 800

how large is the product picture?

[Webski Gość]

Hey 👋🏻!

I check Your shop and if I good understand, right now You want to visually change the modal with photos?

Example of "Before" and "After" in attachment.

If You're not familiar with coding, a safer way would be to install a module that allows You to add CSS code.
However, if you feel like editing the CSS files yourself, then in the example of the classic theme, the file can be found in:
/themes/classic/assets/css/theme.css

At the end of the file, add code posted below:  

@media (min-width: 576px) {
  #product-modal .modal-dialog {
        max-width: 75vw;
        margin: 30px auto;
    }
}

#product-modal .modal-content .modal-body {
	margin-left: 0 !important;
}

#product-modal #thumbnails {
	flex-basis: 25%;
}

After You add CSS code, remember to clean cache.

 

I hope my advice has been helpful to you. If you have any further questions or need additional assistance, feel free to ask. 
Good luck! 🚀

[Nickz]

17 hours ago, Webski Gość said:

After You add CSS code, remember to clean cache.

store cache and browser cache

 

[aliasali]

18 hours ago, Webski Gość said:

Hey 👋🏻!

I check Your shop and if I good understand, right now You want to visually change the modal with photos?

Example of "Before" and "After" in attachment.

If You're not familiar with coding, a safer way would be to install a module that allows You to add CSS code.
However, if you feel like editing the CSS files yourself, then in the example of the classic theme, the file can be found in:
/themes/classic/assets/css/theme.css

At the end of the file, add code posted below:  

@media (min-width: 576px) {
  #product-modal .modal-dialog {
        max-width: 75vw;
        margin: 30px auto;
    }
}

#product-modal .modal-content .modal-body {
	margin-left: 0 !important;
}

#product-modal #thumbnails {
	flex-basis: 25%;
}

After You add CSS code, remember to clean cache.

 

I hope my advice has been helpful to you. If you have any further questions or need additional assistance, feel free to ask. 
Good luck! 🚀

1. Thank you sir, it works and now we get the photo enlarged, but the other photos are not underneath each other, can we also adjust that, and do you also know why the description is included? 

2. We like image 2.png and preferably without description, Do you happen to know how we can turn that off? (turn off description with photo) like 3.png

 

[Webski Gość]

My mistake, it was senseless to assign the value 75vw; it would be better to change it to 920px;

@media (min-width: 576px) {
  #product-modal .modal-dialog {
        max-width: 920px;
        margin: 30px auto;
    }
}

 

A short caption under the photograph is the default approach in the classic theme, as the name itself suggests; it is intended to provide the most concise characterization of the product. This is also significant in the context of SEO. Hence, it is pointless to insert the full specification there, as a dedicated description field with text styling options is available for that purpose.
 

Alternatively, I can suggest that the file responsible for displaying the modal can be found here:
/themes/classic/templates/catalog/_partials/product-images-modal.tpl

[aliasali]

12 hours ago, Webski Gość said:

My mistake, it was senseless to assign the value 75vw; it would be better to change it to 920px;

@media (min-width: 576px) {
  #product-modal .modal-dialog {
        max-width: 920px;
        margin: 30px auto;
    }
}

 

A short caption under the photograph is the default approach in the classic theme, as the name itself suggests; it is intended to provide the most concise characterization of the product. This is also significant in the context of SEO. Hence, it is pointless to insert the full specification there, as a dedicated description field with text styling options is available for that purpose.
 

Alternatively, I can suggest that the file responsible for displaying the modal can be found here:
/themes/classic/templates/catalog/_partials/product-images-modal.tpl

Once again I thank you very much, we will adjust it. We will leave description with the image if this is better for SEO