Datafeedr Support Forums  

Go Back   Datafeedr Support Forums > Current Version (V3) Forum > Questions
Home Register FAQ Members List Calendar Search Today's Posts Mark Forums Read

Important - The support forums are now in "read-only" mode as we transition to an alternative help desk solution. Feel free to contact us here with any of your questions or search the forums for an existing solution.
 
 
Thread Tools Search this Thread Display Modes
  #1  
Old March 27th, 2012, 03:25 AM
1800HART 1800HART is offline
 
Join Date: Apr 2008
Posts: 487
Default How to change Image Size on Product Detail View

In my general template "Product Detail" views ... I have this code:
Code:
  <div class="lc">
    <div class="thmb">
      <a href="[product.url direct='0']" title="[product.name]" target="_blank">
        [product.image tag='1']
      </a>
    </div>
  </div>
Basically, on the product detail pages for each product it is wrapping the name and details around a left aligned image or thumbnail image that is less than 200px wide. I know there are larger images available, and even if not - I want to adjust so every image has width=550px then the detail information below.

Is there a way to do that?
__________________
| Shop @ HART Markets | Twitter |
  #2  
Old March 27th, 2012, 08:57 AM
Eric's Avatar
Eric Eric is offline
Datafeedr Team
 
Join Date: Feb 2008
Posts: 16,902
Default

Hi

If that's the code in your Product Detail page, then this should work:

HTML Code:
  <div class="lc">
    <div class="thmb">
      <a href="[product.url direct='0']" title="[product.name]" target="_blank">
        <img src="[product.image tag='0']" width="550" alt="[product.name]" />
      </a>
    </div>
  </div>
Eric
  #3  
Old March 28th, 2012, 05:34 PM
1800HART 1800HART is offline
 
Join Date: Apr 2008
Posts: 487
Default

I wanted to wait until I tried this in action, before responding .. because I see what you are doing and that makes sense!

But then - how come it's not working?

I've tested it on 3 sites ... here's 2 random products on one of the sites (shop=930)
http://hartmarket.com/store/recommen...3700344075034/
http://hartmarket.com/store/twitter/...5400970183651/

The code in Product Detail in the Product is now:

Quote:
<!-- Single Product -->
<div class="sp">
<div class="lc">
<div class="thmb">
<a href="[product.url direct='0']" title="[product.name]" target="_blank">
<img src="[product.image tag='0']" width="550" alt="[product.name]" />
</a>
</div>
</div>
<div class="rc">
<h2><a href="[product.url direct='0']" title="[product.name]" target="_blank">[product.name]</a></h2>
<p class="desc">[product.description]</p>
<div class="prc">[product.currency mode="sign"][product.price]</div>
<div class="btns">
<a href="[product.url]" class="dfbutton dfred dflarge dfrounded" title="Buy this product" target="_blank" rel="nofollow">Buy This Product</a>
</div>
</div>
__________________
| Shop @ HART Markets | Twitter |

Last edited by 1800HART : March 28th, 2012 at 05:35 PM.
  #4  
Old March 28th, 2012, 07:50 PM
Eric's Avatar
Eric Eric is offline
Datafeedr Team
 
Join Date: Feb 2008
Posts: 16,902
Default

Hi

Because the CSS is overriding it.

Now that I know the URL to the page in question, I can tell you that you need to add the following CSS to your Custom CSS to get the desired effect.

Code:
#view .sp .lc {
	width: 560px;
}

#view .sp .rc {
	margin-left: 560px;
}

#view .sp .lc .thmb img {
	max-width: 550px;
}
But I don't think it will give you the effect you want. It really breaks the page but the image is now 550px wide.

Eric
  #5  
Old March 28th, 2012, 08:50 PM
1800HART 1800HART is offline
 
Join Date: Apr 2008
Posts: 487
Default

Hi Eric!

I've added your code below to the custom CSS and it is overriding the template and giving me the 550px image size that I want, but also the effect you suspect
http://hartmarket.com/store/online-s...7700000390351/

It's aligning the description to the right of this image, instead of below. I've tried playing with and moving around the DIV /DIV sections but it seemed to make it worse for me, and actually overlaying or rather underlaying the sidebar and/or including itself in the 'social' fb/g+/tweet blockquotes.

