NichlasDB Posted September 10, 2014 Share Posted September 10, 2014 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 Link to comment Share on other sites More sharing options...
thescientist Posted September 10, 2014 Share Posted September 10, 2014 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? Link to comment Share on other sites More sharing options...
NichlasDB Posted September 10, 2014 Author Share Posted September 10, 2014 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? :-) Link to comment Share on other sites More sharing options...
thescientist Posted September 10, 2014 Share Posted September 10, 2014 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. Link to comment Share on other sites More sharing options...
NichlasDB Posted September 10, 2014 Author Share Posted September 10, 2014 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 :-) Link to comment Share on other sites More sharing options...
funbinod Posted September 10, 2014 Share Posted September 10, 2014 do u want to change the REAL SIZE of the image or u just want to change the DISPLAY SIZE of the image??? Link to comment Share on other sites More sharing options...
funbinod Posted September 10, 2014 Share Posted September 10, 2014 you first need to learn css.... go here: http://www.w3schools.com/css/default.asp Link to comment Share on other sites More sharing options...
NichlasDB Posted September 10, 2014 Author Share Posted September 10, 2014 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 Link to comment Share on other sites More sharing options...
justsomeguy Posted September 10, 2014 Share Posted September 10, 2014 You can change that img tag in the Smarty template to add an ID or class that you can target. Link to comment Share on other sites More sharing options...
funbinod Posted September 10, 2014 Share Posted September 10, 2014 or u can just put a style element inside your img tag.... like.............. <img src="..............." style="display: inline-block; width:....px; height:.....px" /> Link to comment Share on other sites More sharing options...
NichlasDB Posted September 10, 2014 Author Share Posted September 10, 2014 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? :-) Link to comment Share on other sites More sharing options...
funbinod Posted September 10, 2014 Share Posted September 10, 2014 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> Link to comment Share on other sites More sharing options...
dsonesuk Posted September 10, 2014 Share Posted September 10, 2014 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;} Link to comment Share on other sites More sharing options...
NichlasDB Posted September 10, 2014 Author Share Posted September 10, 2014 (edited) 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 Link to comment Share on other sites More sharing options...
funbinod Posted September 10, 2014 Share Posted September 10, 2014 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 Link to comment Share on other sites More sharing options...
NichlasDB Posted September 10, 2014 Author Share Posted September 10, 2014 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. Link to comment Share on other sites More sharing options...
dsonesuk Posted September 11, 2014 Share Posted September 11, 2014 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. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now