Ok, so i have created a post slider that contains 10 posts.
I have a php code that generate the slider and make each of these posts to have a specific class (small, middle, large image)
Problem:
I can't retreive the post link so it can be clickable.
$post->post_title
How can i add the:
$post->post_title
The code looks like this:
if($index === 0){
$output .= "<div class=\"page page-one\">";
}
$itemClass = $index < 2 ? "item-size-medium" : "item-size-small";
$img = get_the_post_thumbnail_url($post, 'large');
$output .= <<<HTML
<div class="item $itemClass">
<div class="item-img">
<img src="$img">
</div>
<div class="item-title">
<h1>
$post->post_title
</h1>
</div>
</div>
HTML;
if(($index !== 0 && ($index%5) === 0) || 1 == 2){
$output .= "</div>";
}
What's up Dragos. Assuming you're inside a loop (you referenced $post), you can use permalink or likely it'll be within the $post object if looping over a WP_Query. Reference
Related
I got this Wordpress site with a slideshow where I get the images from advanced custom fields repeater, but the source keeps on getting undefined. It's a taxonomy page and I use this following code:
<section class="slider">
<?php
$queried_object = get_queried_object();
$taxonomy = $queried_object->taxonomy;
$term_id = $queried_object->term_id;
$slider_images = array();
while (has_sub_field('slider_bilder')):
$image_src = the_sub_field('slider_bild', $taxonomy . '_' . $term_id);
$slider_images [] = $image_src;
endwhile;
// As slider images starts with the last image so we will reverse the images in the array so ordering the images in the admin section could be easier
$rv_slider_images = array_reverse($slider_images);
foreach ($rv_slider_images as $slider_image) {
?>
<img src='<?php echo $slider_image; ?>' alt='' />
<?php
}
?>
</section>
The result I get is this:
<img src="undefined" alt="" style="opacity: 0.775823;">
I really can't get this one right.
My $taxonomy and $term_id generates the correct values and the code for the slideshow works fine on the other pages so for some reason I can't get the values from the ACF. Why and how can I fix this?
look documentation for acf repeater here and try replace the_sub_field('slider_bild', $taxonomy . '_' . $term_id); to this get_sub_field('slider_bild', $taxonomy . '_' . $term_id);
Is it possible to target the next section inside the loop? so that it will scroll down to the next section area.
Here is my code:
<section id ="<?php echo $postid; ?>" class="subpage-wrapper fullscreen background parallax" style="background-image: url('<?php echo $image[0]; ?>')" data-img-width="1400" data-img-height="717" data-diff="100" data-oriz-pos="100%">
<a href="#<?php echo $postid; ?>" class="btn-scroll" data-scroll></a>
</section>
Remember that this is inside the WP_Query Loop
Thanks!
I'm not keeping any selections within your displaying of posts in mind, but I figure you can get 'round by using get_next_post(). Something like:
global $post;
$post = get_post($post_id);
$next = get_next_post();
$next_id = $next->id;
What about using your own counter?
$nextAnchorId = 0;
while ( have_posts() ) { //the loop
$nextAnchorId++; //make this actually be a reference to the *next* post
the_post();
if ($nextAnchorId < $post_count) //don't link to the next post if it's the last one
{
echo "<a href='#post-$nextAnchorId'>next post</a>";
}
}
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.
I've got this working to pull recent Instagram posts into Wordpress, however the "recent" photos that are displayed aren't actually my most recent Instagram posts. When I refresh, the Instagram posts that are pulled in also change. I can only find a max/min time within the API docs. Is there any way to just get the last 3 Instagram posts made?
<?php
$json = file_get_contents('https://api.instagram.com/v1/users/user-id/media/recent/?access_token=key-number');
$a_json = json_decode($json, true);
foreach( $a_json['data'] as $key => $value) {
$a_images[$value['id']]['link'] = $value['link'];
$a_images[$value['id']]['url'] = $value['images']['standard_resolution']['url'];
$a_images[$value['id']]['caption'] = $value['caption']['text'];
}
shuffle($a_images);
echo '<ul>';
$i = 0;
foreach($a_images as $image) {
if ($i < 3) {
echo '<li class="large-4 columns">
<div class="front">
<a href="'.$image[link].'" target="_blank">
<img src="'.$image[url].'"/>
</a>
</div>
<div class="back">
<p>'.$image[caption].'</p>
</div>
</li>';
$i++;
}
}
echo '</ul>';
You are receiving the data in the right order, but then you are using the shuffle() function on the images array $a_images you created .
if you remove the shuffle($a_images); from your code it'll be just fine.
and replace $image[link], $image[url] and $image[caption] with
$image['link'], $image['url'] and $image['caption']
sorry for bad english
I'm busy trying to put together a 3x3 magazine-style layout for the home page of my blog.
I want the divs containing each post to flow vertically so there aren't big white spaces beneath each row of 3. It seems like the easiest way to do this would be to have three columns and fill each of these (which will stop there from being a big space beneath each post-block) and then place these three columns side-by-side.
The problem is that the Wordpress loop needs to pull posts sequentially. I don't know how to change the order of the Wordpress loop and, even though I've tried some PHP trickery using counts and for loops, I can't seem to get it to work.
Any thoughts or advice on a basic Wordpress loop or CSS way to make it work would be much appreciated as it's driving me crazy!
You can see how it is currently at http://www.unleashreality.com/
This looks like a job for jQuery Masonry.
Check it out at http://masonry.desandro.com/
The direct way using loop manipulation could be simpler assuming your layout is going to fixed one as shown in the mockup image.
<?php
$count = 0;
$column_1 = '';
$column_2 = '';
$column_3 = '';
$ad_block = '<div id="ad-block">Ad code here</div>';
while ( have_posts() ) : the_post();
$count++;
$content = '';
$content .= '<div class="post-block">';
$content .= '<h2>'.get_the_title().'</h2>';
$content .= '<div class="excerpt-block">'.get_the_excerpt().'</div>';
$content .= '<div class="continuebutton">...READ THIS ARTICLE</div>'; // Add appropriate code here..
if($count == 1 || $count == 4 || $count == 6) {
$column_1 .= $content;
} else if($count == 2 || $count == 7) {
$column_2 .= $content;
} else if($count == 3 || $count == 5 || $count == 8) {
$column_3 .= $content;
} else {
// Shouldn't come here...
}
// Insert the ad block in column 2 after adding 1st row
if($count == 2) {
$column_2 .= $ad_block;
}
endwhile;
?>
<div id="col1"><?php echo $column_1;?></div>
<div id="col2"><?php echo $column_2;?></div>
<div id="col3"><?php echo $column_3;?></div>
Adjust the code to work with inner pages.
If you want to do this without Javascript, you'll need to buffer the HTML for each column in your post loop and then output it in one shot once the loop is finished.
Something like the following:
<?php
// Hold the buffered column output
$cols = array("", "", "");
// Keep track of column we're appending to
$currentCol = 0;
// Get the posts
$posts = get_posts();
foreach($posts as $post){
// Run the WP post filters
setup_postdata($post);
// Append the content to the current column
$cols[$currentCol] .= '<div class="item">';
$cols[$currentCol] .= get_the_title();
$cols[$currentCol] .= get_the_content();
$cols[$currentCol] .= '</div>';
// Increment the current column and make sure we haven't
// gone over our total columns
if(++$currentCol >= count($cols)){
$currentCol= 0;
}
}
?>
<div id="col1"><?php echo $cols[0]; ?></div>
<div id="col2"><?php echo $cols[1]; ?></div>
<div id="col3"><?php echo $cols[2]; ?></div>