I'm creating a website with a carousel. To load images, I'm using Advanced Custom Fields on Wordpress.
Here is my code :
<?php $images = get_field('slides', $post->ID);
// clean_print_r($images);
if (!empty($images)) :
?>
<div class="wide-container">
<div id="slides">
<ul class="slides-container">
<?php for($i = 0; $i < count($images); $i++): ?>
<!-- slides -->
<li>
<img src="<?php echo $images[$i]['img_slide']['sizes']['large'] ?>" alt="" />
</li>
<?php endfor; ?>
</ul>
</div>
</div>
<?php endif; ?>
I can load images, but they are sized at 1024px wide:
<img src="http://example.com/wp-content/uploads/2013/09/bg_header03-1024x341.jpg" ... />
Is there any way to get full sized images? I've tried to replace :
['img_slide']['sizes']['large']
with
['img_slide']['sizes']['full']
But that doesn't work, and no images are loaded.
In ACF I call image attachment by ID, and it's a repeater field.
Im not sure how do it with return IDs but if you return URL instead you get the full image.
Edit:
Ok I did some test with the Image ID instead, looks like you've confused your array handling somehow. This works for a single image: Should be easy to adapt to your repeater though.
$attachment_id = get_field('slide');
$size = "full";
$image = wp_get_attachment_image_src( $attachment_id, $size );
echo '<img src="' . $image[0] . '">';
//OR
$image = wp_get_attachment_image( $attachment_id, $size );
echo $image[0];
My previous answer was about return: image ID, as specified by the thread starter but now i realize that he was actually talking about return: object.
/*
* Return value = Object
* requires ACF 3.3.7+
*/
$image = get_field('image');
var_dump($image);
/*
Data returned will look like this:
Array
(
[id] => 540
[alt] => A Movie
[title] => Movie Poster: UP
[caption] => sweet image
[description] => a man and a baloon
[url] => http://localhost:8888/acf/wp-content/uploads/2012/05/up.jpg
[sizes] => Array
(
[thumbnail] => http://localhost:8888/acf/wp-content/uploads/2012/05/up-150x150.jpg
[medium] => http://localhost:8888/acf/wp-content/uploads/2012/05/up-300x119.jpg
[large] => http://localhost:8888/acf/wp-content/uploads/2012/05/up.jpg
[post-thumbnail] => http://localhost:8888/acf/wp-content/uploads/2012/05/up.jpg
[large-feature] => http://localhost:8888/acf/wp-content/uploads/2012/05/up.jpg
[small-feature] => http://localhost:8888/acf/wp-content/uploads/2012/05/up-500x199.jpg
)
)
*/
source: http://www.advancedcustomfields.com/resources/field-types/image/
So apparently the original image is not a size but the URL, therefore change:
['img_slide']['sizes']['large']
to
['img_slide']['url']
and you should be fine
Related
Dear PHP / Wordpress / Dev Experts,
Ive build a plugin, with a custom post type and some advanced custom fields. The main goal is to list the members in my band, with pictures and name.
You can see it here: http://www.lucky13.nl/test/
I've managed to get everything working to my taste, however.. I have 5 bandmembers in my band which i've added, but i'm only seeing 4. Where is the 5th entry / post? I find that the first added bandmember is not displaying.
I assume this has to do with the loop, and the array not listing all items? But i'll leave this to the experts.. I would appreciate any comments of help!
My code:
<?php
/*
Plugin Name: VrolijkWebdesign - Bandmembers
Description: For a bandwebsite to show bandmembers.
*/
/* Start Adding Functions Below this Line */
/* NAME FUNCTION */
function new_section_1(){
$bandmembers = new WP_Query(array(
'post_type' => 'bandmembers'
));
while($bandmembers->have_posts()) : $bandmembers->the_post();
if (has_post_thumbnail( $post->ID ) ):
$image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' ); ?>
<!-- START HTML -->
<div class="span2">
<figure class="snip1104">
<img src="<?php echo $image[0] ;?>" alt='sample33'/>
<figcaption>
<h5> <?php the_field('firstname'); ?> <span> <?php the_field('lastname'); ?>
</span></h5>
</figcaption>
</figure>
</div>
<!-- END HTML -->
<?php endif;
endwhile;
}
add_shortcode('band', 'new_section_1');
?>
$bandmembers = new WP_Query(array(
'post_type' => 'bandmembers',
'posts_per_page' => '5'
));
Try setting the posts_per_page argument. Since the default might be set to '4' by other filters.
If you want to get all posts in a single query use '-1' instead of '5'
You could also try the below for debugging purposes only:
-Try to set post_status to 'any' to make sure that post statuses are not a problem.
-Try var_dump($bandmembers) after doing the query to see the fetched posts before the loop starts.
I'm trying to display the post gallery manually, however images are resized to the default thumbnail size, which is way too small. I'm developing a theme which I'd like to sell in the future, so I would like to display the images from the gallery at a custom size, ignoring wordpress settings. How can I do that?
Here's my code:
if ( get_post_gallery() ) :
$gallery = get_post_gallery( get_the_ID(), false );
foreach( $gallery['src'] AS $src )
{
?>
<li data-thumb="<?php echo $src; ?>">
<img src="<?php echo $src; ?>" alt="Gallery image" />
</li>
<?php
}
endif;
I already specified my preffered size in my functions.php file like this: add_image_size( 'slider-size', 1200, 680 );.
So how can I display gallery images manually in a specific size?
You could use a filter to act on shortcode_atts_gallery before you call that gallery ...
add_filter('shortcode_atts_gallery','force_large_images',10,3);
function force_large_images($out, $pairs, $atts) {
$out['size'] = 'my_size'; // for example, "large"
return $out;
}
do not forget also to remove that filter if you do not want it any more ..
remove_filter('shortcode_atts_gallery','force_large_images',10,3);
another way would be to perform your own query ...
$args = array( 'post_mime_type' => 'image', 'post_type' => 'attachment', 'post_parent' => $post->ID, 'order' => 'ASC');
$attachments = get_children($args);
foreach( $attachments as $attachment) {
if ( !empty($attachment->guid ) ) {
$img_url = wp_get_attachment_image_src($attachment->ID, 'full'); //change *full* size with your custom size
// and then do something ..
}
I have a WordPress site that has a ton of posts on it, all categorized. I set up a new theme, with pagination (15 posts per page), so the user can cycle through each page. Some of the categories paginate fine. Others are missing the final page.
So, if a category has 66 posts ... the first 4 pages show 15 different posts. However, when I click to view page 5, the page says "no posts found". Where did the last 6 posts go? They still show up in my administration (as published and visible). However, other category pages do not have this issue - for example, I have a category with 42 post, and it has 3 page ... the last page of which has 12 of the final post.
So, the pagination seems to be working fine (since it clearly shows the correct number of pages, for the number of posts). Please take a look below at the code I have... this is code from my templated index.php page (I didnt set up a category.php page, because it lists very similarly to the homepage).
<?php
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1; // Page
$args = "posts_per_page=15&paged=".$paged; // Base query
$category = get_queried_object(); // Get Cat info
$thisCat = $category->term_id; // Get Cat ID (if exists)
$tagID = get_queried_object()->term_id; // Get Tag ID (if exists)
echo '<!-- paged: '.$paged.'-->';
echo '<!-- catID: '.$thisCat.'-->';
echo '<!-- tagID: '.$tagID.'-->';
if (is_home() || is_front_page()) { // HOMEPAGE
query_posts($args.'&orderby=rand');
echo '<!-- args: '.$args.'&orderby=rand'.'-->';
} elseif ( is_search() ) { // SEARCH RESULTS ?>
<?php
$search_query = get_search_query();
query_posts($args.'&s='.$search_query);
echo "<!-- args: ".$args.'&s='.$search_query."-->"; ?>
<h1>Search</h1>
<div class="content_labels">
<div class="content_label">SEARCH RESULTS FOR: <?php echo $s; ?></div>
</div>
<div class="clear" style="margin:0 0 10px 0;"></div>
<div class="previouspage">
<< Previous Page
</div><?php
} elseif( is_category() ) { // CATEGORY
query_posts($args.'&cat='.$thisCat);
echo '<!-- args: '.$args.'&cat='.$thisCat.'-->'; ?>
<div class="content_labels">
<div class="content_label">Category:</div>
</div>
<h1><?php single_cat_title( '', true ); ?></h1>
<div class="clear" style="margin:0 0 10px 0;"></div>
<div class="previouspage">
<< Previous Page
</div><?php
} elseif( is_tag()) { // TAGS
echo '<!-- args: '.$args.'&tag_id='.$tagID.'-->';
query_posts($args.'&tag_id='.$tagID); ?>
<div class="content_labels">
<div class="content_label">Tag:</div>
</div>
<h1><?php single_tag_title(); ?> </h1>
<div class="clear" style="margin:0 0 10px 0;"></div>
<div class="previouspage">
Previous Page
</div><?php
}
if ( have_posts() ) :
$i=1;
while ( have_posts() ) : the_post(); ?>
// PAGE CODE GOES HERE
endwhile; ?>
<?php base_pagination(); // PAGINATION CODE ?>
<?php endif; ?>
Here is the pagination code, from my functions.php ... I don't think this is the issue...
function base_pagination() {
global $wp_query;
$big = 999999999; // This needs to be an unlikely integer
// For more options and info view the docs for paginate_links()
// http://codex.wordpress.org/Function_Reference/paginate_links
$paginate_links = paginate_links( array(
'base' => str_replace( $big, '%#%', get_pagenum_link($big) ),
'current' => max( 1, get_query_var('paged') ),
'total' => $wp_query->max_num_pages,
'mid_size' => 5
) );
// Display the pagination if more than one page is found
if ( $paginate_links ) {
echo '<div class="pagination">';
echo $paginate_links;
echo '</div><!--// end .pagination -->';
}
}
Can anyone see what is going wrong? I've been playing with this for several hours, and I can't seem to find a solution...
So, I did some digging, and tried some things... I couldn't find anything wrong with the code above. The query was correct (showing 15 per page, for each category archive page, etc.), and the pagination was working ... In the end, the default POSTS PER PAGE was conflicting with my own posts_per_page=15 query. Not sure WHERE this conflict was occurring (that is beyond my skills) - but I did learn how to stop it.
Under SETTINGS - READING ...
I just changed the "Blog pages show at most" to "15"
This wasn't an ideal fix (since I don't know where this problem started, and I can't adjust custom "posts_per_page" if it differs from 15)... but my site now works how I want.
i am using dynamic featured image and adding multiple product images to a single custom post type name as products for a single product but and i am trying to get those images in my template but the array only return me only two sizes [thumb] [full] but i need medium as well below is my code
<?php
if( class_exists('Dynamic_Featured_Image') ) {
global $dynamic_featured_image;
$featured_images = $dynamic_featured_image->get_featured_images();
foreach($featured_images as $featured_image) {
?>
<img width="60" src="<?php echo $featured_image['full'];?>"/>
<?php }
}
?>
As you guys can see in the anchor tag $featured_image['medium'] this is how i want to echo this anchor tag but unfortunately it don't return me the medium size and i need help in getting the medium size as well. below is the array that i get where you can clearly see only [thumb] and [full]. please help
Array
(
[thumb] => http://www.example.com/wp-content/uploads/2014/07/product-1-120x90.jpg
[full] => http://www.example.com/wp-content/uploads/2014/07/product-1.jpg
[attachment_id] => 254
)
You need to get medium sized image by calling get_image_url function. Try this:
<?php
if( class_exists('Dynamic_Featured_Image') ) {
global $dynamic_featured_image;
$featured_images = $dynamic_featured_image->get_featured_images();
foreach($featured_images as $featured_image) {
$mediumSizedImage = $dynamic_featured_image->get_image_url($featured_image['attachment_id'], 'medium');
echo "<img src = '" . $mediumSizedImage . "' />";
?>
<img width="60" src="<?php echo $featured_image['full'];?>"/>
<?php }
}
?>
All available functions are documented here.
PS: I am author of the plugin.
Trying to do a few things in my new Wordpress Youtube niche theme. I have a tab in my theme for the user to input the Youtube watch?v=xxxxxxxxxxx id. When they enter the xxxxxxxxxxx url it outputs the video, showing 16 posts per tab via the 'loop' query.
Working example here
I have looked into this Google developer console api thing... and it is complete gibberish to me. I'm using custom post types for the 4 categories youll see on my site. only "Comedy" is populated right now.
NEW EDIT: THIS WORKS. Thank you all who have helped me figure this out!
<?php
$new_query = new WP_Query();
$new_query->query( array('post_type' => array( 'comedy' ), 'orderby' => 'title', 'order' => 'asc','showposts' => 16, 'paged'=>$paged ));
while ($new_query->have_posts()) : $new_query->the_post();
$url = get_post_meta ($post->ID, 'comedy_url', $single = true);
include(TEMPLATEPATH . '/library/variables.php');
$code = 'http://www.youtube.com/watch?v=' . $url;
$json = file_get_contents('http://www.youtube.com/oembed?url='.urlencode($code));
$video = json_decode($json);
?>
<img src="<?php echo $video->thumbnail_url ?>" />
Upon pulling the thumbnail some of you may notice BLACK BORDERS on the top and bottom of your thumbnail. To fix this use the code below:
<a href="<? if($code) {?><?php echo $code; ?><? } ?>">
<div class="yt-thumbnail" style="background:url('<?php echo $video->thumbnail_url ?>') center no-repeat;"></div>
</a>
// in your css file
.yt-thumbnail{
height: 164px;
width: 300px;
background-size: 300px 220px;
}
You can use the oEmbed API to get thumbnail, uploader name and title. All you need is to encode the URL of the video, for example:
http://www.youtube.com/oembed?url=http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3D9FOWI6Zftpg
This will return a JSON response:
{
"provider_name":"YouTube",
"version":"1.0",
"author_url":"http:\/\/www.youtube.com\/user\/NScherzingerVEVO",
"type":"video",
"author_name":"NScherzingerVEVO",
"thumbnail_url":"http:\/\/i1.ytimg.com\/vi\/9FOWI6Zftpg\/hqdefault.jpg",
"provider_url":"http:\/\/www.youtube.com\/",
"title":"Nicole Scherzinger - Your Love",
"height":270,
"width":480,
"thumbnail_height":360,
"html":"\u003ciframe width=\"480\" height=\"270\" src=\"http:\/\/www.youtube.com\/embed\/9FOWI6Zftpg?feature=oembed\" frameborder=\"0\" allowfullscreen\u003e\u003c\/iframe\u003e",
"thumbnail_width":480
}
Getting the view count is a bit more difficult, see the answers here for details.
Edit:
Here is an example how to get the thumbnail in PHP:
<?php
$url = 'http://www.youtube.com/watch?v=9FOWI6Zftpg';
$json = file_get_contents('http://www.youtube.com/oembed?url='.urlencode($url));
$video = json_decode($json);
?>
<img src="<?php echo $video->thumbnail_url ?>" />