Vertical product images orientation

Quote

Post by bacbacimimo » Wed Dec 21, 2016 7:14 pm

Hi everyone!
i just wondering if you could help me with next question
I want to change additional product images orientation from horisontal type to vertical.
I know that i should make some changes in this section of product template file:

Code: Select all

<ul class="thumbnails" id="blueimp">
            <?php if ($thumb) { ?>
            <li><a class="thumbnail" href="<?php echo $popup; ?>" title="<?php echo $heading_title; ?>"><img src="<?php echo $thumb; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a></li>
            <?php } ?>
            <?php if ($images) { ?>
            <?php foreach ($images as $image) { ?>
            <li class="image-additional"><a class="thumbnail" href="<?php echo $image['popup']; ?>" title="<?php echo $heading_title; ?>"> <img src="<?php echo $image['thumb']; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a></li>
            <?php } ?>
            <?php } ?>
          </ul>
and in styleseet file i have to play with classes. I don't have enough skill to make it completely myself but i hope you give me some advices to show me how to make it
bacbacimimo
Newbie
Posts
3
Joined
Wed Dec 21, 2016 6:55 pm
Top

Re: Vertical product images orientation

Quote

Post by uksitebuilder » Thu Dec 22, 2016 7:11 pm

So something like this:
Screen Shot 2016-12-22 at 11.08.29.png

Screen Shot 2016-12-22 at 11.08.29.png (355.05 KiB) Viewed 12213 times

If so, edit catalog/view/theme/default/template/product.tpl

find:

Code: Select all

          <?php if ($thumb || $images) { ?>
           <ul class="thumbnails">
            <?php if ($thumb) { ?>
            <li><a class="thumbnail" href="<?php echo $popup; ?>" title="<?php echo $heading_title; ?>"><img src="<?php echo $thumb; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a></li>
            <?php } ?>
            <?php if ($images) { ?>
            <?php foreach ($images as $image) { ?>
            <li class="image-additional"><a class="thumbnail" href="<?php echo $image['popup']; ?>" title="<?php echo $heading_title; ?>"> <img src="<?php echo $image['thumb']; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a></li>
            <?php } ?>
            <?php } ?>
          </ul>
          <?php } ?>
change to:

Code: Select all

          <?php if ($thumb || $images) { ?>
           <div class="col-sm-2">
            <?php if ($images) { ?>
            <ul class="thumbnails">
           <?php foreach ($images as $image) { ?>
            <li class="image-additional"><a class="thumbnail" href="<?php echo $image['popup']; ?>" title="<?php echo $heading_title; ?>"> <img src="<?php echo $image['thumb']; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a></li><br style="clear:both;">
            <?php } ?>
            </ul>
            <?php } ?>
           </div>
           <div class="col-sm-10">
            <?php if ($thumb) { ?>
            <ul class="thumbnails">
            <li><a class="thumbnail" href="<?php echo $popup; ?>" title="<?php echo $heading_title; ?>"><img src="<?php echo $thumb; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a></li>
            </ul>
            <?php } ?>
           </div><br style="clear:both;">
           <?php } ?>
User avatar
uksitebuilder
Guru Member
Posts
7716
Joined
Thu Jun 09, 2011 11:37 pm
Location - United Kindgom
Top

Re: Vertical product images orientation

Quote

Post by bacbacimimo » Fri Dec 23, 2016 2:23 am

yes
now it looks like i want but popup function doesn't work. I use blueimp

I've added 2 rows - included 2 divs that you made into <div id="blueimp"> and now it's work

Code: Select all

<?php if ($thumb || $images) { ?>
		  <div id="blueimp">
           <div class="col-sm-2" >
            <?php if ($images) { ?>
            <ul class="thumbnails">
           <?php foreach ($images as $image) { ?>
            <li class="image-additional"><a class="thumbnail" href="<?php echo $image['popup']; ?>" title="<?php echo $heading_title; ?>"> <img src="<?php echo $image['thumb']; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a></li><br style="clear:both;">
            <?php } ?>
            </ul>
            <?php } ?>
           </div>
           <div class="col-sm-10" id="blueimp">
            <?php if ($thumb) { ?>
            <ul class="thumbnails">
            <li><a class="thumbnail" href="<?php echo $popup; ?>" title="<?php echo $heading_title; ?>"><img src="<?php echo $thumb; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a></li>
            </ul>
            <?php } ?>
           </div><br style="clear:both;">
           <?php } ?>
		   </div>
but now when you click on one of the additional photos then the main photo would be shown at the end of the gallery. it's not so big problem as next:

on cellpones it looks not so good - first you see column of the additional photos and only uder them the main photo.
bacbacimimo
Newbie
Posts
3
Joined
Wed Dec 21, 2016 6:55 pm
Top

Re: Vertical product images orientation

Quote

Post by uksitebuilder » Fri Dec 23, 2016 4:49 am

Hi

