Slider with ACF field-type 'Image' - wordpress

For a portfolio page, I have created a custom post type for each reference called “referenzen”. Since I need more than one image per reference (displayed in different ways), I have created some custom post types.
Now, on the front page, I want to display the newest references in a slider (kind of this type, exmple 4: http://www.wpcue.com/wordpress-plugins/advanced-post-slider/template-one/).
I tried to use some plugins, but there just created for regular post thumbs.
For now, I’m having the following code to display the latest 3 references.
<section class="entry-content cf" itemprop="articleBody">
<?php query_posts( array (
'post_type' => 'referenzen',
'posts_per_page' => 4 // minus 1
)); while ( have_posts() ) : the_post(); ?>
<?php
$image = get_field('bg');
if( !empty($image) ): ?>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
<?php endif; ?>
<?php endwhile; wp_reset_query(); ?>
Now I need to bring this into some slider/carousel…
Any help is much appreciated

If you need to show posts in the form of slider/carousel, please follow below steps
1. Please download bxslider.js & include it in header.php of your theme file like below -
<script src="your-theme-directory-path/js/jquery.bxslider.min.js"></script>
Make sure that field you have created to upload image is of image type with "Image Object" option.
Correct Your code as below -
'referenzen',
'posts_per_page' => 4 // minus 1
)); while ( have_posts() ) : the_post(); ?>
<?php
$image = get_field('bg');
if( !empty($image) ): ?>
<li> <img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" /></li>
<?php endif; ?>
<?php endwhile; wp_reset_query(); ?>
</ul>
Add below Javascript code in the footer.php
jQuery('.slider2').bxSlider({
slideWidth: 350,
minSlides: 1,
maxSlides: 1,
slideMargin: 5
});
</script>

Related

Blog posts won't open on my custom WordPress theme

This could be a dumb question, but I just can't figure it out. I'm working on a custom WordPress theme I created by converting a html website. But when I use WP_Query, it doesn't load my blog posts. Yes, it displays a list of blog posts as it should with the loop, but when I click on each title or the 'read more' link of a post, it only changes the url in the address bar to the link of the post and then simply refreshes the hope page. It doesn't open I'm really tired. Here's the query loop in my index.php
<?php
$categories = get_categories();
foreach ( $categories as $category ) {
//define args for query
$args = array(
'cat' => $category->term_id,
'post_type' => 'post',
'posts_per_page' => '30',
);
//The main query
$query = new WP_Query( $args );
if ( $query->have_posts() ) { ?>
<section class="<?php echo $category->name; ?> listing">
<h2>Latest in <?php echo $category->name; ?>:</h2>
<?php while ( $query->have_posts() ) {
$query->the_post();
?>
<article id="post-<?php the_ID(); ?>" <?php post_class( 'category-listing' ); ?>>
<?php if ( has_post_thumbnail() ) { ?>
<a href="<?php the_permalink(); ?>">
<?php the_post_thumbnail( 'thumbnail' ); ?>
</a>
<?php } ?>
<h3 class="entry-title">
<a href="<?php the_permalink(); ?>">
<?php the_title(); ?>
</a>
</h3>
<?php the_excerpt(); ?>
</article>
<?php } // end while ?>
</section>
<?php } // end if
// Use reset to restore original query.
wp_reset_postdata();
}
?>
</div><!-- blog-main-content-->
<?php get_sidebar(); ?>
<?php get_footer(); ?>
Please what do I do
Based on your comment above, you are missing a template file for your posts page. In your current configuration, the posts loop will be displayed on all pages of your website since you only have an index.php file. You should create a single.php template to display your single blog posts.
Here is the WordPress template hierarchy for reference: https://developer.wordpress.org/themes/basics/template-hierarchy/

Plotting ACF repeater on a Google Map

Im building out a wordpress site that plots custom data on a google map using Advanced Custom Fields Pro but can't get it to generate the map using the custom page I have created.
I have created a Google Map Picker with ACF which I have assigned to a post category type ID 4. This is functioning as expected and I can pick the location for each post
In my custom template for wordpress site I have entered the below code to call any location information from the Category in question in this case its ID is 4
This Section pulls and displays the location as expected on the page ( I will be hiding it in the final build)
<?php
$catquery = new WP_Query( 'cat=4&posts_per_page=10' );
while($catquery->have_posts()) : $catquery->the_post();
?>
<?php the_field('location'); ?>
<?php endwhile; ?>
</div>
However the map just pulls the first blog an does not display the other
Below is the code im using to call the location and pass it into the map
<?php if( have_rows('sdg_location') ): ?>
<div class="acf-map">
<?php while ( have_rows('sdg_location') ) : the_row();
$location = get_field('location');
?>
<div class="marker" data-lat="<?php echo $location['lat']; ?>"
data-lng="<?php echo $location['lng']; ?>">
</div>
<?php endwhile; ?>
</div>
<?php endif; ?>
Can anyone advise of a better method of doing this? Is there a way to pass the location from the categories directly into the map call?
Below is a screenshot of whats happening can anyone advise?
Thanks a million for your help in advance
Screenshot of map and locations loading
Ended up using this code
<? $map_posts = get_posts(array(
'post_type' => 'post',
'cat' => '4'));
if( $map_posts ): ?>
<div class="acf-map">
<?php foreach( $map_posts as $map_post ) :
$location = get_field('location', $map_post->ID);
?>
<div class="marker" data-lat="<?php echo $location['lat']; ?>" data-lng="<?php echo $location['lng']; ?>">
</div>
<?php endforeach; ?>
</div>

