I am using sheadawson/silverstripe-blocks module: https://github.com/sheadawson/silverstripe-blocks
I am trying to have it so the user can add 2x images to a block. For some reason it will only pull through the first image.
Both of them are definitely uploaded as per the screenshot:
TwoImagesLeftTextRightBlock.php
<?php
class TwoImagesLeftTextRightBlock extends Block {
private static $db = array(
'Title' => 'Varchar(255)',
'Summary' => 'HTMLText',
);
private static $has_one = array(
'Image' => 'Image',
'SecondImage' => 'Image'
);
}
Template for the block:
<div class="container-fluid">
<div class="container">
<div class="row">
<div class="col-md-10 col-md-offset-1 ptb50">
<div class="col-md-8">
<div class="block-right-title">$Title</div>
<div class="block-left-text">
$Summary
</div>
</div>
<div class="col-md-4">
<img class="block-icon" src="$Image.URL" alt="">
<img class="block-icon" src="$SecondImage.URL" alt="">
</div>
</div>
</div>
</div>
</div>
Inspecting the code you can see it only pulls through the first image... Any ideas on how to get both working?
Related
https://codepen.io/SitePoint/pen/GQoVey
I am using Tabs and Masonry found here.
I have a total of 4 categories. 4 categories 20 contents
I'm printing this field with wordpress without any problems.
<main role="main" class="grid">
<div class="row">
<div class="col-md">
<div class="starter-template">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<?php
$args = array(
'type' => 'hizmetler',
'parent' => '',
'orderby' => 'id',
'order' => 'ASC',
'hide_empty' => 1,
'hierarchical' => 1,
'taxonomy' => 'kategoriler' /* custom post type texonomy name */
);
$cats = get_categories($args);
foreach ($cats as $cat) {
$cat_id= $cat->term_id;
$cat_name= $cat->name; ?>
<li class="tag is-dark">
<a class="nav-link" id="contact-tab" data-toggle="tab" href="#<?php echo ''.$cat->term_id.''; ?>" role="tab" aria-controls="<?php echo ''.$cat->term_id.''; ?>" aria-selected="false">
<?php echo ''.$cat->name.''; ?>
</a></li>
<?php wp_reset_postdata(); ?>
<?php } ?>
</ul>
I can get category name, id and link as CPT.
The problem starts here.
I don't know how to loop this field.
<div class="tab-content" id="myTabContent">
<div class="tab-pane masonry-container fade show active" id="home" role="tabpanel" aria-labelledby="1-tab">
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card with stretched link</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
</div>
loop area;
<div class="card-body">
<h5 class="card-title">Card with stretched link</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
but this field must have a category name related to the parent div.
ex: id="home"
example: <?php echo ''.$cat->term_id.''; ?>
this is what should be
<div class="tab-pane masonry-container fade show active" id="EXAMPLE-CAT-ID-1" role="tabpanel" aria-labelledby="EXAMPLE-CAT-ID-1-tab">
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">POST 1 TİTLE (cat-1)</h5>
<p class="card-text">POST 1 CONTENT</p>
<p class="card-text">CAT 1 NAME</p>
link Go somewhere
</div>
<div class="card-body">
<h5 class="card-title">POST 2 TİTLE (cat-1)</h5>
<p class="card-text">POST 2 CONTENT</p>
<p class="card-text">CAT 1 NAME</p>
link Go somewhere
</div>
<div class="card-body">
<h5 class="card-title">POST 3 TİTLE (cat-1)</h5>
<p class="card-text">POST 3 CONTENT</p>
<p class="card-text">CAT 1 NAME</p>
link Go somewhere
</div>
</div>
</div>
<div class="tab-pane masonry-container fade show active" id="EXAMPLE-CAT-ID-2" role="tabpanel" aria-labelledby="EXAMPLE-CAT-ID-2-tab">
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">POST 1 TİTLE (cat-2)</h5>
<p class="card-text">POST 1 CONTENT</p>
<p class="card-text">CAT 2 NAME</p>
link Go somewhere
</div>
<div class="card-body">
<h5 class="card-title">POST 2 TİTLE (cat-2)</h5>
<p class="card-text">POST 2 CONTENT</p>
<p class="card-text">CAT 2 NAME</p>
link Go somewhere
</div>
<div class="card-body">
<h5 class="card-title">POST 3 TİTLE (cat-2)</h5>
<p class="card-text">POST 3 CONTENT</p>
<p class="card-text">CAT 2 NAME</p>
link Go somewhere
</div>
</div>
Place the following code in your functions.php file. You can use it as any shortcode - [tab_posts] or echo do_shortcode('[tab_posts]'); . Just keep in mind to fix html as you need to work your tabs.
function posts_per_tab($atts) {
$output = array();
//Setup our custom post args
$args = array(
'post_type'=>'post',
'posts_per_page' => 3,
'tax_query' => array(
'taxonomy' => 'cat', // Change it with your taxonomy
'field' => 'id',
'terms' => $atts,
)
);
$results = new WP_Query($args);
while($results->have_posts()): $results->the_post();
$output[] .= '<div class="card-body">';
$output[] .= '<h5 class="card-title">'.get_the_title().'</h5>';
$output[] .= '<p class="card-text">'.get_the_content().'</p>';
$output[] .= 'Go somewhere';
$output[] .= '</div>';
endwhile;
wp_reset_query();
return $output;
}
function posts_in_category_tabs() {
$tab_links = array();
$tab_contents = array();
$tab_posts = array();
$cargs = array(
'type' => 'post',
'parent' => '',
'orderby' => 'id',
'order' => 'ASC',
'hide_empty' => 1,
'hierarchical' => 1,
'taxonomy' => 'category'
);
$cats = get_categories($cargs);
if($cats):
foreach($cats as $cat):
//For each category build your tab
$tab_links[] = sprintf('<li>%s</li>',$cat->name);
//We are executing 2nd loop in posts_per_tab function passing category id as parameter
$tab_posts = posts_per_tab($cat->term_id);
//For each tab push the posts per category
$tab_contents[] = sprintf('<div class="tabs-panel">%s</div>',implode( '', $tab_posts ));
endforeach;
wp_reset_postdata();
endif;
//Our navigation
$tab_links = sprintf(
'<ul class="tabs-nav">%s</ul>',
implode( '', $tab_links ),implode( '', $tab_contents )
);
//Change container if needed
return sprintf('<div class="tabs-wrapper">%s %s</div>',$tab_links,implode( '', $tab_contents ));
}
add_shortcode('tab_posts','posts_in_category_tabs');
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.
Im trying to get the col-md-6 to stack below the col-md-4 on mobile but cant get it to work. Any advice how to achieve this would be great.
<footer>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-1 col-xs-12">
<?php
wp_nav_menu( array(
'menu' => 'footer',
'theme_location' => 'footer',
'depth' => 1,
'container' => 'div',
'container_id' => 'footer-nav',
'menu_class' => 'nav navbar-nav',
'fallback_cb' => 'wp_bootstrap_navwalker::fallback',
'walker' => new wp_bootstrap_navwalker())
);
?>
</div>
<div class="col-md-4 col-xs-12 copyright-text">
<p>Copyright © <?php echo date("Y"); ?> Elliott Davidson. All Rights Reserved.</p>
</div>
</div>
</div>
You could look into using order property from utilizing flexbox. Check out the documentation here.
What you'd do is something like this:
<div class="container">
<div class="row flex">
<div class="col-md-6 col-md-offset-1 col-xs-12 first">Div 1</div>
<div class="col-md-4 col-xs-12 copyright-text second">Div2</div>
</div>
</div>
/* Make sure to use all the proper prefixers */
/* Allow this to be up to mobile of 767px */
#media all and ( max-width: 767px ) {
.flex { display: flex; }
.first { order: 2; }
.second { order: 1; }
}
Take a look at this codepen which will have a solution for you.
Switch the order of the columns (mobile first) and then use Bootstrap's column ordering:
<div class="row">
<div class="col-md-4 col-md-push-6 col-md-offset-1 col-xs-12 copyright-text">
<p>Copyright © <?php echo date("Y"); ?> Elliott Davidson. All Rights Reserved.</p>
</div>
<div class="col-md-6 col-md-pull-4 col-xs-12">
<?php
wp_nav_menu( array(
'menu' => 'footer',
'theme_location' => 'footer',
'depth' => 1,
'container' => 'div',
'container_id' => 'footer-nav',
'menu_class' => 'nav navbar-nav',
'fallback_cb' => 'wp_bootstrap_navwalker::fallback',
'walker' => new wp_bootstrap_navwalker())
);
?>
</div>
</div>
Bootply example
You could do that with flex box. Add a
class like this
<div class="row flexible"></div>
Css
#media (max-width:480px){
.flexible{
display:flex;
}
.flexible div:nth-child(1){
order:1;
}
.flexible div:nth-child(2){
order:2;
}
}
I managed to find a solution by adding a class to the col-md-6 and floating it right.
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-1 col-xs-12 footer-nav">
<?php
wp_nav_menu( array(
'menu' => 'footer',
'theme_location' => 'footer',
'depth' => 1,
'container' => 'div',
'container_id' => 'footer-nav',
'menu_class' => 'nav navbar-nav',
'fallback_cb' => 'wp_bootstrap_navwalker::fallback',
'walker' => new wp_bootstrap_navwalker())
);
?>
</div>
<div class="col-md-4 col-xs-12 copyright-text">
<p>Copyright © <?php echo date("Y"); ?> Elliott Davidson. All Rights Reserved.</p>
</div>
</div>
</div>
.footer-nav
float: right
<div class="row">
<?php
global $wpdb;
$rows = $wpdb->get_results( "SELECT id, firstname, lastname, email, phone, voucher FROM wp_offer_user", ARRAY_A);
foreach ( $rows as $row ) {
$rowid=$row[id];
if($row[voucher] == null) { print_r ($row[id]); ?>
<div class="col-sm-12 tabel_voucher clearfix">
<div class="col-sm-2 voucher_box clearfix">
<div class="col-sm-12 col-xs-6 voucher_data_head">
<span class="voucher_head">First Name</span>
</div>
<div class="col-sm-12 col-xs-6 voucher_data">
<?php echo $row[firstname] ?>
</div>
</div>
<div class="col-sm-2 clearfix">
<div class="col-sm-12 col-xs-6 voucher_data_head">
<span class="voucher_head">Last Name</span>
</div>
<div class="col-sm-12 col-xs-6 voucher_data">
<?php echo $row[lastname] ?>
</div>
</div>
<div class="col-sm-2 clearfix">
<div class="col-sm-12 col-xs-6 voucher_data_head">
<span class="voucher_head">Mail ID</span>
</div>
<div class="col-sm-12 col-xs-6 voucher_data">
<?php echo $row[email] ?>
</div>
</div>
<div class="col-sm-2 clearfix">
<div class="col-sm-12 col-xs-6 voucher_data_head">
<span class="voucher_head">Mobile No</span>
</div>
<div class="col-sm-12 col-xs-6 voucher_data">
<?php echo $row[phone] ?>
</div>
</div>
<div class="col-sm-2 clearfix">
<div class="col-sm-12 col-xs-6 voucher_data_head">
<span class="voucher_head">Register Date</span>
</div>
<div class="col-sm-12 col-xs-6 voucher_data">
10/01/1991
</div>
</div>
<div class="col-sm-2 clearfix">
<div class="col-sm-12 col-xs-6 voucher_data_head">
<span class="voucher_head">Voucher</span>
</div>
<div class="col-sm-12 col-xs-6 voucher_data">
<form id="form-voucher">
<div class="field-wrap">
<input type="text" name="voucher" class="offer-voucher" />
</div>
<button name="submit" class="offer-submit">Submit</button>
<div class="ajax-loader"></div>
<div class="login-error"></div>
</form>
</div>
</div>
</div>
<?php
}
}
?>
</div>
This my function.php.
//User Profile Update
function user_voucher_form() {
// The $_REQUEST contains all the data sent via ajax
if ( isset($_REQUEST) ) {
$voucher = $_REQUEST['voucher'];
$id = $_REQUEST['id'];
global $wpdb;
$wpdb->update(
'wp_offer_user',
array(
'voucher' => $voucher // string
),
array( 'id' => $id ),
array(
'%s' // value1
),
array( '%d' )
);
if ( is_wp_error( $id ) ) {
echo "Error";
}
die();
}
}
add_action( 'wp_ajax_user_voucher_form', 'user_voucher_form' );
add_action( 'wp_ajax_nopriv_user_voucher_form', 'user_voucher_form' );
I have update user profile form create. but value not store in db...which problem.....i have using WordPress wpdb.
How to create get result and update table...please help me
Your get_results query doesn't look correct. What's in $rows when you do var_dump($rows);?
Try formatting this way (see more query structures here):
$variable = $wpdb->get_results(
$wpdb->prepare('
SELECT `column3`
FROM `wp_table`
WHERE `column1` = %s
AND `column2` = %d
',
$var1,
123
),
OBJECT
);
Also, your update structure looks correct - but please confirm that the $voucher is indeed the data to update and $id is the where statement:
$wpdb->update(
wp_table,
array(
'column3' => $variable, // the column to update
),
array(
'column1' => 123, // the first WHERE argument
'column2' => 'value2', // additional WHERE argument!
),
array('%s'), // the format of the update value
array(
'%d', // the format of the first WHERE argument
'%s' // the format of the second WHERE argument
)
);
I would like to sperate fullcalendar body from the header. I want to show the header inside this div <div class="box-tools pull-right">
Can i do that?
Here is my code :
<div class="box box-success">
<div class="box-header with-border">
<h3 class="box-title">User Vacation</h3>
<div class="box-tools pull-right">
<button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
<button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
</div>
</div><!-- /.box-header -->
<div class="box-body no-padding">
<div class="row">
<div class="col-md-8">
<div class="pad">
<!-- Map will be created here -->
<div id="world-map-markers">
<?php
Modal::begin([
'id' => "modifyEvent",
'size' => 'modal-lg'
]);
echo "<div id='modalContent'> </div>";
Modal::end();
?>
<div class='row'>
<?= \yii2fullcalendar\yii2fullcalendar::widget(array(
'events'=>$model->getVacationDays(),
'options' => [
'id' => 'DashBoardCalendar',
'class' => 'DashboardCalendarClass'
],
'header' => 'false',
'clientOptions' => [
'firstDay' => '1',
'selectable' => true,
'selectHelper' => true,
'editable' => true,
'dayRender' => new JsExpression("function(date, cell) {
$.get('index.php?r=user-vacation-special-days/get-date', { date: date.format('YYYY-MM-DD')}, function(data){
cell.addClass(data);
});
}"),
'select' => new JsExpression("function(start, end) {
// $('#newEventModal').find('#startDate').val(start.format('YYYY-MM-DD'));
// $('#newEventModal').find('#endDate').val(end.format('YYYY-MM-DD'));
//$('#newEventModal').find('#user').val('".Yii::$app->user->username ."');
$('#modifyEvent').modal('show').find('#modalContent').load('index.php?r=user-vacation-days/create-with-attributes&start='+start.format('YYYY-MM-DD')+'&end='+end.format('YYYY-MM-DD'));
// $('#newEventModal').modal('show');
}"),
'eventDrop' => new JsExpression("function(event, delta, revertFunc) {
$.get('index.php?r=user-vacation-days/update-partion', { id: event.id , start : event.start.format(), end : event.end.format()}, function(data){
});
}"),
'eventResize' => new JsExpression("function(event, delta, revertFunc) {
$.get('index.php?r=user-vacation-days/update-partion', { id: event.id , start : event.start.format(), end : event.end.format()}, function(data){
});
}"),
'eventClick' => new JsExpression("function(calEvent, jsEvent, view) {
$('#modifyEvent').modal('show').find('#modalContent').load('index.php?r=user-vacation-days/update&id='+calEvent.id);
}"),
'defaultDate' => date('Y-m-d') //"2015-04-01"
],
));?>
</div>
</div>
</div>
</div><!-- /.col -->
<div class="col-md-4 calendarBoxRight">
<div class="row">
<div class="col-md-11 bg-green">
<div class="description-block margin-bottom">
<div class="sparkbar pad" data-color="#fff">90,70,90,70,75,80,70</div>
<h5 class="description-header">8390</h5>
<span class="description-text">Visits</span>
</div><!-- /.description-block -->
<div class="description-block margin-bottom">
<div class="sparkbar pad" data-color="#fff">90,70,90,70,75,80,70</div>
<h5 class="description-header">8390</h5>
<span class="description-text">Visits</span>
</div><!-- /.description-block -->
<div class="description-block margin-bottom">
<div class="sparkbar pad" data-color="#fff">90,70,90,70,75,80,70</div>
<h5 class="description-header">8390</h5>
<span class="description-text">Visits</span>
</div><!-- /.description-block -->
<div class="description-block margin-bottom">
<div class="sparkbar pad" data-color="#fff">90,70,90,70,75,80,70</div>
<h5 class="description-header">8390</h5>
<span class="description-text">Visits</span>
</div><!-- /.description-block -->
</div>
</div>
</div><!-- /.col -->
</div><!-- /.row -->
</div><!-- /.box-body -->
</div><!-- /.box -->