Datafeedr Support Forums

Datafeedr Support Forums (/index.php)
-   Questions (/forumdisplay.php?f=67)
-   -   How to change Image Size on Product Detail View (/showthread.php?t=6600)

1800HART March 27th, 2012 03:25 AM

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?

Eric March 27th, 2012 08:57 AM

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

1800HART March 28th, 2012 05:34 PM

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>

Eric March 28th, 2012 07:50 PM

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

1800HART March 28th, 2012 08:50 PM

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 (Post 30343)
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


Eric March 28th, 2012 09:26 PM

Hi

What do you want it to look like?

Eric

1800HART March 29th, 2012 01:02 AM

Quote:

Originally Posted by Eric (Post 30345)
Hi

What do you want it to look like?

Eric

Actually ... now that you ask! :D 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
=======


Eric March 29th, 2012 08:00 AM

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

1800HART March 29th, 2012 01:40 PM

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 :D

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


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.