Jump to content

Resize product image 1.7.8.8


aliasali

Recommended Posts

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

we dont want this.jpg

we want this.jpg

Edited by aliasali (see edit history)
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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?

Screenshot_1.jpg

Link to comment
Share on other sites

  • 2 months later...

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

Link to comment
Share on other sites

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! 🚀

modal_after.png

modal_before.png

Link to comment
Share on other sites

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! 🚀

modal_after.png

modal_before.png

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

 

1.png

2.png

3.png

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...