I have the following code:
<div class="container-fluid>
{files}
<div class="media">
<div class="media-left">
<img src="<?php echo base_url('files/{filename}'); ?>" alt="afbeelding" class="media-object" style="width:200px">
</div>
<div class="media-body">
<h4 class="media-heading">{title}</h4>
<p>{text}</p>
</div>
</div>
<br>
{/files}
</div>
The current result is just the title and text being shown, without the image. When I remove the whole div with class "media-body", the image shows. I think my code is structured right, I followed the w3-schools example. How can I get both the image and text to show up in the bootstrap media format?
Missing "
Change from
<div class="container-fluid>
to
<div class="container-fluid">
Related
I don't know why my images get positioned below each other even though they are inside a col-6 Bootstrap div. I want them to be next to each other, not below.
Code, in case it's unreadable in the text below: https://imgur.com/S6tSXng
Page: https://imgur.com/7FZl2lM
I have already tried putting the col-6 inside the foreach block, but it only made the second image smaller. I don't know what else to try.
<section id="listaoldal">
<div class="container">
<div class="row">
<div class="col-6">
<?php foreach ($characterDetails as $key):?>
<img data-toggle="modal" data-target="#<?= $key['modal']?>" class="img-fluid mx-auto d-block my-5 ddimages"src="characters/<?=$key['link'] ?>">
<?php endforeach;?>
Well, I expect the images to be next to each other like they should be not below.
foreach out of col-6.
<?php foreach ($characterDetails as $key):?>
<div class="col-6"><img ... /></div>
<?=endforeach?>
<section id="listaoldal">
<div class="container">
<div class="row">
<?php foreach ($characterDetails as $key):?>
<div class="col-6">
<img data-toggle="modal" data-target="#<?= $key['modal']?>" class="img-fluid mx-auto d-block my-5 ddimages"src="characters/<?=$key['link'] ?>">
<?php endforeach;?>
Actually your images are placed into one "col-6" you have to create one for each images, like this:
<div class="col-6">
<img .../>
</div>
<div class="col-6">
<img .../>
</div>
<div class="col-6">
<img .../>
</div>
...
Quick exemple of what you could use to make it work :
<section id="listaoldal">
<div class="container">
<div class="row">
<?php foreach ($characterDetails as $key):?>
<div class="col-6">
<img data-toggle="modal" data-target="#<?= $key['modal']?>" class="img-fluid mx-auto d-block my-5 ddimages"src="characters/<?=$key['link'] ?>">
</div>
<?php endforeach;?>
I recommend you to read more about Bootstrap's Grid system:
https://getbootstrap.com/docs/4.0/layout/grid/
**this is my home page ** i am showing data coming from mysql to card but is have same tag color i.e class="tag tag-pill tag-danger"
i am using ng-class={{hos.class}} /*class is a coloumn in table */
<div class="col-md-5" ng-repeat="hos in ho">
<div class="col-md-6">
<div class="card"> <img class="img-fluid" ng-src="{{hos.img}}" alt="">
<div class="card-img-overlay"> <span ng-class=" ">{{hos.tag}}</span> </div>
<div class="card-block">
<div class="news-title">
<h2 class=" title-small">{{hos.topic}}</h2>
</div>
<p class="card-text"><small class="text-time"><em>{{hos.time}}</em></small></p>
</div>
</div>
</div>
</div>
try ng-class="hos.tag" or class="{{hos.tag}}"
You are using ng-class incorrectly: its expression comprises of an object where each property is a class and the value is an expression to evaluate to conditionally apply that class when truth.
For example ng-class="{'active': button.active}"
Hopefully, this fiddle will help: jsFiddle
<html>
<div class="product-tile ">
<div class="product-image">
<img src="1.jpg">
<img src="2.jpg">
</div>
<div class="brand">
<a href="example1.html" class="brand-link">
Example1
</a>
</div>
<div class="product-name">
Craquelé-Effect Leather Square-Toe Mules
</div>
</div>
<div class="product-tile ">
<div class="product-image">
<img src="11.jpg">
<img src="12.jpg">
</div>
<div class="brand">
<a href="example2.html" class="brand-link">
Example2
</a>
</div>
<div class="product-name">
Craquelé-Effect
</div>
</div>
</html>
My content is like this in HTML and want to copy it on my website.
My code is like how to get the title, images, brand and there price. I've used file_get_html in it but I'm getting issue in fetching the datalike brand and price.
require('simple_html_dom.php');
$html = file_get_html('new_arrival.html');
//$product = [];
foreach ($html->find('div.wrap-desc') as $pro) {
$proDetails = $pro->find('div.brand');
}
If you are using jQuery you can get the contents of a DOM element using .html():
$('html').html()
Alternatively in vanillaJS:
let x = document.getElementByTagName('html')
console.log(x.innerHTML)
https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML
I am doing a project in codeigniter 3.3(latest version). Is there any method/function that is related to skip while inside the foreach? For example, I have 5 data in my table(ofcourse you need to use foreach in view to get all the data). The 3 images will be display on the top part and the last 2 will be display in the bottom part, is it possible
View
<div class="container-fluid proj-bottom">
<div class="row">
<?php foreach($getContent as $content){ if($content->id=="1"){ skip();}?>
<div class="col-md-4 col-sm-6 fh5co-project animate-box" data-animate-effect="fadeIn">
<?=$content->id?>
<a href="#fly" data-toggle="modal" data-animation="animated zoomInRight" ><img src="<?= base_url() .'uploaded/'. $content->img_path?>" alt="Free HTML5 Website Template by FreeHTML5.co" class="img-responsive">
<h3>Fly</h3>
<span>View</span>
</a>
</div>
<?php } ?>
</div>
</div>
You can use continue:
<div class="container-fluid proj-bottom">
<div class="row">
<?php foreach($getContent as $content){ if($content->id=="1"){ skip();}?>
<div class="col-md-4 col-sm-6 fh5co-project animate-box" data-animate-effect="fadeIn">
<?=$content->id?>
<a href="#fly" data-toggle="modal" data-animation="animated zoomInRight" ><img src="<?= base_url() .'uploaded/'. $content->img_path?>" alt="Free HTML5 Website Template by FreeHTML5.co" class="img-responsive">
<h3>Fly</h3>
<span>View</span>
</a>
</div>
<?php } ?>
</div>
</div>
The continue (Manual reference) will skip the current loop and go for the next record if it exists.
The break (Manual reference) will skip and quit the loop.
i am new to wordress
i want to make image gallery from basic bootstrap template
i have this template for example:
<div class="row portfolio-images">
<div class="col-md-3">
<img src="">
<a class="title" >title</a>
</div>
<div class="col-md-3">
<img src="" alt="">
<a class="title" >title</a>
</div>
<div class="col-md-3">
<img src="" alt="">
<a class="title" >title</a>
</div>
<div class="col-md-3">
<img src="" alt="">
<a class="title" >title</a>
</div>
</div>
i want to know how to create image database or gallery in wordpress in the panel
and get the images url in an array and do something like this:
<div class="row portfolio-images">
<?php
for(the array){ ?>
<div class="col-md-3">
<img src="<?php echo image url ?> ">
<a class="title" ><?php echo image title ?></a>
</div>
<?php }?>
</div>
because im lost right now and i need some guidence
There are various plugins that you can use to generate the gallery. If you need to generate one without plugin then you can define a custom post type and then add images post on the relevant post type, which then can be listed on the required page.
Usually I use ACF plugin to generate custom field and then list it on the page. You can check it more here: http://www.advancedcustomfields.com/resources/gallery/