MartinKyalo
(Kyalohmartin)
September 23, 2015, 4:30am
1
I have images stored in a folder under the web directory in a folder called images. I have used the code below to use images under that folder but they aren’t displaying.
<?php
echo Carousel::widget([
'items' => [
['content'=> Html::img('@web/001.jpeg')],
['content'=> Html::img('@web/images/slideshow/002.jpeg')],
['content'=> Html::img('@web/images/slideshow/003.jpeg')],
['content'=> Html::img('@web/images/slideshow/004.jpeg')],
['content' => Html::img('@web/images/slideshow/005.jpeg'),
],
],
]);
?>
Bushi
(Pedroguarimata)
September 23, 2015, 7:26am
2
hi kmartin try this:
<?php
echo Carousel::widget([
'items' => [
['content'=> Html::img('001.jpeg')],
['content'=> Html::img('images/slideshow/002.jpeg')],
['content'=> Html::img('images/slideshow/003.jpeg')],
['content'=> Html::img('images/slideshow/004.jpeg')],
['content' => Html::img('images/slideshow/005.jpeg'),
],
],
]);
?>
for example if your @web aliases is the route [b]/home/user/html/yourproject/web
[/b]
your browser will try to find the image in the yourpage /home/user/html/yourproject/web/001.jpg
but your image is in[b] ‘yourpage / 001.jpg’
[/b] I think that’s your mistake, i hope it heps you
MartinKyalo
(Kyalohmartin)
September 23, 2015, 10:33am
3
Bushi:
hi kmartin try this:
<?php
echo Carousel::widget([
'items' => [
['content'=> Html::img('001.jpeg')],
['content'=> Html::img('images/slideshow/002.jpeg')],
['content'=> Html::img('images/slideshow/003.jpeg')],
['content'=> Html::img('images/slideshow/004.jpeg')],
['content' => Html::img('images/slideshow/005.jpeg'),
],
],
]);
?>
for example if your @web aliases is the route [b]/home/user/html/yourproject/web
[/b]
your browser will try to find the image in the yourpage /home/user/html/yourproject/web/001.jpg
but your image is in[b] ‘yourpage / 001.jpg’
[/b] I think that’s your mistake, i hope it heps you
Thanks Bushy but that didnt help either. When i insert images on the view file like this
<?php echo Html::img('@web/images/4.jpg');?>
it is working fine. Is there a correct way of doing the same on the carousel widget?
Bushi
(Pedroguarimata)
September 23, 2015, 3:23pm
4
hi, so i have this code in one project:
<?php
echo Carousel::widget([
'items' => [
[
'content' => '<img src="files/1.JPG" />',
'caption' => '<h4>This is title</h4>',
],
[
'content' => '<img src="files/2.JPG" />',
'captions' => '<div> text </div>s',
],
[
'content' => '<img src="files/3.JPG" />',
'captions' => '<div> text </div>',
]
]
]);
?>
work fine, and apology, you’re right about the path of the image, It is that I had a similar mistake, and that was the problem.
in your browser console, see if you are getting images and make sure that the browser loads images
MartinKyalo
(Kyalohmartin)
September 29, 2015, 1:06pm
5
Hi Guys,
I didnt get the native yii2 carousel widget to work so i used the twitter bootstrap carousel on the view file like this
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="first-slide" src="images/slideshow/001.jpg" alt="First slide">
<div class="container">
<div class="carousel-caption">
</div>
</div>
</div>
<div class="item">
<img class="second-slide" src="images/slideshow/002.jpg" alt="Second slide">
<div class="container">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img class="third-slide" src="images/slideshow/003.jpg" alt="Third slide">
<div class="container">
<div class="carousel-caption">
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div><!-- /.carousel -->
and on the css
/* Carousel base class */
.carousel {
height: 500px;
margin-bottom: 30px;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
z-index: 10;
}
/* Declare heights because of positioning of img element */
.carousel .item {
height: 450px;
background-color: #777;
}
.carousel-inner > .item > img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 500px;
}
Hope it will help someone
<?php
use yii\helpers\Html;
use yii\bootstrap\Carousel;
?>
<?php
echo Carousel::widget([
'items' => [
[
'content' => Html::img('@web/img/banner.png'),
'caption' => '<h4>Artajasa Pembayaran Elektronis </h4>',
],
[
'content' => Html::img('@web/img/banner.png'),
'captions' => '<div> text </div>s',
],
[
'content' => Html::img('@web/img/banner.png'),
'captions' => '<div> text </div>',
]
]
]);
?>
and you can put image in folder web\img\name of your image
for example im using yii2 advance and i put my image in yii2advance\frontend\web\img\name of your image
it should be worked