Alright, so I have this block of code in my current theme:
<div class="content_block">
<?php the_content(); ?>
<div class="<?php echo $left_block; ?>">
<?php $project_photos = get_post_meta( get_the_ID(), 'project_photo_photo' );
if ( $project_photos ) : ?>
<div class="grid_gallery clearfix">
<?php foreach( $project_photos as $project_photo ) { ?>
<figure class="gallery_item featured-thumbnail thumbnail single-gallery-item">
<a href="/brv2/wp-content/files_mf/<?php echo $project_photo; ?>" class="image-wrap" rel="prettyPhoto[gallery]">
<img class="project_photo_photo" width="260" src="/brv2/wp-content/files_mf/<?php echo $project_photo; ?>" alt="<?php the_title(); ?>" />
<span class="zoom-icon"></span>
</a>
</figure>
<?php } ?>
<!--END .slider -->
</div>
<?php endif; ?>
What I need to do is to add a DIV wrap around "the_content" if and only if the $project_photos selector is active, not being a PHP developer this is what I've come up with but it doesn't work:
<div class="content_block">
<?php if ( $project_photos() ) {
echo '<div class="project_description">';
the_content();
echo '</div>';
} else {
the_content();
} ?>
<div class="<?php echo $left_block; ?>">
<?php $project_photos = get_post_meta( get_the_ID(), 'project_photo_photo' );
if ( $project_photos ) : ?>
<div class="grid_gallery clearfix">
<?php foreach( $project_photos as $project_photo ) { ?>
<figure class="gallery_item featured-thumbnail thumbnail single-gallery-item">
<a href="/brv2/wp-content/files_mf/<?php echo $project_photo; ?>" class="image-wrap" rel="prettyPhoto[gallery]">
<img class="project_photo_photo" width="260" src="/brv2/wp-content/files_mf/<?php echo $project_photo; ?>" alt="<?php the_title(); ?>" />
<span class="zoom-icon"></span>
</a>
</figure>
<?php } ?>
<!--END .slider -->
</div>
<?php endif; ?>
If anyone could provide some guidance on how I might accomplish this I would be very grateful.
Thanks in advance.
Can you give this a try?
<div class="content_block">
<?php
$project_photos = get_post_meta( get_the_ID(), 'project_photo_photo' );
if ( $project_photos ) {
echo '<div class="project_description">';
the_content();
echo '</div>';
} else {
the_content();
} ?>
<div class="<?php echo $left_block; ?>">
<?php
if ( $project_photos ) : ?>
<div class="grid_gallery clearfix">
<?php foreach( $project_photos as $project_photo ) { ?>
<figure class="gallery_item featured-thumbnail thumbnail single-gallery-item">
<a href="/brv2/wp-content/files_mf/<?php echo $project_photo; ?>" class="image-wrap" rel="prettyPhoto[gallery]">
<img class="project_photo_photo" width="260" src="/brv2/wp-content/files_mf/<?php echo $project_photo; ?>" alt="<?php the_title(); ?>" />
<span class="zoom-icon"></span>
</a>
</figure>
<?php } ?>
<!--END .slider -->
</div>
<?php endif; ?>
Related
The images are not showing in front-end. ACF settings screenshot
<?php
if( have_rows('how_it_works_functions') ):
$counter = 0;
while( have_rows('how_it_works_functions') ) : the_row();
$counter++;
?>
<div class="step<?php echo $counter; ?>">
<div class="row section-content">
<?php if($counter == 2) { ?>
<div class="col-md-8 image">
<img class="skip-lazy" src="<?php get_sub_field('how_it_works_functions_image')['url']; ?>" alt="<?php get_sub_field('how_it_works_functions_image')['alt']; ?>">
</div>
<div class="col-md-4 text">
<h3 data-aos="fade-left" data-aos-offset="300" data-aos-duration="1000"><?php the_sub_field('how_it_works_functions_name'); ?></h3>
<p data-aos="fade-up" data-aos-offset="100" data-aos-duration="1000"><?php the_sub_field('how_it_works_functions_description'); ?></p>
</div>
<?php } else { ?>
<div class="col-md-4 text">
<h3 data-aos="fade-right" data-aos-offset="300" data-aos-duration="1000"><?php the_sub_field('how_it_works_functions_name'); ?></h3>
<p data-aos="fade-up" data-aos-offset="100" data-aos-duration="1000"><?php the_sub_field('how_it_works_functions_description'); ?></p>
</div>
<div class="col-md-8 image">
<img class="skip-lazy" src="<?php get_sub_field('how_it_works_functions_image')['url']; ?>" alt="<?php get_sub_field('how_it_works_functions_image')['alt']; ?>">
</div>
<?php } ?>
</div>
</div>
<?php
endwhile;
endif;
?>
I already check the var_dump and it is getting the correct url but I still have broken image in front-end.
You need to echo that field.
Like this based on your code:
<img class="skip-lazy" src="<?php echo get_sub_field( 'how_it_works_functions_image' )['url']; ?>" alt="<?php echo get_sub_field( 'how_it_works_functions_image' )['alt']; ?>">
Alternative effective way:
<?php
$image = get_sub_field( 'how_it_works_functions_image' );
?>
<img class="skip-lazy" src="<?php echo esc_attr( $image['url'] ); ?>" alt="<?php echo esc_attr( $image['alt'] ); ?>">
Try out the above solution and let me know if it works or not.
I want to show tag based post in related post. Here is the complete template code for my related post loop (loop.related.post. php ) What changes do I need to make in this loop? My theme is custom. I want to show 6 posts in related posts.
<?php
global $wpdb, $post, $wp_query;
$URLs_Link_MP3 = get_post_meta( $post->ID, 'URLs_Link_MP3', true );
$durations_MP3 = get_post_meta( $post->ID, 'durations_MP3', true );
if(!$durations_MP3) $durations_MP3 = '0';
global $wpdb, $post, $wp_query;
$durations_MP3 = get_post_meta( $post->ID, 'durations_MP3', true ); if(!$durations_MP3) $durations_MP3 = '0';?>
<div class="col-sm-6 item" data-id="<?php the_ID(); ?>" data-value="<?php echo $URLs_Link_MP3 ; ?>" >
<div class="row">
<div class="button dark player loader" duration="<?php echo $durations_MP3 ; ?>">
<svg class="icon icon-play">
<use xlink:href="#icon-play"/>
</svg>
</div>
<a class="details" href="<?php the_permalink() ?>" title="<?php the_title(); ?> PDF Download">
<h2 class="title"><?php the_title(); ?></h2>
<p><?php echo $durations_MP3 ; ?> <?php global $opt_themes; if($opt_themes['rtones_Sec']) { ?><?php echo $opt_themes['rtones_Sec']; ?><?php } ?> - <?= ex_themes_get_post_view_(); ?> <?php global $opt_themes; if($opt_themes['rtones_Author_Download']) { ?><?php echo $opt_themes['rtones_Author_Download']; ?><?php } ?></p>
</a>
</div>
<?php global $opt_themes; if($opt_themes['ex_themes_tags_all_active_']) { ?>
<div class="row">
<?php
$post_tags = get_the_tags();
if ( ! empty( $post_tags ) ) {
echo '<ul class="tags">';
foreach( $post_tags as $post_tag ) {
echo '<li>' . str_replace('ringtones', ' ', $post_tag->name) . '</li>';
}
echo '</ul>';
} else {
echo '<ul class="tags">';
echo '<li><a>no tags</a></li>';
echo '</ul>';
}
?>
</div>
<?php } ?>
<div class="row">
<div class="actions">
<div class="button light fav">
<?php if ( shortcode_exists( 'favorite_button' ) ): ?><?php echo do_shortcode( '[favorite_button]' ); ?><?php else: ?><?php endif;?>
</div>
<div class="button light share">
<svg class="icon">
<use xlink:href="#icon-share"/>
</svg>
</div>
<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>">
<div class="button dark download">
<svg class="icon">
<use xlink:href="#icon-download2"/>
</svg>
</div>
</a>
</div>
</div>
</div>
I've put this code to the index.php on wordpress, but it doesn't show up anything. I thought it should shows all the posts latest to newest. Anyone can solve this?
<div class="card">
<div class="card-image">
<a href="<?php echo the_permalink(); ?>">
<img src="<?php echo get_the_post_thumbnail_url(get_the_ID); ?>" alt="Card Image">
</a>
</div>
<div class="card-description">
<a href="<?php the_permalink(); ?>">
<h3><?php the_title(); ?></h3>
</a>
<div class="card-meta">
Đăng bởi <?php the_author(); ?> vào <?php the_time('j F, Y') ?> trong <?php echo get_the_category_list(',') ?>
</div>
<p>
<?php echo wp_trim_words(get_the_excerpt(), 30); ?>
</p>
Tìm hiểu thêm
</div>
</div>
<?php }
wp_reset_query();
?>
Thank you very much.
You're missing half of a loop pretty much ...
If you want to use the post template that you have in you question, then you can do something like this:
<?php if ( have_posts() ):
$i = 0;
while ( have_posts() ):
$i++;
if ( $i > 1 ):
echo '<hr>';
endif; ?>
<div class="card">
<div class="card-image">
<a href="<?php echo the_permalink(); ?>">
<img src="<?php echo get_the_post_thumbnail_url(get_the_ID); ?>" alt="Card Image">
</a>
</div>
<div class="card-description">
<a href="<?php the_permalink(); ?>">
<h3><?php the_title(); ?></h3>
</a>
<div class="card-meta">
Đăng bởi <?php the_author(); ?> vào <?php the_time('j F, Y') ?> trong <?php echo get_the_category_list(',') ?>
</div>
<p>
<?php echo wp_trim_words(get_the_excerpt(), 30); ?>
</p>
Tìm hiểu thêm
</div>
</div>
<?php
endwhile;
endif; ?>
Should be working.
I've made a shortcode function that returns some Advanced Custom Fields depending on which repeater field is chosen. It displays correctly and in the right order however any content typed underneath the shortcode is moved outside of its <article> container element.
Here is the code:
function boxes_shortcode($atts, $content = null) {
ob_start(); ?>
<div id="boxes">
<div class="box-gutter"></div>
<div class="box-sizer"></div>
<?php while( have_rows('box_repeater') ): the_row();
$image_id = get_sub_field('link_image');
$image_size = 'box-thumbnail';
$image_array = wp_get_attachment_image_src($image_id, $image_size);
$linkImage = $image_array[0]; ?>
<?php if(get_sub_field('box_type') == "box-link"): ?>
<div class="box">
<div class="link-box">
<img src="<?php echo $linkImage; ?>" alt="<?php echo $linkImage['alt']; ?>" />
<a class="caption-wrapper" href="http://www.google.com">
<span id="link-box-content" style="background:<?php the_sub_field('link_background_colour'); ?>">
<h6 style="color:<?php the_sub_field('link_title_colour'); ?>"><?php the_sub_field('link_title'); ?></h6>
<h4 style="color:<?php the_sub_field('link_text_colour'); ?>"><?php the_sub_field('link_text'); ?></h4>
<p style="color:<?php the_sub_field('link_text_colour'); ?>" href="<?php the_sub_field('link_url'); ?>"><?php the_sub_field('link_url_text'); ?> ></p>
</span>
</a>
</div>
</div>
<?php endif;
if(get_sub_field('box_type') == "box-quote"): ?>
<div class="box">
<div class="quote-box">
<div class="quotation-mark"></div>
<h4><?php the_sub_field('quote'); ?></h2>
<p><?php the_sub_field('quote_source'); ?></p>
<?php the_sub_field('quote_link_text'); ?> >
</div>
</div>
<?php endif;
if(get_sub_field('box_type') == "box-twitter"): ?>
<div class="box">
<div class="twitter">
<a class="twitter-timeline" href="<?php the_sub_field('twitter_url'); ?>" data-widget-id="<?php the_sub_field('twitter_widget_id'); ?>" data-chrome="noheader noscrollbar nofooter noborders transparent" data-tweet-limit="<?php the_sub_field('number_of_tweets'); ?>"></a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<a class="twitter-badge" href="<?php the_sub_field('twitter_url'); ?>"></a>
<div class="twitter-bottom">See more ></div>
</div>
</div>
<?php endif;
endwhile;?>
</div>
</div>
</div>
<?php
/* Get the buffered content into a var */
$sc = ob_get_contents();
ob_end_clean();
return $sc;
}
add_shortcode('boxes', 'boxes_shortcode');
Can anyone help solve this mystery? Many thanks.
You have two extra closing <div>'s in your code.
Try this:
function boxes_shortcode($atts, $content = null) {
ob_start(); ?>
<div id="boxes">
<div class="box-gutter"></div>
<div class="box-sizer"></div>
<?php while( have_rows('box_repeater') ): the_row();
$image_id = get_sub_field('link_image');
$image_size = 'box-thumbnail';
$image_array = wp_get_attachment_image_src($image_id, $image_size);
$linkImage = $image_array[0]; ?>
<?php if(get_sub_field('box_type') == "box-link"): ?>
<div class="box">
<div class="link-box">
<img src="<?php echo $linkImage; ?>" alt="<?php echo $linkImage['alt']; ?>" />
<a class="caption-wrapper" href="http://www.google.com">
<span id="link-box-content" style="background:<?php the_sub_field('link_background_colour'); ?>">
<h6 style="color:<?php the_sub_field('link_title_colour'); ?>"><?php the_sub_field('link_title'); ?></h6>
<h4 style="color:<?php the_sub_field('link_text_colour'); ?>"><?php the_sub_field('link_text'); ?></h4>
<p style="color:<?php the_sub_field('link_text_colour'); ?>" href="<?php the_sub_field('link_url'); ?>"><?php the_sub_field('link_url_text'); ?> ></p>
</span>
</a>
</div>
</div>
<?php endif;
if(get_sub_field('box_type') == "box-quote"): ?>
<div class="box">
<div class="quote-box">
<div class="quotation-mark"></div>
<h4><?php the_sub_field('quote'); ?></h2>
<p><?php the_sub_field('quote_source'); ?></p>
<?php the_sub_field('quote_link_text'); ?> >
</div>
</div>
<?php endif;
if(get_sub_field('box_type') == "box-twitter"): ?>
<div class="box">
<div class="twitter">
<a class="twitter-timeline" href="<?php the_sub_field('twitter_url'); ?>" data-widget-id="<?php the_sub_field('twitter_widget_id'); ?>" data-chrome="noheader noscrollbar nofooter noborders transparent" data-tweet-limit="<?php the_sub_field('number_of_tweets'); ?>"></a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<a class="twitter-badge" href="<?php the_sub_field('twitter_url'); ?>"></a>
<div class="twitter-bottom">See more ></div>
</div>
</div>
<?php endif;
endwhile;?>
</div>
<!--/div>
</div-->
<?php
/* Get the buffered content into a var */
$sc = ob_get_contents();
ob_end_clean();
return $sc;
}
add_shortcode('boxes', 'boxes_shortcode');
I would like to know what do i need to add in css to make the logo move in the left position before site-title in WordPress?
// Display Site Title
add_action( 'smartline_site_title', 'smartline_display_site_title' );
function smartline_display_site_title() { ?>
<img src="<?php bloginfo('template_directory');?>/images/AA.gif">
<a href="<?php echo esc_url(home_url('/')); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
<h1 class="site-title"><?php bloginfo('name'); ?></h1>
</a>
<?php
}
This should do it :
Add #logo img{float:left;} code to your CSS and then check.
EDITED
#logo img{float:left;margin-top:-3%;}
#logo .site-title{margin-top:2%;}
<!--logo-floater-->
<div id="logo-floater">
<?php if ($logo): ?>
<a href="<?php print check_url($front_page); ?>" title="<?php print t('Home'); ?>">
<img src="<?php print $logo; ?>" alt="<?php print t('Home'); ?>" />
</a>
<?php endif; ?>
<?php if ($site_name || $site_slogan): ?>
<div class="clearfix">
<?php if ($site_name): ?>
<span id="site-name"><?php print $site_name; ?></span>
<?php endif; ?>
<?php if ($site_slogan): ?>
<span id="slogan"><?php print $site_slogan; ?></span>
<?php endif; ?>
</div>
<?php endif; ?>
</div> <!--EOF:logo-floater-->
This displays the logo first, to switch them try,
<!--logo-floater-->
<div id="logo-floater">
<?php if ($site_name || $site_slogan): ?>
<div class="clearfix">
<?php if ($site_name): ?>
<span id="site-name"><?php print $site_name; ?></span>
<?php endif; ?>
<?php if ($site_slogan): ?>
<span id="slogan"><?php print $site_slogan; ?></span>
<?php endif; ?>
</div>
<?php endif; ?>
<?php if ($logo): ?>
<a href="<?php print check_url($front_page); ?>" title="<?php print t('Home'); ?>">
<img src="<?php print $logo; ?>" alt="<?php print t('Home'); ?>" />
</a>
<?php endif; ?>
</div> <!--EOF:logo-floater-->