Resize a picture

[NichlasDB]

Hello everyone.

 

I'm new here. My name is Nichlas and I'm from Denmark. I really hope you guys can help me.

 

I have a problem with my webshop. I need to resize a picture. I've attached a photo in this post called "help_picture_1" so you can see what picture on the webshop I'm talking about.

 

Anyways...

I can't change it from the backend, so I need to do it through some code. I've found this code:

 

 

<div id="image_wrap">        {if count($Product.pictures) gt 0}        <a href="{$Product.pictures.0|thumbnail:'shop':null:null:false:false:true}" data-fancyindex="0">            <img itemprop="image" alt="" src="{$Product.pictures.0|thumbnail:'shop':240:240:false:false:true}" />        </a>        {/if}    </div>        {* If there are more than 1 picture, show the thumbnail-view *}    {if count($Product.pictures) gt 1}        <div id="slide_controls">        <div id="slideshow_left_arrow_bloc">            <div id="slideshow_left_arrow" class="prev browse left">«</div>        </div>        <div id="slideshow_right_arrow_bloc">            <div id="slideshow_right_arrow" class="next browse right">»</div>        </div>    </div>        <div id="scrollable_wrapper">        <!-- root element for scrollable -->        <div class="scrollable" id="scrollable">            <!-- root element for the items -->            <div class="items">                                <div class="slide">                                    {foreach from=$Product.pictures item=picture name=mainslider}                        <a class="item" href="{$picture|thumbnail:'shop':null:null:false:false:true}" title="{$Product.title|htmlspecialchars}" data-large="{$picture|thumbnail:'shop':240:240:false:false:true}" data-fancyindex="{$smarty.foreach.mainslider.index}">                            <img alt="{$Product.title|htmlspecialchars}" src="{$picture|thumbnail:'shop':50:50:true}" />                        </a>                        {if not $smarty.foreach.mainslider.last and $smarty.foreach.mainslider.iteration % 4 eq 0}                            </div><div class="slide">                        {/if}                    {/foreach}                                    </div>            </div>        </div>            </div>        {/if}    </div>

 

BUT no matter what number I change the 240 with - nothing happens. Can you guys figure this out, so I can get a bigger picture than 240x240px.

 

Looking forward hearing from you.

 

Have a nice day.

 

Best regards

Nichlas

[thescientist]

I am not familiar with the framework you are using. Have you tried with just CSS, by setting the image to display: inline-block and giving it a height and width?

[NichlasDB]

I am not familiar with the framework you are using. Have you tried with just CSS, by setting the image to display: inline-block and giving it a height and width?

Thanks for the quick answer. I'm not very good at coding, so can you tell me a little more? I do have a editable CSS file. How do I exactly do this? :-)

[thescientist]

 

img {  display: inline-block;  width:  XXXpx;  height: XXXpx;}

 

though you will probably want to narrow down by selector by giving your image an ID or class name since you might not want this to apply to all images.

[NichlasDB]

img {  display: inline-block;  width:  XXXpx;  height: XXXpx;}

though you will probably want to narrow down by selector by giving your image an ID or class name since you might not want this to apply to all images.

 

 

Thanks. But how do I let it know, that its only THAT kind of pictures I want to resize, and not all the pictures on the website. How do I find the ID?

 

I'm very happy that you want to help me :-)

[funbinod]

do u want to change the REAL SIZE of the image or u just want to change the DISPLAY SIZE of the image???

[funbinod]

you first need to learn css....

go here: http://www.w3schools.com/css/default.asp

[NichlasDB]

do u want to change the REAL SIZE of the image or u just want to change the DISPLAY SIZE of the image???

The DISPLAY SIZE. The thumbnail

[justsomeguy]

You can change that img tag in the Smarty template to add an ID or class that you can target.

[funbinod]

or u can just put a style element inside your img tag....

like..............

<img src="..............." style="display: inline-block; width:....px; height:.....px" />

[NichlasDB]

 

or u can just put a style element inside your img tag....

like..............

<img src="..............." style="display: inline-block; width:....px; height:.....px" />

And where do I insert this code? :-)

[funbinod]

wherever u wish! wherever u need! since even I couldn't understand the framework u r using (as thescientist said) I cannot define exactly ur requirement. but I guess u want this here ----

<div id="image_wrap">        {if count($Product.pictures) gt 0}        <a href="{$Product.pictures.0|thumbnail:'shop':null:null:false:false:true}" data-fancyindex="0">            <img src="............" style="display: inline-block; width:...px; height:...px" />        </a>        {/if}    </div>

[dsonesuk]

Try giving <div id="image_wrap"> a class name <div id="image_wrap" class="custom_lrg_img"> then use #image_wrap.custom_lrg_img img {display:inline; width:..px; height:..px;}It should give it high precedence over #image_wrap img, if it exists, if that does not work try#image_wrap.custom_lrg_img img {display:inline !important; width:..px !important; height:..px !important;}

[NichlasDB]

Try giving <div id="image_wrap"> a class name <div id="image_wrap" class="custom_lrg_img"> then use#image_wrap.custom_lrg_img img {display:inline; width:..px; height:..px;}It should give it high precedence over #image_wrap img, if it exists, if that does not work try#image_wrap.custom_lrg_img img {display:inline !important; width:..px !important; height:..px !important;}

but where in my code should I insert this? If you look at the code I have in the top of this post, can you tell me a place to paste it in? :-)

 

Also the problem is that the 240x240 shows up twice in the code in the top. So I'm a little bit confused about what and where I have to change things. And I'm sorry for being so helpless, but thats why I'm looking for help here :-)

Edited September 10, 2014 by NichlasDB

[funbinod]

I think u don't know anything about anything. everyone is suggesting u and u even don't know how to implement this simple thing? u should first learn some basics from w3schools.com

[NichlasDB]

I think u don't know anything about anything. everyone is suggesting u and u even don't know how to implement this simple thing? u should first learn some basics from w3schools.com

I think you need to relax a little. :-) Okay? cool....

 

Maybe this is simple to you, but it isn't for me. And thanks for the link :-) but I don't have the time right now to learn a whole new coding language (unfortunately, I would love to).

 

Thanks again.

[dsonesuk]

but where in my code should I insert this? If you look at the code I have in the top of this post, can you tell me a place to paste it in? :-)

 

Also the problem is that the 240x240 shows up twice in the code in the top. So I'm a little bit confused about what and where I have to change things. And I'm sorry for being so helpless, but thats why I'm looking for help here :-)

You would only add the class to the code you provided, the css i provided can be pasted in the <head>...</head> between <style>..</style> tags, or as it is now, in a external .css stylesheet file, that is all i am going to tell you, the rest you will have to learn yourself by following the link provided, its not that complicated.