I am unsure as to what blueimp is as it is not standard install for OC

If you want the main image to come first on cellphone, then you should have the thumbnails to the right of the main image.

Like so:

Code: Select all

<?php if ($thumb || $images) { ?>
        <div id="blueimp">
           <div class="col-sm-10" id="blueimp">
            <?php if ($thumb) { ?>
            <ul class="thumbnails">
            <li><a class="thumbnail" href="<?php echo $popup; ?>" title="<?php echo $heading_title; ?>"><img src="<?php echo $thumb; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a></li>
            </ul>
            <?php } ?>
           </div>
           <div class="col-sm-2" >
            <?php if ($images) { ?>
            <ul class="thumbnails">
           <?php foreach ($images as $image) { ?>
            <li class="image-additional"><a class="thumbnail" href="<?php echo $image['popup']; ?>" title="<?php echo $heading_title; ?>"> <img src="<?php echo $image['thumb']; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a></li><br style="clear:both;">
            <?php } ?>
            </ul>
            <?php } ?>
           </div> <br style="clear:both;">
           <?php } ?>
         </div>
User avatar
uksitebuilder
Guru Member
Posts
7716
Joined
Thu Jun 09, 2011 11:37 pm
Location - United Kindgom
Top

Re: Vertical product images orientation

Quote

Post by bacbacimimo » Fri Dec 23, 2016 5:13 am

Cool!
Man i love you :). You are magician and a good man! Thank you. All the best to you and your family!
Additional photos to the right of main photo look pretty nice too in my opinion

Now all is OK. Only left to find out how to force additional photos shown up in horizontal mode when somebode trying to open a page through a cellphone
bacbacimimo
Newbie
Posts
3
Joined
Wed Dec 21, 2016 6:55 pm
Top

Re: Vertical product images orientation

Quote

Post by by_falcon » Tue Sep 03, 2019 6:04 pm

uksitebuilder wrote: ↑
Thu Dec 22, 2016 7:11 pm
 So something like this:

Screen Shot 2016-12-22 at 11.08.29.png

If so, edit catalog/view/theme/default/template/product.tpl

find:

Code: Select all

          <?php if ($thumb || $images) { ?>
           <ul class="thumbnails">
            <?php if ($thumb) { ?>
            <li><a class="thumbnail" href="<?php echo $popup; ?>" title="<?php echo $heading_title; ?>"><img src="<?php echo $thumb; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a></li>
            <?php } ?>
            <?php if ($images) { ?>
            <?php foreach ($images as $image) { ?>
            <li class="image-additional"><a class="thumbnail" href="<?php echo $image['popup']; ?>" title="<?php echo $heading_title; ?>"> <img src="<?php echo $image['thumb']; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a></li>
            <?php } ?>
            <?php } ?>
          </ul>
          <?php } ?>
change to:

Code: Select all

          <?php if ($thumb || $images) { ?>
           <div class="col-sm-2">
            <?php if ($images) { ?>
            <ul class="thumbnails">
           <?php foreach ($images as $image) { ?>
            <li class="image-additional"><a class="thumbnail" href="<?php echo $image['popup']; ?>" title="<?php echo $heading_title; ?>"> <img src="<?php echo $image['thumb']; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a></li><br style="clear:both;">
            <?php } ?>
            </ul>
            <?php } ?>
           </div>
           <div class="col-sm-10">
            <?php if ($thumb) { ?>
            <ul class="thumbnails">
            <li><a class="thumbnail" href="<?php echo $popup; ?>" title="<?php echo $heading_title; ?>"><img src="<?php echo $thumb; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a></li>
            </ul>
            <?php } ?>
           </div><br style="clear:both;">
           <?php } ?>
help pls i have product zoom. I don't want the plugin to be damaged
I want to show additional pictures on the left
my code

<?php if ($thumb || $images) { ?>
<ul class="thumbnails">
<?php if ($thumb) { ?>
<span style="display:block;"><a class="thumbnail min-h" href="<?php //echo $popup; ?>" title="<?php echo $heading_title; ?>"><img class="main_image" src="<?php echo $thumb; ?>" id="zoom_01" data-zoom-image="<?php echo $popup; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a></span>
<?php } ?>
<?php if ($images) { ?>
<?php foreach ($images as $image) { ?>
<span class="image-additional" style="cursor:pointer;"><a class="thumbnail" title="<?php echo $heading_title; ?>"> <img src="<?php echo $image['thumb']; ?>" name="<?php echo $image['swap']; ?>" id="<?php echo $image['popup']; ?>" class="thumb_image1" data-zoom-image="<?php echo $image['thumb']; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a></span>
<?php } ?>
<?php } ?>
</ul>
<?php } ?>
by_falcon
Newbie
Posts
1
Joined
Mon Aug 26, 2019 4:58 pm
Top
Post Reply
Return to “Template Support”
Who is online

Users browsing this forum: No registered users and 160 guests