I'm hoping one of you lovely people can help me with this. I'm trying to develop a mobile version of a friends website for her using WPTouch and I'm having a bit of an issue with the coding.
Her site has a custom field to display a portfolio image for each post. The field is called 'Portfolio Fullsize Image' within the admin panel for WordPress and as far as I can gather in the coding it is '$portfolio_full'.
I have been looking at the coding to try and get the WPTouch theme to display the image at a scaled rate appropriate to the mobile browser.
Within the index.php file we have this:
PHP Code:
<?php if ( wptouch_theme_use_calendar_icons() || wptouch_theme_use_thumbnail_icons() ) { ?>
This then relates to the thumbnails.php file which is currently set with this code:
PHP Code:
<div class="thumbnail-wrap">
<?php if ( has_post_thumbnail() ) { ?>
<img src="<?php wptouch_the_post_thumbnail(); ?>" class="attachment-post-thumbnail" alt="post-thumbnail" />
<?php ** else { ?>
<img src="<?php echo wptouch_bloginfo( 'template_directory' ); ?>/images/default-thumbnail.png" class="attachment-post-thumbnail default-thumbnail" alt="post-thumbnail" />
<?php ** ?>
</div>
I have then looked at the code for the original theme she is using for WordPress which shows this code to display the images (I think):
PHP Code:
<?php
$portfolio_full = get_post_meta($post->ID, 'portfolio_full_img', true);
$post_image = get_post_meta($post->ID, 'post_image', true);
$disable_post_image = get_post_meta($post->ID, 'disable_post_image', true);
?>
I've then changed the thumbnail.php file to use this code:
PHP Code:
<div class="thumbnail-wrap">
<?php if ( has_post_thumbnail() ) { ?>
<img src="<?php wptouch_the_post_thumbnail(); ?>" class="attachment-post-thumbnail" alt="post-thumbnail" />
<?php ** else { ?>
<img src="<?php $portfolio_full = get_post_meta($post->ID, 'portfolio_full_img', true); $post_image = get_post_meta($post->ID, 'post_image', true); $disable_post_image = get_post_meta($post->ID, 'disable_post_image', true); ?>" class="attachment-post-thumbnail default-thumbnail" alt="post-thumbnail" />
<?php ** ?>
</div>
Here is the code from the CSS file that relates to the thumbnails:
PHP Code:
.post .thumbnail-wrap {
position: relative;
float: left;
display: block;
height: 46px;
width: 46px;
margin-right: 8px;
**
.idevice .post .thumbnail-wrap {
-webkit-box-reflect: below 1px
-webkit-gradient(linear, left top, left bottom,
from(transparent), color-stop(0.8, transparent), to(white));
**
.post img.attachment-post-thumbnail {
width: 46px;
height: 46px;
**
.idevice .post img.attachment-post-thumbnail {
-webkit-mask-box-image: url(images/thumb-corners-mask.png);
**
It is however not displaying the image.
I was hoping some people who are good with WordPress could take a look and tell me what they think.
Any help would be very much appreciated.
EDIT: Please excuse the ** symbols, it is replacing parts of my code with this for some reason.