Can you do your magic and figure a way to map out the [product.description] section ??

Quote:
<!-- Single Product -->
<div class="sp">
<div class="lc">
<div class="thmb">
<a href="[product.url direct='0']" title="[product.name]" target="_blank">
[product.image tag='1']
</a>
</div>
</div>
<div class="rc">
<h2><a href="[product.url direct='0']" title="[product.name]" target="_blank">[product.name]</a></h2>
<p class="desc">[product.description]</p>
<div class="prc">[product.currency mode="sign"][product.price]</div>
<div class="btns">
<a href="[product.url]" class="dfbutton dfred dflarge dfrounded" title="Buy this product" target="_blank" rel="nofollow">Buy This Product</a>
</div>
</div>
<br/><br/><br/>
<blockquote>etc</blockquote>

<div class="clearingdiv"> </div>
</div>
<!-- /Single Product -->

Quote:
Originally Posted by Eric View Post
Hi

Because the CSS is overriding it.

Now that I know the URL to the page in question, I can tell you that you need to add the following CSS to your Custom CSS to get the desired effect.

Code:
#view .sp .lc {
	width: 560px;
}

#view .sp .rc {
	margin-left: 560px;
}

#view .sp .lc .thmb img {
	max-width: 550px;
}
But I don't think it will give you the effect you want. It really breaks the page but the image is now 550px wide.

Eric
__________________
| Shop @ HART Markets | Twitter |
  #6  
Old March 28th, 2012, 09:26 PM
Eric's Avatar
Eric Eric is offline
Datafeedr Team
 
Join Date: Feb 2008
Posts: 16,902
Default

Hi

What do you want it to look like?

Eric
  #7  
Old March 29th, 2012, 01:02 AM
1800HART 1800HART is offline
 
Join Date: Apr 2008
Posts: 487
Default

Quote:
Originally Posted by Eric View Post
Hi

What do you want it to look like?

Eric
Actually ... now that you ask! something like the video posts inside the blog
eg. random http://hartmarket.com/wake-up-inspir...r-neil-ducoff/

Code:
===THIS PART======
<h2> title of product
left aligned thumbnail (clickable to vendor)
> if excerpt, then right aligned to thumbnail (or some way to share URL of product FB,G+,RT,etc)
Full image width 550px no alignment (clickable to vendor)
Full Description, Left justified html if available
that BUY THIS PRODUCT button I have 
===END of THIS PART====
== CAN DO REST MYSELF :D==
(a few blank lines) 
then my <blockquote> like this page codes
my disqus comments
related products
rotating ads.
monetization, etc
=======
__________________
| Shop @ HART Markets | Twitter |
  #8  
Old March 29th, 2012, 08:00 AM
Eric's Avatar
Eric Eric is offline
Datafeedr Team
 
Join Date: Feb 2008
Posts: 16,902
Default

Hi

Change the following...

This:
HTML Code:
<div class="lc">
To this:
HTML Code:
<div class="lc-dep">
This:
HTML Code:
<div class="rc">
To this:
HTML Code:
<div class="rc-dep">
Eric
  #9  
Old March 29th, 2012, 01:40 PM
1800HART 1800HART is offline
 
Join Date: Apr 2008
Posts: 487
Default

Thanks Eric!

That was a pretty smart solution, making it available for everybody in the factory I just tossed the H2 code above the image and H3 code below it, and the description (it is what it is) works great!

I moved the price and Buy This Product button up below the image, above the description. You may want to note (or, adjust lc-dep class?) that when I moved the button, it automatically was centered. When I moved the product price, it wasn't and I had to add the center /center html tags to center it. I'm not sure if there was an easier way for that, or using the font size= tag as well

Here's how all this looks now (although I guess ditto with above links in this thread)
http://hartmarket.com/store/recommen...5300125273095/
__________________
| Shop @ HART Markets | Twitter |
 


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Product images (on category/store front view) won't change size webnamescouk Problems 6 January 3rd, 2012 09:57 AM
How to change image size? annaly85 Questions 5 March 29th, 2011 12:46 PM


All times are GMT -5. The time now is 12:55 PM.


Powered by vBulletin® Version 3.6.8
Copyright ©2000 - 2021, Jelsoft Enterprises Ltd.