Post by smashrc » Thu Oct 23, 2014 4:41 pm

Hello,

In product page, adding additional picture in upper left area is not enough. I think it is necessary to add pictures in description especially for long description. It is way more attractive with pictures in description then just pictures alone in the upper area.

I have no experience with coding and want to ask if the following code for display the picture works in responsive template? Thank you

------------
<html><head></head><body><p></p><div style="text-align: center;"><br></div><p style="text-align: center;"><img style="width: 100%; max-width: 462px;" src="image/catalog/demo/Desc/Propeller.jpg"></p><p><img src="image/catalog/demo/Desc/Specification.jpg"><br></p><p></p><ul> <li>Length (Inch): 8.75</li><li>Length (mm): 222</li><li>Pitch (Inch): 7</li><li>Pitch (mm): 178</li></ul>
</body>
</html>
-----------

------------

New member

Posts

Joined
Sun Mar 09, 2014 4:39 pm

Post by uksitebuilder » Thu Oct 23, 2014 6:20 pm

remove the width and height attributes from your image tag

add class="img-responsive"

e.g.

Code: Select all

<img src="some_url_to_image" class="img-responsive" alt="">
OpenCart uses Bootstrap 3 for styling etc.

Lots of info on the web for Bootstrap 3

ImageImageImageImage

For Friendly Professional Support - Click Here


User avatar
Guru Member

Posts

Joined
Thu Jun 09, 2011 11:37 pm
Location - United Kindgom

Post by smashrc » Thu Oct 23, 2014 11:25 pm

Thank you so much uksitebuilder.

I want to know where should I upload the description pictures? or just anywhere under images folder is fine? thanks

New member

Posts

Joined
Sun Mar 09, 2014 4:39 pm

Post by uksitebuilder » Thu Oct 23, 2014 11:35 pm

Anywhere is fine.

You can create additinoal folders in the image manager if you wish to keep everything tidy

ImageImageImageImage

For Friendly Professional Support - Click Here


User avatar
Guru Member

Posts

Joined
Thu Jun 09, 2011 11:37 pm
Location - United Kindgom

Post by smashrc » Fri Oct 24, 2014 10:05 am

Got it uksitebuilder. Thank you :ok:

New member

Posts

Joined
Sun Mar 09, 2014 4:39 pm

Post by sunsys » Tue Oct 27, 2015 12:47 pm

uksitebuilder wrote:remove the width and height attributes from your image tag

add class="img-responsive"

e.g.

Code: Select all

<img src="some_url_to_image" class="img-responsive" alt="">
OpenCart uses Bootstrap 3 for styling etc.

Lots of info on the web for Bootstrap 3
@uksb, I have used the same script for having a banner image on the home page added via the html content module in oc2031 and the script is like: <div style="text-align:center"><img alt="" class="img-responsive" src="https://www.letsbuynow.in/image/catalog ... nner-1.jpg" /></div>
the image is become responsive but is not centered anymore, what wrong am I doing or what should i do please guide as I need the image responsive and centered at the same time.

Regards,
Sun Systems
Industrial Electronics and Instrumentation


User avatar
Active Member

Posts

Joined
Tue Jan 27, 2015 5:19 am

Post by uksitebuilder » Tue Oct 27, 2015 4:08 pm

You need to give your div element a width and then center that div (I.e. margin:0 auto; )

ImageImageImageImage

For Friendly Professional Support - Click Here


User avatar
Guru Member

Posts

Joined
Thu Jun 09, 2011 11:37 pm
Location - United Kindgom

Post by sunsys » Wed Oct 28, 2015 5:00 am

uksitebuilder wrote:You need to give your div element a width and then center that div (I.e. margin:0 auto; )
@uskb, kindly give me an example, I tried all combinations but nothing seems to work so give an example of the correct syntax.

Thank you for your time.

Regards,
Sun Systems
Industrial Electronics and Instrumentation


User avatar
Active Member

Posts

Joined
Tue Jan 27, 2015 5:19 am

Post by uksitebuilder » Wed Oct 28, 2015 5:12 am

Code: Select all

<div style="max-width:800px;margin:0 auto;"><img alt="" class="img-responsive" src="https://www.letsbuynow.in/image/catalog/data/site/50-freeshipping-banner-1.jpg" /></div>

ImageImageImageImage

For Friendly Professional Support - Click Here


User avatar
Guru Member

Posts

Joined
Thu Jun 09, 2011 11:37 pm
Location - United Kindgom

Post by sunsys » Wed Oct 28, 2015 6:02 am

uksitebuilder wrote:

Code: Select all

<div style="max-width:800px;margin:0 auto;"><img alt="" class="img-responsive" src="https://www.letsbuynow.in/image/catalog/data/site/50-freeshipping-banner-1.jpg" /></div>
@UKSB: Thank you very much, as usual your reply is bang on perfect. My mistake was I used width:100% which did not work.

Your help is very much appreciated in the matter.

Regards,
Sun Systems
Industrial Electronics and Instrumentation


User avatar
Active Member

Posts

Joined
Tue Jan 27, 2015 5:19 am

Post by OC-Noob » Tue Oct 15, 2019 12:00 pm

uksitebuilder wrote:
Wed Oct 28, 2015 5:12 am

Code: Select all

<div style="max-width:800px;margin:0 auto;"><img alt="" class="img-responsive" src="https://www.letsbuynow.in/image/catalog/data/site/50-freeshipping-banner-1.jpg" /></div>
This code works for me for a banner, but i cant figure out how to make it with a hyperlink a clickable banner thats responsive. Can you help? Thanks in advance.

Newbie

Posts

Joined
Tue Oct 15, 2019 11:50 am
Who is online

Users browsing this forum: No registered users and 9 guests