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.
Related
I have a site in WordPress, and I want to display the WordPress post first image which is displayed in the post but remember not the featured images. so how to show it in the post and i want my post like below
this is how blog design should be
This is the code
<div class="col-md-3 small-post-img">
<a href="<?php the_permalink() ?>">
<?php the_post_thumbnail(); ?>
</a>
</div>
It not taking the the_post_thumbnail code because there is no any featured image in the post, but I have added the images in the inside post content. I want that post images as featured image.
Put this in your theme's functions.php file
function ash_post_first_img($post_content){
preg_match_all('/<img[^>]+>/i', $post_content, $content_all_images);
preg_match_all('/src="([^"]+)"/i', $content_all_images[0][0], $content_image);
if (isset($content_image[1][0])) {
return $content_image[1][0];
} else{
return 'http://example.com/defaultimage.jpg';
}
}
and use this function ash_post_first_img(get_the_content('')); where you want to display image's url "single.php or post.php"
<div class="col-md-3 small-post-img">
<a href="<?php the_permalink() ?>">
<img src="<?php echo ash_post_first_img(get_the_content('')); ?>">
</a>
</div>
Change "http://example.com/defaultimage.jpg" to the default image url if no image is found.
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.
I'm trying to create a simple image gallery that displays thumbnails of uploaded images. Once a thumbnail is clicked, I would like to be directed to a page with the large version of the image, along with a comment section. So basically I'm trying to do something similar to deviantart. What I have now looks something like this:
<a href="<?php echo $image->large_image_path; ?>">
<img src="<?php echo $image->thumbnail_image_path; ?>"></a>
Clicking on a thumbnail will take to me to the large image path, which is not really what I want. Any help is greatly appreciated.
You must make the href="<?php echo $image->large_image_path; ?>" to somehing like href="show_image.php?image_path=<?php echo $image->large_image_path; ?>"
In show_image.php you can den get the path of the image by $_REQUEST['image_path'], and add it into the code like this:
<img src="<?php echo $_REQUEST['image_path']; ?> />
The you can add information or styling around the bigger image.
So, link to a PHP page instead of the image. Even better, put the image path in to a database, and use the image id to get the path and information of the image. Like this:
href="show_image.php?image_id=<?php echo $image->id; ?>"> and then in show_image.php, given that you have a method for getting the image:
<?php $image = GetImage($_REQUEST['image_id']); ?>
<img src="<?php echo $image->large_image_path; ?> />
<?php echo $image->description; ?>
<?php echo $image->date; ?>
Hope this helps you on the way.
I'm building a website for a good friend of mine and i'm stuck on this one.
I want an adaptable background image on the homepage so he can customize it on the customize page in the wordpress admin page.
My code now looks like this:
get_header(); ?>
<div id="slides">
<div class="slides-container">
<img src="<?php bloginfo('template_directory'); ?>/images/Home.jpg" alt="Cinelli">
</div>
<nav class="slides-navigation">
<img src="<?php bloginfo('template_directory'); ?>/images/right.png" alt="left">
<img src="<?php bloginfo('template_directory'); ?>/images/left.png"alt="right">
</nav>
</div>
<div class="welcometext">
<h1><?php echo get_bloginfo( 'name' );?></h1>
<?php echo bloginfo('description');?>
</div>
<?php get_footer(); ?>
now the image tag needs to be adaptable.
Is this possible?
It may be easier to pull the image from a WordPress Page's Featured Image than to use the Customize page.
To enable Featured Images, add this line to your theme's functions.php file: add_theme_support( 'post-thumbnails' );
Now upload an image to the Featured Image area of a WordPress page. This can be any page, you just need to take note of the Page's ID. To get the Page ID, go to the edit screen for the Page and look at the URL in your browser. It will end with something like post.php?post=34&action=edit where the number after post= is the Page's ID, in this example it's 34.
Now modify your image code:
<?php $feat_image = wp_get_attachment_url( get_post_thumbnail_id(34, 'full') ); // replace '34' with your Page's ID ?>
<img src="<?php echo $feat_image; ?>" alt="Cinelli">
Replace 34 with your Page's ID. If you are using this code within the Loop, you can replace 34 with $post->ID.
The 'full' in the first line tells it which size of the image to use. 'Full' will use the original image you upload, or you can use 'large', 'medium', 'thumbnail', or any custom image size you've set up.
I am using a wordpress theme that has a custom post type called "link" which simply produces a post where the title links to an outside link you specify. It also includes some text in the body of the post. I would like to also be able to display an image. Right now it is not showing the image.
Here is the code:
elseif ( has_post_format( 'link' )) {
if(get_post_meta($post->ID, '_format_link_url', true)!=''){
$link = get_post_meta($post->ID, '_format_link_url', true);
}else{
$link = '';
}
?>
<h2 class="entry-title">
<a href="<?php echo $link; ?>" target="_blank" title="Follow this link">
<?php the_title(); ?>
</a>
</h2>
<p>
Is there anything I can add to make it display an image as well as text?
Thanks!
I can't see anywhere on this example where you are using an tag to insert an image. The img tag has two required attributes, src and alt. Src is the path to your image, whereas alt is the alternate text for the image. So:
<img src="images/myImage.png" alt="This Is My Image"/>
Hope that helps!