Joomla Templates Club 406,261 posts

[pramodsahu Friend pramodsahuJoin date: May 2014Posts: 83Downloads:219Uploads:10 Thanks: 29 Thanked: 5 times in 1 posts]

#199091

How to increase Image size in product page?

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#539956

You can try opening file: componentscom_mijoshopopencartcatalogviewthemebookshoptemplateproductproduct.tpl
[PHP]
<div class=”product-info row”>
<?php if ($thumb || $images) { ?>
<div class=”col-xs-12 col-md-4 col-sm-4″>
<?php if ($thumb) { ?>
<div class=”image”><a href=”<?php echo $popup; ?>” title=”<?php echo $heading_title; ?>” class=”colorbox” rel=”colorbox”><img src=”<?php echo $thumb; ?>” title=”<?php echo $heading_title; ?>” alt=”<?php echo $heading_title; ?>” id=”image” /></a></div>
<?php } ?>
<?php if ($images) { ?>
<div class=”image-additional”>
<?php foreach ($images as $image) { ?>
<a href=”<?php echo $image[‘popup’]; ?>” title=”<?php echo $heading_title; ?>” class=”colorbox” rel=”colorbox”><img src=”<?php echo $image[‘thumb’]; ?>” title=”<?php echo $heading_title; ?>” alt=”<?php echo $heading_title; ?>” /></a>
<?php } ?>
</div>
<?php } ?>
</div>
<?php } ?>
<div class=”col-xs-12 col-md-8 col-sm-8″>
<h1 class=”mijoshop_heading_h1 product-title”><?php echo $heading_title; ?></h1>
[/PHP]
change it to:
[PHP]
<div class=”product-info row”>
<?php if ($thumb || $images) { ?>
<div class=”col-xs-12 col-md-6 col-sm-6″>
<?php if ($thumb) { ?>
<div class=”image”><a href=”<?php echo $popup; ?>” title=”<?php echo $heading_title; ?>” class=”colorbox” rel=”colorbox”><img src=”<?php echo $thumb; ?>” title=”<?php echo $heading_title; ?>” alt=”<?php echo $heading_title; ?>” id=”image” /></a></div>
<?php } ?>
<?php if ($images) { ?>
<div class=”image-additional”>
<?php foreach ($images as $image) { ?>
<a href=”<?php echo $image[‘popup’]; ?>” title=”<?php echo $heading_title; ?>” class=”colorbox” rel=”colorbox”><img src=”<?php echo $image[‘thumb’]; ?>” title=”<?php echo $heading_title; ?>” alt=”<?php echo $heading_title; ?>” /></a>
<?php } ?>
</div>
<?php } ?>
</div>
<?php } ?>
<div class=”col-xs-12 col-md-6 col-sm-6″>
<h1 class=”mijoshop_heading_h1 product-title”><?php echo $heading_title; ?></h1>
[/PHP]

Then create a new css file called custom.css in this path: /templates/ja_bookshop/css and add this new css rule:


.product-info .image {
width: 100%;
}


[pramodsahu Friend pramodsahuJoin date: May 2014Posts: 83Downloads:219Uploads:10 Thanks: 29 Thanked: 5 times in 1 posts]

#539975

Hello Saguaros,

Thank you for your support, I have gone through steps.

What i noticed is:

its working fine but width wise it is increase more and height is not increase….

now i want to reduce little width and wanted to increase height is it possible? exactly like current dimensions both height/width to be increased.

One more thing i noticed, I’m using magic touch module for zooming, image is not responsive, when i use this module. any solution from your side? or need to contact with their support.

Regards,

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#540560

Hi,

I’m afraid that zoom magic touch module affects the dimension and the responsive of image. If you try to disable this extension, you can simply change the height for the image by adding the height property:


.product-info .image img {
width: 100%;
height: /*your_desired_value_here*/;
}


Please try to contact this extension’s provider to know if they support the responsive feature and change the dimension or not.

1 user says Thank You to Saguaros for this useful post

1. pramodsahu

[Author]

Posts