Advanced Custom field loop images

I need to show the loop inside Advanced custom field. This code return only the first image.
<?php if( have_rows('colors') ): ?>
<ul>
<?php while( have_rows('colors') ): the_row(); ?>
<?php $image = wp_get_attachment_image_src(get_field('colori'), 'full'); ?>
<img src="<?php echo $image; ?>" alt="<?php echo get_the_title(get_field('colors')) ?>" />
<?php endwhile; ?>
</ul>
<?php endif; ?>
Inside a ACF Repeater Field you must use get_sub_field(), not get_field(). So your code should look like this:
<?php if( have_rows('colors') ): ?>
<ul>
<?php while( have_rows('colors') ): the_row(); ?>
<?php $image = wp_get_attachment_image_src(get_sub_field('colori'), 'full'); ?>
<img src="<?php echo $image[0]; ?>" alt="<?php echo get_the_title(get_sub_field('colors')) ?>" />
<?php endwhile; ?>
</ul>
<?php endif; ?>
It is possible that it returns false values again because I don't know how you named your ACF (repeater) sub fields.
The sub field 'colori' must be an ACF image field that outputs an ID. Not an array or something else.
wp_get_attachment_image_src() returns an array. [0] => url , [1] => width, [2] => height
Read the doc for a repeater field here.

ACF insert logo from option page

Using the plugin ACF
I want to insert from an options page, the logo in the header of all pages
I can not get the image url
<?php $logo = get_field( 'logo', 'option' ); ?>
<?php if ( $logo ) : ?>
<img src="<?php echo $logo['url']; ?>" alt="<?php echo $logo['alt']; ?>" />
<?php endif; ?>
What is the right method?
thank you
This code works for me. Make sure the image "Return Value" is set to "Image Array" in ACF settings.
<?php
$website_logo = get_field('website_logo', 'option');
if( !empty($website_logo) ):
?>
<img src="<?php echo $website_logo['url']; ?>" alt="<?php echo $website_logo['alt']; ?>">
<?php
endif;
?>
I had the same problem but a fix it.
First I put the ACF "logo" in a page, then a use the ID of this page to put the logo in header, at last I call the logo in header.php like this:
<?php
$logo = get_field('logo', 5); // 5 is the ID of the page where I put the logo
$size = 'full';
?>
<div id="logo" style="padding-top:10px;"><?php echo wp_get_attachment_image( $logo, $size ); ?></div>
Enjoy!

wordpress featured posts

i'm trying to create a portfolio website using wordpress,
each post has view costum fields, one of which is called type - with the value of "featured" or "not-featured"
now when user clicks on the post title - they go the the single.php to see the entire post, here i would love to display all featured thumbnails
i tried this
<?php while ( have_posts() ) : the_post() ?>
<?php if(get_post_meta($post->ID, 'type', true) == "featured") {; ?>
<h2 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php printf( __('Permalink to %s', 'your-theme'), the_title_attribute('echo=0') ); ?>" rel="bookmark">
<img src="<?php echo get_post_meta($post->ID, 'intro_thump', true); ?>" alt="Icon for Post #<?php the_ID(); ?>" />
</a></h2>
<?php }; ?>
<div class="entry-content">
</div><!– .entry-content –>
<?php endwhile; ?>
(THIS CODE IS SIMILAR TO THE CODE I USE AT INDEX.PHP AND THERE IT DOES WORK, HERE AT SINGLE.PHP IT DOES NOT WORK)
but this does not display all the thumbnails (only the current posts' thumbnail (is it's a feature post))
this is my first attempt of trying to create a theme from blank so i'm not sure what the error could be
thanks for your help
The code in your question only loops through the posts returned by the query made for the current view, in the case of a single post view that is one post. You want to perform a new query to retrieve all the posts that have the required meta value:
<?php
query_posts(array("meta_key" => "type", "meta_value" => "featured"));
if (have_posts()) : while (have_posts()) : the_post();
?>
<!-- Display thumbnails -->
<?php endwhile; endif; ?>

Resources