Hi David,
I am having some formatting issues when adapting the php templates in the Wordpress plugin, particularly with inconsistent image sizes.
It's the search results that seem to be affected, I can't adjust the size of them, yet the 3 featured products listed look fine and pick up the changes I have made, I can email you the links if that's easier, with the search code as I have amended it.
It is likely to be that I am unfamiliar with php coding, so I'm sure it's an easy fix,
Thanks in advance,
Steve
Hi David,thanks for this, tried that, unfortunately didn't improve anything, still getting mixed size images returned, Steve
Hi Chris,
Could you check the the image HTML derived from the Search Results / Each template (wp-admin > Settings > PriceTapestry.org) specifies the pto_search_image class, e.g.
<img class='pto_search_image' src='%IMAGE_URL%' />Also double check that the page is not being cached with out changes applied / ensure that CSS is reloaded - CTRL+F5 normally does the trick...
Cheers,
David.
--
PriceTapestry.com
Hi David,
Tried that, still no change - when I add in a width & height of say 250 and 250, the height of the image changes, but not the width?
Thanks
Steve
Hi Steve,
Another possible solution to overcome inherited styling would be to put the image inside a containing div, size the div and then set image to max-width / max-height of 100% (it's best not to fix both dimensions as this would normally result in distortion unless all images are square...)
To do this, in the Search Results / Each template, use:
<div class='pto_search_image'><img src='%IMAGE_URL%' /></div>And then in the plugin file resources/pto.css, in place of the existing definition of .pto_search_image use:
.pto_search_image {
display: inline-block;
width: 250px;
height: 250px;
}
.pto_search_image img {
max-width: 100%;
max-height: 100%;
}Hope this helps!
Cheers,
David.
--
PriceTapestry.com
Thanks David - is this the code I replace in the Search template:
<td>
%IF_IMAGE%<img class='pto_search_image' <img src='%IMAGE_URL%' />%ENDIF_IMAGE%
</td>Hi Steve,
That's correct - REPLACE with:
<td>
%IF_IMAGE%<div class='pto_search_image'><img src='%IMAGE_URL%' /></div>%ENDIF_IMAGE%
</td>Cheers,
David.
--
PriceTapestry.com
Hi David, it's the same code? Could you reconfirm what I replace with what? In the search template I currently have:
<td>
%IF_IMAGE%<img class='pto_search_image' <img src='%IMAGE_URL%' />%ENDIF_IMAGE%
</td>I replace this with...?
Thanks Steve
Hi Steve,
Replace with:
<td>
%IF_IMAGE%<div class='pto_search_image'><img src='%IMAGE_URL%' /></div>%ENDIF_IMAGE%
</td>(you seem to have ended up with two img tags! note above is an img tag within a div, the div gets styled as inline-block as required, and the img styled to fill the div...)
Cheers,
David.
--
PriceTapestry.com
Hi David, that has increased the image size, thanks, how do I place a gap between the image & text? The image is butted right up to the text, I tried style="PADDING-RIGHT=10px", but it didn't do anything, would like to have a gap top & bottom as well, sorry to ask you such basic stuff.....cheers, Steve
Hi Steve,
Try putting the top / right / bottom padding on the .pto_search_image containing div, e.g.
.pto_search_image {
display: inline-block;
width: 250px;
height: 250px;
padding: 10px 10px 10px 0;
}Hope this helps!
Cheers,
David.
--
PriceTapestry.com
Perfect, thank you so much, best regards, Steve
Hi Steve,
It sounds like styling from theme may be taking priority for search results image styling. The first thing to try would be !important flags in the plugin CSS file, so if you edit the plugin file resources/pto.css, where the version 2 distribution has, for example:
.pto_search_image {width: 100px;
vertical-align: text-top;
}
...you would use:
.pto_search_image {width: 100px !important;
vertical-align: text-top !important;
}
Hope this helps!
Cheers,
David.
--
PriceTapestry.com