I am using Wordpress to build a website. I have set images as slider with bootstrap. My css codes are:
min-width: 100%;
height: auto;
object-fit: contain;
overflow: hidden;
But it stretches itself unexpectedly. It shows it's height much more bigger than it supposed to be. It decreases its resolution also.
My index.php code is:
<div class="container">
<div class="row">
<div class="box">
<div class="col-lg-12 text-center">
<div id="carousel-example-generic" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators hidden-xs">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<?php $minipost = new WP_Query(array(
'post_type' => 'cover-slider',
'posts_per_page' => 3
));
$i = 1;
?>
<?php while($minipost->have_posts()): $minipost->the_post();?>
<div class="item<?php if ($i == 1) echo ' active'; ?>">
<?php the_post_thumbnail(array('thumbnail', 'class' => ' img-responsive img-full'));?>
</div>
<?php $i++; ?>
<?php endwhile;?>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
The original image is
But after using as a slider it shows....
Changing your css min-width: 100% to width: 100% should be working as min-width will force the image to scale back to it's original size rather than it's available spaces.
My answer is based on prediction due to lack of sample code.
Your the_post_thumbnail() arguments are off. Check out the syntax the_post_thumbnail() in the refs. To get your attachments at full size use
<?php the_post_thumbnail( 'full', array('class' => ' img-responsive img-full')); ?>
As first argument we pass the actual image size we want to display. Second argument are the image attributes.
Related
Good morning,
I'm currently developing on the understrap-child theme and I have an issue with a Bootstrap Carousel which I made into a repeater using Acf pro plug-in on Wordpress.
The issue is about the indicator arrows not working. The slider is perfectly working as a repeater, but the right arrow (carousel-control-next) does not work, only the left one allows me to interact with the slider.
I'm wondering if the issue is related to the repeater itself or with me making some stupid mistake I'm not able to see! PLEASE HELP ME
Here's my code:
<div class="container-fluid containerslider sliderdesktop container-home-sub ">
<div id="HomeCarouselIndicators" class="carousel slide" data-ride="carousel">
<!--indicators-->
<?php if( have_rows('slider') ): $i = 0; ?>
<ol class="carousel-indicators">
<?php while ( have_rows('slider') ): the_row(); ?>
<li data-target="#HomeCarouselIndicators" data-slide-to="<?php echo $i; ?>" class="<?php if($i == 0) echo 'active'; ?>"></li>
<?php $i++; endwhile; ?>
</ol>
<?php endif; ?>
<!--end of indicators-->
<div class="carousel-inner" role="listbox">
<?php // check if the repeater field has rows of data
$count = 0;
if( have_rows('slider') ){
//loop through
while ( have_rows('slider') ){
//define the row
the_row();
?>
<!-- Slide One - Set the background image for this slide in the line below -->
<div class="carousel-item subheader-carousel <?php if ($count==0) {echo "active";} ?>" style="background-image: url('<?php the_sub_field('slider_background'); ?>')" >
<div class="">
</div>
</div>
<a class="carousel-control-prev" href="#HomeCarouselIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#HomeCarouselIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
<?php
$count=$count+1;
}
}
?>
</div><!--end of carousel inner-->
</div><!--end of homecarouselindicators-->
</div><!--end container slider-->
At a glance, you have your controls inside your carousel-inner.
https://getbootstrap.com/docs/4.0/components/carousel/
Shows the controls being outside the carousel-inner but inside the carousel.
First post - be gentle :)
I've run into an issue with row height in Bootstrap (I think). I'm brand new to Bootstrap and I'm trying to do some basic edits to my Wordpress site and really want to further my knowledge. Previously I had 4 items equally distributed across the page and it looked great. Well, I've added a fifth item and it's been dropped to the next row below the first four but isn't low enough on the page and blocks the content of one of the original four items.
How can I adjust the height of the offending row(s) to drop the bottom item low enough to accommodate the upper row?
Link to the actual page: HERE
Please see image and code below.
Offending item
HTML from the entire page:
<?php
/*
template name:Home Page
*/
get_header();
?>
<!-- banner starts -->
<div class="banner">
<div data-ride="carousel" class="carousel slide" id="carousel-example-captions">
<ol class="carousel-indicators">
<li class="" data-slide-to="0" data-target="#carousel-example-captions"></li>
<li data-slide-to="1" data-target="#carousel-example-captions" class="active"></li>
<li data-slide-to="2" data-target="#carousel-example-captions"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<?php $slides = get_field('slides','4');
if(is_array($slides) and count($slides)>0){
$num=0;
foreach($slides as $slides_val) {?>
<div class="item <?php if($num==0) echo "active"; ?>">
<img src="<?php echo $slides_val['slide_image']['url']; ?>" alt="900x500" data-src="holder.js/900x500/auto/#777:#777" data-holder-rendered="true">
<div class="carousel-caption">
<div class="banner-heading">
<span><?php echo $slides_val['slide_content_heading']; ?></span>
</div>
<?php echo $slides_val['slide_content']; ?>
<!-- Contact Us-->
</div>
</div>
<?php $num++; } }?>
</div>
<!-- Controls -->
<a data-slide="prev" role="button" href="#carousel-example-captions" class="left carousel-control">
<span aria-hidden="true" class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a data-slide="next" role="button" href="#carousel-example-captions" class="right carousel-control">
<span aria-hidden="true" class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<!-- banner ends -->
<!-- content starts -->
<div class="content">
<div class="process-section">
<div class="container">
<div class="row">
<div class="process-heading">Our Process</div>
<div class="process-fillers-section">
<ul>
<?php
global $post,$paged;
$args = array(
'post_type'=>'process',
'orderby'=> 'post_date',
'order' => 'DESC'
);
$wp_query= new WP_Query($args);
$no_of_posts=$wp_query->found_posts;
while ($wp_query->have_posts()):$wp_query->the_post();
$src= wp_get_attachment_image_src(get_post_thumbnail_id($post->ID),'full');
?>
<li class="col-sm-4 col-md-4 col-lg-4">
<img src="<?php echo $src[0];?>" alt="" />
<div class="process-inner">
<div class="filler-title"><?php the_title(); ?></div>
<?php the_content(); ?>
<!-- Read More-->
</div>
</li>
<?php
endwhile;
?>
</ul>
</div>
</div>
</div>
</div>
<?php include('vip.php');?>
<div class="service-section">
<div class="container">
<div class="row">
<div class="process-heading">Our Services</div>
<div class="process-fillers-section">
<ul>
<?php
global $post,$paged;
$args = array(
'post_type'=>'services',
'order' => 'ASC'
);
$wp_query= new WP_Query($args);
$no_of_posts=$wp_query->found_posts;
while ($wp_query->have_posts()):$wp_query->the_post();
$src= wp_get_attachment_image_src(get_post_thumbnail_id($post->ID),'full');
?>
<li class="col-sm-3 col-md-3 col-lg-3">
<div class="process-fillers-image-section">
<img src="<?php echo $src[0];?>" alt="" />
<div class="process-category"><?php the_title(); ?> </div>
</div>
<p><?php the_excerpt(); ?> </p>
Read More
</li>
<?php
endwhile;
?>
</ul>
</div>
</div>
</div>
</div>
<div class="instagram-section">
<div class="container">
<div class="row">
<div class="process-heading">
<div><img src="<?php bloginfo('template_url');?>/images/instagram-icon.png" alt="" /></div>
#H2Htpe</div>
<?php echo do_shortcode('[instagram]'); ?>
</div>
</div>
</div>
</div>
<!-- content ends -->
<?php get_footer('footer'); ?>
Trying to use bootstrap, angular and carousel, to display images in their respective folders that are on my local drive but stuck on how to go about tailoring my angular file. Here is an example, but this example picks images from the Internet. How do i go about it.
here is the site with the source code http://www.cssscript.com/demo/responsive-image-carousel-with-angular-js-and-bootstrap-3/#abstract
here is the angular file.
app.controller('portfoliocontroller', ['$scope', '$http',
function($scope, $http) {
$scope.title = 'Our portfolio';
$scope.w = window.innerWidth;
$scope.h = window.innerHeight - 20;
$scope.uri = "http://lorempixel.com";
$scope.folders = [
'abstract',
'animals',
'business',
'cats',
'city',
'food',
'night',
'life',
'fashion',
'people',
'nature',
'sports',
'technics',
'transport'
];
$scope.images = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
$scope.currentFolder = $scope.folders[0];
$scope.selectFolder = function(folder) {
$scope.currentFolder = folder;
};
$scope.activeFolder = function(folder) {
return (folder === $scope.currentFolder) ? 'active' : '';
};
}
]);
here is the html file
<div class="container">
<!-- Carousel
================================================== -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" ng-repeat="img in images" class="{active : (img === 0)}" data-slide-to="{{img}}"></li>
</ol>
<div class="carousel-inner">
<div ng-class="{item: true, active : (img === 0)}" ng-repeat="img in images">
<img ng-src="{{uri}}/{{w}}/{{h}}/{{currentFolder}}/{{img}}" alt="Slide numder {{img}}">
<div class="container">
<div class="carousel-caption"></div>
</div>
</div>
</div>
<a class="left carousel-control" data-target="#myCarousel" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" data-target="#myCarousel" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
<!-- /.carousel -->
<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-botom" role="navigation">
<div class="container">
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li ng-repeat="folder in folders" class="{{activeFolder(folder)}}" ng-click="selectFolder(folder)"> <a ng-data-target="#{{folder}}">{{folder}}</a>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
If all you're trying to do is adapt that library to use your local folders you would just replace the uri with the base images folder or the like. Something like this.
$scope.uri = "path/to/my/images";
And your markup will reference the folders just the same:
<img ng-src="{{uri}}/{{currentFolder}}/{{img}}" alt="Slide numder {{img}}">
The width and height of the images will have to be formatted in the image itself or in css.
You can use this one. This is completely based on AngularJS and Bootstrap.
https://angular-ui.github.io/bootstrap/#/carousel
WordPress custom slider not running after loading the browser. I think the active class not working for every item but I can not fix it up. Please review the codes and help me---
Here is the JavaScript coding
jQuery(function($) {'use strict',
//#main-slider
$(window).load(function(){
$('#main-slider.carousel').carousel({
interval: 1000
});
});
});
Please review the custom post loop of the post. Here is the full site templates--
https://www.dropbox.com/s/fmqbjb9hahliwf6/mysite.zip?dl=0
<section id="main-slider" class="no-margin">
<div class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#main-slider" data-slide-to="0" class="active"></li>
<li data-target="#main-slider" data-slide-to="1"></li>
<li data-target="#main-slider" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<?php
global $post;
$c = 0;
$args = array( 'post_type' => 'slide',
'posts_per_page' => 5 );
$myposts = get_posts( $args );
foreach( $myposts as $post ) : setup_postdata($post);
$class = ''; $c++;
$slide_bg = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'slide-bg');?>
<?php if ( $c == 1 ) $class = ' active';
else $active = ''; ?>
<div class="item <?php echo $class; ?>" style="background-image: url(<?php echo $slide_bg[0];?>)">
<div class="container">
<div class="row slide-margin">
<div class="col-sm-6">
<div class="carousel-content">
<h1 class="animation animated-item-1"><?php the_title(); ?></h1>
<h2 class="animation animated-item-2"><?php the_content();?></h2>
<a class="btn-slide animation animated-item-3" href="#">Read More</a>
</div>
</div>
</div>
</div>
</div><!--/.item-->
<?php endforeach; wp_reset_postdata(); ?>
</div><!--/.carousel-inner-->
</div><!--/.carousel-->
<a class="prev hidden-xs" href="#main-slider" data-slide="prev">
<i class="fa fa-chevron-left"></i>
</a>
<a class="next hidden-xs" href="#main-slider" data-slide="next">
<i class="fa fa-chevron-right"></i>
</a>
</section><!--/#main-slider-->
Are you sure that you properly select the slider?
Because
$('#main-slider.carousel') means "give me slider with id=main-slider and class=carousel, but in your case as far as I can see from provided code must be
$('#main-slider .carousel').carousel({});
I currently have a div that changes to fixed position at the bottom of the page when shown on a phone resolution and is supposed to display the author content. When clicking this div a menu slides up using jquery. At this time, the div displays transparent, but when clicking on the location the div should be, it slides the menu open just like it should.
I'm not sure what's going on, but all the debugging I have done has led to nothing. Has anyone else experienced this, or know how to resolve it?
Here's the HTML/CSS for that piece:
<div id="secondaryBox" class="span6 pull-right">
<div id="author" class="collapsed">
<?php if(!empty($user['avatarPath'])){?>
<img src="<?php echo $user['avatarPath'] ?>" class="avatar avatar-50 photo avatar-default" height="50" width="50" />
<?php }else{
echo get_avatar( $current_user, 50);
} ?>
<h5><?php echo $user['displayName']; ?></h5>
<h6><span class="hidden-phone"><?php echo get_current_user_role($user['role']) ?>, </span><?php echo $user['schoolName']; ?></h6>
<div id="phoneCaret" class="circleCaret visible-phone"><b class="caret"></b></div>
</div>
<?php if ( current_user_can('read') ) { ?>
<div id="hiddenMenu">
<div class="addMenu hidden-phone collapsed">
<span>Additional Options </span>
<div class="circleCaret"><b class="caret"></b></div>
</div>
<ul id="slideOutMenu">
<?php if ( current_user_can('add_users') ) { ?>
<li><i class="icon-th-list icon-white"></i> Manage Users</li>
<?php if(is_super_admin($current_user->ID)){?>
<li><i class="icon-th-list icon-white"></i> Export Users</li>
<?php }?>
<li class="divider"></li>
<?php }
if ( current_user_can('manage_categories') ) { ?>
<li><i class="icon-plus icon-white"></i> Create School</li>
<li><i class="icon-tags icon-white"></i> Manage Categories</li>
<li><i class="icon-edit icon-white"></i> School Settings</li>
<li class="divider"></li>
<?php }
if ( current_user_can('manage_network_options') ) { ?>
<li><i class="icon-globe icon-white"></i> Network Sites</li>
<li><i class="icon-wrench icon-white"></i> Settings</li>
<li><i class="icon-cog icon-white"></i> WP Engine Settings</li>
<li><i class="icon-wrench icon-white"></i> Login Attempts</li>
<li class="divider"></li>
<?php } ?>
<li><i class="icon-home icon-white"></i> My Dashboard</li>
<li><i class="icon-globe icon-white"></i> Dewsly.com</li>
<li><i class="icon-user icon-white"></i> My Profile</li>
<li><a target="_blank" href="http://support.dewsly.com"><i class="icon-question-sign icon-white"></i> Support</a></li>
<li><a onclick="return confirm(\'Do you really want to logout?\')" href="<?php echo get_site_url(1); ?>/?my_error=logout"><i class="icon-off icon-white"></i> Logout</a></li>
</ul>
</div>
<?php } ?>
</div>
CSS:
#author{
position:fixed;
bottom:0;
left:0;
width:100%;
background-color:#212121;
height:70px;
z-index: 1001;
overflow:hidden;
cursor:hand;
padding:10px;
border-top:1px solid #595555;
}
#secondaryBox {
height: 0px;
position:fixed;
bottom:70px;
width:100%;
overflow:auto !important;
left:0;
z-index: 100;
}
After quite a bit more reading the issue was having a fixed position div within a scrolling div. The information given in the comments of the post linked from here gave me the guidance. Although that is frustrating, at least I know how to resolve the issue now.
http://remysharp.com/2012/05/24/issues-with-position-fixed-scrolling-on-ios/
ugly but working solution for this;
setTimeout(function() {
$("#fixedElement").css("right", "373px");
}, 100);
I am not sure why, after you change/set position of element, it becomes visible again.