I am using codeigniter and am trying to set up a bootstrap 2 column layout using in my controller:
$data['form'] = $this->load->view('sellers/form7','',TRUE);
$data['data1'] = $this->load->view('sellers/lorem','',TRUE);
$this->load->view('sellers/twocolumnlayout', $data);
my layout view is :
<div class="container-fluid">
<div class="row-fluid">
<div class="span5">
<?php echo $form ?>
</div>
<div class="span2">
</div>
<div class="span5">
<?php echo $text1 ?>
</div>
</div>
</div>
Unfortunately my columns are overlapping (Please see attached pic). Can anyone show me how to fix this?
Related
I am a fresher in wordpress and I was trying to dynamic a structure. I want someone who can guide me to show images serial wise in the loop.
Here is the structure:
<section class="beers-img">
<div class="container">
<?php
$add_gallery_images =get_post_meta(get_the_ID(), 'add_gallery_images', true);
$add_gallery_images = array_values($add_gallery_images);
// print_r($add_gallery_images);
$countimages = count($add_gallery_images);
for($x = 0; $x < $countimages; $x++) {
?>
<div class="row <?php echo ($x % 2 == 0 ) ? '' : 'flex-row-reverse'; ?>">
<div class="col-lg-5">
<div class="beers-img-wraper">
<img src="<?php echo $add_gallery_images[$x]; ?>">
</div>
</div>
<div class="col-lg-7">
<div class="beers-img-wraper">
<img src="<?php echo $add_gallery_images[$x]; ?>">
</div>
</div>
</div>
<?php } ?>
</div>
</section>
But in the loop, same image is displaying in col-lg-5 and col-lg-7. And in the next row it shows the second image twice, and in the next row it shows the third image.
I want to show first image in col-lg-5 and second image in col-lg-7, third image in next row first col-lg-5 and so on.
Can anyone guide me on how will I do that?
how can i integrate load more button that loads next 10 posts from custom query ?
I've tried with bunch of plugins, css and js ways, but can't seem to load it.
How would you load more posts on load click?
Any tip is very much appreaciated
<div class="container">
<div class="row featured-akcije">
#foreach(get_field('actions') as $action)
#php($query = new WP_Query(array('post_type' => 'condo', 'p' => $action['akcions']->ID)))
#php($query->the_post())
<div class="col-md-4 col-xl-3 action">
<div class="box-shadow-posts hoverPic">
<div class="row">
<div class="col-12 col-md-12">
<div class="row">
<div class="col-4 col-md-6 col-xl-6">
<div class="action-img">
<img src="{{ get_the_post_thumbnail_url() }}" class="img-fluid">
<p class="action">action</p>
</div>
</div>
<div class="col-8 col-md-6 pl-md-0">
<div class="row info-action">
<div class="col-md-12"><h2 class="title">
{{ the_title() }}
</h2></div>
<div class="col-md-12 price-info">
<div class="divider">
</div>
<?php if( get_field('price_off') ): ?>
<p class="price">price from <?php the_field('price_from'); ?>e</p>
<?php endif; ?>
<p class="detail"><a href="{{ the_permalink() }}"><span class="nav-border"></span><span>detail <i
class="fas fa-arrow-right"></i></span></a></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
#php(wp_reset_postdata())
#endforeach
</div>
</div>
I implemented load more functionality for custom query like this:
Create wp ajax endpoint which is called be javascript on load more button click
Endpoint gets offset which post to load? For example from 11 to 20 and returns html with rendered posts
Javascript appends return html to html of the page in proper place
How to create endpoint? Here are examples for creating endpoint and calling it from javascript: https://codex.wordpress.org/AJAX_in_Plugins In endpoint you should call fetching posts like this: $query = new WP_Query(array('post_type' => 'condo', 'p' => $action['akcions']->ID)) with proper offset passed in params, render html template and return it.
Blog Posts with Grid Layout even number columns doesn't display correctly .The problem occurs with 3 column layout also: for each group of 3 posts
<div class="main" role="main">
<div id="content" class="content full">
<div class="container">
<?php if(have_posts()) : ?>
<?php while(have_posts()) : the_post();
$title = get_the_title();?>
<div class="row">
<?php if ( has_post_thumbnail() ) { ?>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
<a href="<?php echo esc_url(get_permalink(get_the_ID())) ?><?php
the_post_thumbnail('imic_600x400'); ?></a>
<?php } ?>
<?php if ( has_post_thumbnail() ) { ?><?php } ?>
<h3><a href=" <?php echo esc_url(get_permalink(get_the_ID())); ?>
<?php
echo esc_attr($title); ?>
</a>
</h3>
</div>
<?php endwhile; ?>
<!-- Pagination -->
<?php if(function_exists('imic_pagination')) { imic_pagination(); }
else { next_posts_link( 'Older Entries');
previous_posts_link( 'Newer Entries' ); } ?>
<?php endif;?>
</div>
<?php if(is_active_sidebar($pageSidebar)) { ?>
<!-- Sidebar -->
<div class="sidebar" id="sidebar-col">
<?php dynamic_sidebar($pageSidebar); ?>
</div>
<?php } ?>
</div>
</div>
</div>
Try changing the created HTML structure as follows (in Inspect Element view to verify it works):
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
</div><!--
--><div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
</div><!--
--><div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
</div>
(note the <!-- --> HTML comments)
If that solves the problem, try adding the HTML comments into your PHP code.
The reason for this behaviour is the resulting new line being interpreted as a "space" and thus the third item won't fit into the same row because of the added horizontal space.
You could also output the HTML-<div class="row">...</div> without line-breaks, eg. by concatenating the markup as one PHP string.
I recently read a similar help topic here: https://support.advancedcustomfields.com/forums/topic/bootstrap-modal-pop/ – I kind of understand it but I cant seem to get my head around how it relates to my situation.
I’m building a grid of client logos, using the ACF repeater function. I have the logos displaying correctly, the fields within the repeater are an image and a page link.
When you click on a logo, instead of a page link, I would like it to open up a modal window. Inside this modal window, I would like the logo again, a title and two text areas.
I just cant figure it out!!
Here’s my initial code for pulling through the logo repeater field:
<div style="background-color:#ffffff;width:100%;">
<div class="container margin-top-20" >
<div class="row">
<?php if( get_field('client_logos') ): ?>
<div style="clear:both;margin-top:20px;"></div>
<h3 class="brand-white" >Our Clients</h3>
<ul class="blocks blog-block logo-block">
<?php if( get_field('client_logos') ): ?>
<?php while( has_sub_field('client_logos') ): ?>
<li>
<div class="block-image">
<div class="logo-image">
<div class="logo-center">
<?php $logoblock = get_sub_field('client_logo'); ?>
<img src="<?php echo $logoblock['sizes']['medium']; ?>">
</div>
</div>
</div>
</li>
<?php endwhile; ?>
<?php endif; ?>
</ul>
<?php else: ?>
<?php endif; ?>
</div>
</div>
</div>
and here's my modal window code:
<div class="modal fade col-md-4" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
<div class="modal-dialog" >
<div class="modal-content" style="background-color:<?php the_sub_field('box_color'); ?>">
<div class="modal-header">
<!-- Close x --> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<!-- Logo --> <?php the_field('client_logo');?>
<!-- Title --> <?php the_field('client_title');?>
</div>
<div class="modal-body">
<!-- Case Study --><?php the_field('text area 1');?>
<!-- Testimonial --><?php the_field('text area 2');?>
</div>
</div>
</div>
</div>
I feel like all the answers are there but I cant figure out how to put them together. If anyone could help me combine the two that would be amazing!!
I'm trying to figure out a way to make a dynamic home page on wordpress, i want the ability to edit the front page, and add content without hardcoding it.
Basically i want to have my home page to look similar to this.
https://html5up.net/forty
and i am aware that i need theme options to do this, how would i integrate that in my wordpress theme.
I want to be able to make columns, add rows, add hero image, etc.
and no, i dont want to use the visual composer. I am currently using Advanced custom fields.
Here is current front page on my theme, i dont want to use advanced custom fields because i still have to hard code.
In a nutshell how to make theme options for wordpress theme
template-frontpage.php
<?php
/**
* Template Name: Front Page
*
* #package Eli
*/
$image = get_field('hero_image');
get_header();
?>
<div class="row">
<div class="hero" style="background-image:url(<?php echo $image;?>); width:100%; min-height:350px; background-size: cover;">
<div class="container">
<div class="col-md-12">
<header class="hero-text">
<?php if (get_field('hero_title') ):?>
<h1 style="color:#fff;"><?php the_field('hero_title'); ?></h1>
<?php endif;?>
<?php if (get_field('hero_span') ):?>
<span><?php the_field('hero_span'); ?></span>
<?php endif;?>
<?php if (get_field('hero_span_2') ):?>
<span id="move"><?php the_field('hero_span_2'); ?></span>
<?php endif;?>
</header>
</div>
</div>
</div>
</div>
<section class="section-home">
<div class="row">
<div class="container">
<div class="line"></div>
<?php if (get_field('content_block_left') ):?>
<div id="cbl" class="col-md-4 col-xs-12">
<?php the_field('content_block_left_icon'); ?>
<?php the_field('content_block_left'); ?>
</div>
<?php endif;?>
<?php if (get_field('content_block_left2') ):?>
<div id="cbl" class="col-md-4 col-xs-12 ">
<?php the_field('content_block_left_2_icon'); ?>
<?php the_field('content_block_left2'); ?>
</div>
<?php endif;?>
<?php if (get_field('content_block_left3') ):?>
<div id="cbl" class="col-md-4 col-xs-12">
<?php the_field('content_block_left_3_icon'); ?>
<?php the_field('content_block_left3'); ?>
</div>
<?php endif;?>
</div>
</div>
</section>
<div class="section-about">
<div class="row">
<h1>Beat Your Rivals</h1>
<div class="line"></div>
<div class="container">
<?php if (get_field('image_left') ):?>
<div id="cbl2" class="col-md-6 offset-md-3 col-xs-12">
<img src="<?php echo the_field('image_left'); ?>" width:"400px" height:"300px">
</div>
<?php endif;?>
<?php if (get_field('caption_text') ):?>
<div id="cbl2" class="col-md-6 offset-md-3 col-xs-12">
<?php the_field('caption_text'); ?>
</div>
<?php endif;?>
</div>
</div>
</div>
<?php
$image2 = get_field('test_image');
?>
<div class="section-test" style="background-image:url(<?php echo $image2['url'];?>); width:100%; min-height:300px; background-size: cover;">
<div class="row">
<div class="container">
<?php if (get_field('test_text') ):?>
<div id="cbl3" class="col-md-12 col-xs-12">
<?php the_field('test_text'); ?>
</div>
<?php endif;?>
</div>
</div>
</div>
<div class="about-us">
<div class="row">
<div class="container">
<?php if (get_field('about_us') ):?>
<div class="col-md-12 col-xs-12">
<?php the_field('about_us'); ?>
</div>
<?php endif;?>
</div>
</div>
</div>
<?php
$image3 = get_field('cons_image');
?>
<div class="consult">
<div class="row">
<div class="my-block-left" style="background-image:url(<?php echo $image3['url'];?>); background-size: cover;" >
<div class="container">
<?php if (get_field('consult_us') ):?>
<div class="col-md-12 col-xs-12">
<?php the_field('consult_us'); ?>
</div>
<?php endif;?>
</div>
</div>
</div>
</div>
<?php if (get_field('contact_us') ):?>
<div class="contact-us">
<div class="row">
<div class="container">
<h1 class="contact-h1">Contact Us</h1>
<div class="line"></div>
<div class="col-md-12 col-xs-12">
<?php the_field('contact_us'); ?>
</div>
</div>
</div>
</div>
<?php endif;?>
<?php get_footer(); ?>
Ok, It seems you have already done the basic theme options. Now if you want to create real theme options like the ones everyone creates in their themes then you have three cool options. WP Theme Customizer API , Redux and Codestars
You need to study them. Anyone of the above you can use in your project.