I have created a website for a car sales company and used Custom Fields. I have set a main (required) image and also another 9 for additional images.
This all works fine except that when all aren't used, it takes images from the next vehicle listing.
What I want it to do is to only show images based on each specific listing by using another custom field called 'ref' as these are different for each vehicle. (e.g., HLM001, HLM002)
The code for each image is:
<div class="col-md-4">
<?php $image = get_field('vehicle_image2'); if( !empty($image) ): ?>
<a href="<?php echo $image['url']; ?>" rel="lightbox"</a><img class="img-responsive thumbs" src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
<?php endif; ?>
</div>
This can be seen at http://hleemotors.co.uk/vans/ when clicking 'View more details'.
I'm ok with PHP but this has really stumped me. Any help would be great.
Related
I have a product overview page with 1 image per product:
https://axces.be/nl/product/
You can add multiple images to a products. All these images are shown on the detail page. But on the product page, you only see the first image.
My template looks like this:
<a href="<?php the_permalink(); ?>" class="single-prod">
<div class="single-prod__image">
<?php
$productImages = get_field('product_images');
?>
<img src="<?php echo $productImages[0]['product_image']?>" />
</div>
</a>
But now the images are served on the size they are uploaded. This causes a slower load time. So I want to serve smaller images.
I've tried to add the image size thumbnail to it, in order to see if the load time is better. But that doesn't work:
<a href="<?php the_permalink(); ?>" class="single-prod">
<div class="single-prod__image">
<?php
$image_size = 'thumbnail';
$productImages = get_field('product_images');
?>
<img src="<?php echo $productImages[0]['product_image']['sizes'][$image_size]; ?>" />
</div>
<div class="single-prod__information">
<span class="single-prod__name">
<?php the_title(); ?>
</span>
<span class="single-prod__short">
<?php the_field('product_short'); ?>
</span>
</div>
</a>
So eventually, I want to achieve that the images are smaller. Not necessary the to see the thumbnail because that's probably going to crop the image.
Thanks in advance.
I am trying to build a simple gallery with WordPress Advanced Custom Fields and the repeater field plugin. I need to display a thumbnail image which you click to enlarge the main image (I am using Fancybox). Does anyone know whether it is possible to get the link to the image thumbnail WordPress automatically generates?
I can get the main image link:
/wp-content/uploads/2014/12/slide1.jpg
But need to get this image link:
/wp-content/uploads/2014/12/slide1-150x150.jpg
Here is my code:
<?php if(get_field('gallery')): ?>
<ul>
<?php while(has_sub_field('gallery')): ?>
<a class="fancybox" href="<?php the_sub_field('image'); ?>" data-fancybox-group="gallery" title="Lorem ipsum dolor sit amet"><img src="<?php the_sub_field('image'); ?>" alt="" width="200px;" height="auto"/></a>
<?php endwhile; ?>
<?php while(has_sub_field('video_link')): ?>
<a class="fancybox-media" href="<?php the_sub_field('video_link_snippet'); ?>"><img src="<?php the_sub_field('video_image'); ?>"/></a>
<?php endwhile; ?>
</ul>
<?php endif; ?>
You can absolutely do this with Advanced Custom Fields and Wordpress. To do so, go into the custom fields and change the sub field 'image' so that it returns the Image Object instead of the Image URL. See 'return value' here.
Once this field returns the object, try var_dumping the field to see your URL options:
var_dump(the_sub_field('image'));
This should show you the different thumbnail sizes enabled in your system and allow you to easily get the thumbnail you'd like. One possible example:
// Get image object with all sizes...
$image = the_sub_field('image');
$size = 'thumbnail';
// Get URL from sizes based on our $size var
$url = $image['sizes'][$size];
// Now we have the thumbnail URL
echo $url;
Let me know if you run into problems! For more documentation and many more options, try the Advanced Custom Fields documentation for the Image field.
I have a series of images displayed on a page. They are being called from a mysql database. This part works fine. I then implemented a hover image with description using the following code:
...echo "<td>";?> <img src="<?php echo $row['image']; ?>" rel="imgtip[0]" height="100" width="125" title="<?php echo $row['title_tag']; ?>" /><?php echo "</td>";...
The rel="imgtip[0]" is the part that calls the hover image and description. This will only call the first image identified as '0'. I want it to change to rel="imgtip[1]", rel="imtip[2]" etc. so each hover image will relate to the one being called from the database.
I added a new field to the mysql database and added each rel as a new record. I then changed the php code to call the rel attribute from the database as follows:
...echo "<td>";?> <img src="<?php echo $row['image']; ?>" height="100" width="125" title="<?php echo $row['title_tag']; ?>" rel="<?php echo $row['img_tip'] ?>" /><?php echo "</td>";...
This time when I viewed the page no hover image appeared. Is there some way to call the rel attribute from the database so it will display the required hover images?
From your comment, it looks like the MySQL field img_tip contains the definition for rel= already. If that's the case, update your code as follows:
<img src="<?php echo $row['image']; ?>" height="100" width="125" title="<?php echo $row['title_tag']; ?>" <?php echo $row['img_tip'] ?> />
I have a Wordpress managed web site at http://www.urbanvision.org.uk/ I have built it and everything works like I want it to and I'm happy with the outcome as it is my first fully built Wordpress web site.
I've become stuck on a request I had at the start of the week.
We have a Properties for Sale page (http://www.urbanvision.org.uk/services/property-services/properties-for-sale/) the items on this page link to PDF downloads of plans and property details. However we now have a number of properties that need to be added that link not the PDF but to an external link.
The problem I have is the page template relies on custom fields managed by the plugin Advanced Custom Fields, the field to upload the PDF is a file upload field which will take a PDF but not an URL to another page or site.
I have tried to switch the custom field to an URL rather than an upload screen but not keen on this for 2 reasons, 1) i'd have go back through the other properties and copy the url into the changed field and 2) it becomes a little more difficult for colleagues to update.
I have also tried introducing a separate a field and working out which custom field should be pulled in:
If PDF file exists in property_details pull in the URL to PDF.
If URL exists in property_details_url pull in URL entered.
There are two parts of each post that need to link to further details (PDF or external URL). They are the thumbnail image and the view details link.
The code I had before (just linking to the PDF):
<?php
$featuredPosts = new WP_Query();
$featuredPosts->query('showposts=20&cat=13');
while ($featuredPosts->have_posts()) : $featuredPosts->the_post(); ?>
<div class="literaturedescription">
<a href="<?php the_field('property_details'); ?>" title="<?php the_field('property_title'); ?>">
<img src="<?php the_field('property_thumbnail'); ?>" width="220px" height="150px" alt="<?php the_field('property_title'); ?>" /></a>
<p><strong><?php the_field('property_title'); ?></strong><br /><?php the_field('property_excerpt'); ?> <span style="color:red;font-weight:bold;"><?php the_field('property_status'); ?></span>
<br />> > View Details</p><br />
The Code I have changed it to (still can't get it to work):
<?php $featuredPosts = new WP_Query();
$featuredPosts->query('showposts=20&cat=12');
while ($featuredPosts->have_posts()) : $featuredPosts->the_post(); ?>
<div class="literaturedescription">
<a href="<?php the_field('property_details'); ?>" title="<?php the_field('property_title'); ?>">
<img src="<?php the_field('property_thumbnail'); ?>" width="220px" height="150px" alt="<?php the_field('property_title'); ?>" /></a>
<p><strong><?php the_field('property_title'); ?></strong><br /><?php the_field('property_excerpt'); ?> <span style="color:red;font-weight:bold;"><?php the_field('property_status'); ?></span>
<?php if(get_field('property_details_url')){ ?>
<br />> > View Details</p><br />
<?php } else { ?>
<br />> > View Details</p><br />
<?php } ?>
I also had a look at pulling directly from the MySQL database that Wordpress is using but really struggled to get the page to display without error.
As always, any help would be greatly appreciated.
your on the right track, but what to do is assign your customfield to a variable.
ie:
<?php
$prop_det_url = get_field('property_details_url');
if($prop_det_url!=''){ ?>
<br />> > View Details</p><br />
<?php } else { ?>
<br />> > View Details</p><br />
<?php } ?>
hopefully the check should fine that the property_details_url has somthing other than nothing, it will show the link, if not it will show the other piece of code?
Marty
I'm using Drupal 6.x. This is my code on my node-product.tpl.php template. I've created a custom jquery gallery for the products. It works great, but I'm just missing tool tips from my images (both large and small thumbnails). To upload images I'm using a CCK field named field_images. There I input the image titles when I upload the images. How can I add the tool tip code snippet to make it work?
<div class="product-large">
<img src="/sites/default/files/imagecache/360x280/<?php print $node->field_images[0]['filename']; ?>" />
</div>
<div class="product-small">
<?php
// get all images
foreach ($node->field_images as $images) {
?>
<img src="/sites/default/files/imagecache/120x90/<?php print $images['filename']; ?>" rel="/sites/default/files/imagecache/360x280/<?php print $images['filename']; ?>" />
<?php
}
?>
</div>
Thanks much appreciated!
Chris
The "tooltip" is a result of the title HTML attribute. You'll want to add title="foo" to your img tag.
Perhaps:
<img src="/sites/default/files/imagecache/120x90/<?php print $images['filename']; ?>" rel="/sites/default/files/imagecache/360x280/<?php print $images['data']['filename']; ?>" title="<?php print $images['title']; ?>"/> for the second image and similarly $node->field_images[0]['data']['title'] for the first.