I've created an image gallery using Advance Custom Fields pro with lighbox and limited it to show only 4 thumbnails, and that's working perfectly. When someone click on any thumbnail, the gallery opens up in lightbox and shows all the images in it.
Now I want to use different css styling for the 4th thumbnail but don't know how to do that.
Here's my code:
<?php
$images = get_field('menu_gallery');
$image_1 = $images[0];
if( $images ) { ?>
<ul class="gal-grid">
<?php
$i = 0;
foreach( $images as $image ) {
if ($i >= 5) {
$content = '<li class="gal-grid-zom">';
$content = '<a class="gallery_image" href="'. $image['url'] .'"></a>';
$content .= '</li>';
} else {
$content = '<li class="gal-grid">';
$content = '<li class="gal-grid"><a class="gallery_image" href="'. $image['url'] .'">';
$content .= '<img class="gallery-zom" src="'. $image['sizes']['thumbnail'] .'" alt="'. $image['alt'] .'" />';
$content .= '</a>';
$i++;
}
$content .= '</li>';
if ( function_exists('slb_activate') ) {
$content = slb_activate($content);
}
echo $content;
?>
<?php } ?>
<?php } ?> </ul>
Can someone help me regarding this issue?
You can add the $key inside your foreach loop :
foreach( $images as $key => $image ) {
if( $key === 3 ) {
// it will show the specific <li> for the 4th iteration.
<li class="fourth-grid">The Image</li>
} else {
<li class="gal-grid">The image</li>
}
}
Related
I'm trying to create a WP shortcode that would include both html and php. For example, something like that (that does not work):
function my_first_shortcode() {
$content = <<<EOT
<h1>Some title</h1>
<p><?php the_field('description'); ?></p>
EOT;
return $content;
}
add_shortcode('my_shortcode', 'my_first_shortcode');
The the_field('name_of_field'); normally outputs the content of the specified variable/field (Advanced Custom Fields).
Is the HEREDOC way the right way of doing that? If so, how would I do it? It'd be also great if I could pass variables to the shortcode.
Thank you
First, you can't write PHP tags inside HEREDOC.
You can use it like that:
$the_field = 'the_field';
$content = <<<EOT
<h1>Some title</h1>
<p>{$the_field('description')}</p>
EOT;
In order to pass attributes to a shortcode it's very simple.
for example we have the shortcode:
[my_shortcode att_1="some_value" att_2="some_value"]
function my_first_shortcode($atts)
{
$att_1 = $atts['att_1'];
$att_2 = $atts['att_2'];
}
add_shortcode('my_shortcode', 'my_first_shortcode');
I always prefer to use output buffering for my shortcodes, example below.
function my_first_shortcode() {
ob_start(); ?>
<h1>Some title</h1>
<p><?php echo the_field('description'); ?></p>
<?php
return ob_get_contents();
}
add_shortcode('my_shortcode', 'my_first_shortcode');
add_shortcode('location_start_your_application_group', 'start_your_application_group');
function start_your_application_group() {
ob_start();
$start_your_application_group = '';
$start_your_application_group .= '<section class="start-your-application">';
if ( have_rows( 'start_your_application_group', 'option' ) ) :
while ( have_rows( 'start_your_application_group', 'option' ) ) : the_row();
$heading = get_sub_field( 'heading' );
$content = get_sub_field( 'content' );
if ( $heading !== '' ) {
$start_your_application_group .= '<h3 class="start-your-application__heading">' . $heading . '</h3>';
}
if ( $content !== '' ) {
$start_your_application_group .= '<div class="start-your-application__content">' . $content . '</div>';
}
$image = get_sub_field( 'image' );
if ( $image ) {
$start_your_application_group .= '<div class="start-your-application__image-container"><img class="start-your-application__image" src="' . esc_url($image['url']) .'" alt="' . $image['alt'] . '" /></div>';
}
endwhile;
endif;
$start_your_application_group .= '</section>';
$start_your_application_group = ob_get_clean();
return $start_your_application_group;
}
How to create authors list dropdown in wordpress ?
I need to filter posts by author.
Please help !
echo '<form method="get">';
$authors = get_users( 'orderby=nicename' );
$ret='';
foreach ( $authors as $aut ) {
$ret.= '<option value="'.$aut->ID.'">' . esc_html( $aut->user_nicename ) . '</option>';
}
echo '<select name="author">'.$ret.'</select><input type="submit"></form>';
Use this code
<ul>
<?php $allUsers = get_users('show_fullname=1&optioncount=1&orderby=post_count&order=DESC&role=author');
foreach($allUsers as $user){ ?>
<li><?php echo $user->display_name; echo " (".count_user_posts( $user->ID ).")";?></li>
<?php } ?>
</ul>
trying to show breadcrumbs but i am stuck.
ABOUT US
- TEAM
- WHAT WE DO
i don't understand how to show all menus dynamically in breadcrumbs, if i am currently on what we do page then how to show in breadcrumbs kindly help me
i try this
<?php $menuID = $post->ID;
query_posts( 'post_type=page&post_parent=$menuID' );
while ( have_posts() ) : the_post();
the_title();
endwhile;
?>
this code just show child of every page but how can i find page which one is clicked
Place this code in custom_functions.php:
function the_breadcrumb() {
global $post;
echo '<ul id="breadcrumbs">';
if (!is_home()) {
echo '<li><a href="';
echo get_option('home');
echo '">';
echo 'Home';
echo '</a></li><li class="separator"> / </li>';
if (is_category() || is_single()) {
echo '<li>';
the_category(' </li><li class="separator"> / </li><li> ');
if (is_single()) {
echo '</li><li class="separator"> / </li><li>';
the_title();
echo '</li>';
}
} elseif (is_page()) {
if($post->post_parent){
$anc = get_post_ancestors( $post->ID );
$title = get_the_title();
foreach ( $anc as $ancestor ) {
$output = '<li>'.get_the_title($ancestor).'</li> <li class="separator">/</li>';
}
echo $output;
echo '<strong title="'.$title.'"> '.$title.'</strong>';
} else {
echo '<li><strong> '.get_the_title().'</strong></li>';
}
}
}
elseif (is_tag()) {single_tag_title();}
elseif (is_day()) {echo"<li>Archive for "; the_time('F jS, Y'); echo'</li>';}
elseif (is_month()) {echo"<li>Archive for "; the_time('F, Y'); echo'</li>';}
elseif (is_year()) {echo"<li>Archive for "; the_time('Y'); echo'</li>';}
elseif (is_author()) {echo"<li>Author Archive"; echo'</li>';}
elseif (isset($_GET['paged']) && !empty($_GET['paged'])) {echo "<li>Blog Archives"; echo'</li>';}
elseif (is_search()) {echo"<li>Search Results"; echo'</li>';}
echo '</ul>';
}
Go to your single.php page and add the following code anywhere you want to display the breadcrumbs.
<?php the_breadcrumb(); ?>
I have five custom fields for loading images but all of them are not required. I mean the user can upload a random number of images from 1 to 5. I am stuck in a simple lack of concept here. What I am missing? Here is my code
$img = array();
$post = get_page_by_title( $pgnr,OBJECT,'post');
$id= $post->ID;
$custom_fields = get_post_custom($id);
$images = Array("image1","image2","image3","image4","image5");
foreach($images as $image){
if(isset($custom_fields[$image]) && (!empty($custom_fields[$image]))) {
$img[] = $custom_fields[$image];
}
}
echo '<div id="showcase" class="showcase">';
foreach ( $img as $value )
{
echo '<div class="showcase-slide">';
echo '<div class="showcase-content">';
echo'<img alt="image" src="'. wp_get_attachment_url( $value ).'" width="600" height="500"/>';
echo '</div>';
echo '<div class="showcase-thumbnail">';
echo '<img alt="thumb" src="'.wp_get_attachment_url( $value ).'" width="140" /> ';
echo '</div>';
}
echo '</div>';
}
Perhaps the array $img[] needs an index between the brackets that only increments each time values are assigned into the array.
I'm trying to display a number of custom post taxonomy terms - but each within their own specific list item.
I have a site which is about garages. (developing on localhost so don't have a link yet).
I have a custom post type called Cars. Within this I have a custom post taxonomy with the make of the Car 'Ford' in this case.
Within 'Ford' is a list of custom post taxonomy terms of all the ford cars at that garage. 'GT', 'Sierra', 'Orion'.
Instead of listing the terms: 'GT', 'Sierra', 'Orion'. I want to show a picture of the car within a ul list.
I've created a sprite with all the images and want to loop through these setting the background position for each li item.
The first lot of code below displays a list of of the terms which is all good, but not what I want. Right at the bottom is the code which I've tried to add the list items to but just getting a blank screen...
Any help, much appreciated. Thanks
<?php if ( get_post_type() == cars ) { ?>
<div class="entry-meta-custom">
<?php
$terms = get_the_terms( $post->ID, 'ford' );
if ( $terms && ! is_wp_error( $terms ) ) :
$draught_links = array();
foreach ( $terms as $term ) {
$draught_links[] = $term->name;
}
$on_draught = join( ", ", $draught_links );
?>
<?php echo $on_draught; ?>
<?php endif; ?>
</div><!-- .entry-meta-custom -->
<?php } ?>
And here's where I've tried to add the list items.
<?php if ( get_post_type() == cars ) { ?>
<div class="entry-meta-custom">
<?php
$terms = get_the_terms( $post->ID, 'ford' );
if ( $terms && ! is_wp_error( $terms ) ) :
$draught_links = array();
foreach ( $terms as $term ) {
if ($term->name == 'gt') {
$term->name = '<li class="gt">' . $term->name . '</li>';
}
if ($term->name == 'sierra') {
$term->name = '<li class="sierra">' . $term->name . '</li>';
}
if ($term->name == 'orion') {
$term->name = '<li class="orion">' . $term->name . '</li>';
}
$draught_links[] = $term->name;
}
$on_draught = join( ", ", $draught_links );
?>
<?php echo '<ul>' . $on_draught . '</ul>; ?>
<?php endif; ?>
</div><!-- .entry-meta-custom -->
<?php } ?>
I worked it out. Below is the code for anyone that is looking to replace custom post taxonomy list terms with individual images which are link to the term archive.
Source http://codex.wordpress.org/Function_Reference/get_term_link
<?php if ( get_post_type() == cars ) { ?>
<div class="entry-meta-custom">
<?php
$terms = get_terms('ford');
echo '<ul>';
foreach ($terms as $term) {
echo '<li class="'.$term->name.'"></li>';
}
echo '</ul>'; ?>
</div><!-- .entry-meta-custom -->
<?php } ?>