<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
Related
I need my gallery to show images that are saved within my database please. So rather than me using the images source tag, I need the gallery to be filled with what's saved in the database please. So essentially showing the user all the images that ONLY belong to them if that makes sense? I guess the html code of the gallery should fall within the php while loop ?
The html gallery code:
<div class="row">
<div class="grid-full">
<h3>ALL OF MY COMPETITION ENTRIES</h3>
<div class="masonry">
<div class="item">
<img alt src="Images/Nude.jpg" class="ImgRound">
</div>
<div class="item">
<img alt src="Images/LakeDistrict.jpg" class="ImgRound">
</div>
<div class="item">
<img alt src="Images/MarbleCase.jpg" class="ImgRound">
</div>
<div class="item">
<img alt src="Images/HeadwoodBeach.jpg" class="ImgRound">
</div>
<div class="item">
<img alt src="Images/MacDesk.png" class="ImgRound">
</div>
<div class="item">
<img alt src="Images/CoffeeonTable.jpg" class="ImgRound">
</div>
<div class="item">
<img alt src="Images/SilverMarble.jpg" class="ImgRound">
</div>
<div class="item">
<img alt src="Images/Peonies.jpg" class="ImgRound">
</div>
<div class="item">
<img alt src="Images/Trousers.jpg" class="ImgRound">
</div>
<div class="item">
<img alt src="Images/Greys.jpg" class="ImgRound">
</div>
<div class="item">
<img alt src="Images/Sunset.jpg" class="ImgRound">
</div>
<div class="item">
<img alt src="Images/Grey2.jpg" class="ImgRound">
</div>
<div class="item">
<img alt src="Images/Nature.jpg" class="ImgRound">
</div>
<div class="item">
<img alt src="Images/autumn.jpg" class="ImgRound">
</div>
<div class="item">
<img alt src="Images/Tulips.jpg" class="ImgRound">
</div>
<div class="item">
<img alt src="Images/Pink.jpg" class="ImgRound">
</div>
<div class="item">
<img alt src="Images/Outfit.jpg" class="ImgRound">
</div>
<div class="item">
<img alt src="Images/BandW.jpg" class="ImgRound">
</div>
<div class="item">
<img alt src="Images/TheLakeDistrict.jpg" class="ImgRound">
</div>
<div class="item">
<img alt src="Images/FlowerTable.jpg" class="ImgRound">
</div>
</div>
</div>
</div>
My Tables:
I think my PHP query would look something like this:
<?php
$query = "SELECT * FROM `tblImage` WHERE `fldMemberID` = 1";
$result = $conn -> query($query);
while($row = $result -> fetch_assoc()) {
?>
<img src="<?php echo $row['fldFilePath']; ?>"> <br>
<?php
}
$conn -> close();
?>
UPDATE: After running the code, the following errors I get this appear where the gallery should be:
The answer was given by another user #RiggsFolly in the comments, further up in the code I had used a $conn -> close(); by deleting this the code ran fine.
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 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">
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/
I got an article that is read from the database. Which is in a wrapper, I needed an image to be full width (so even wider than the wrapper) while still being in the article. So I split it on the image tag like the code below.
However this prevents a user from adding multiple images. When I add another image tag it doesn't show the image.
How can I split the article not just on one image but every image?
All data (text, img tags) is in 'introtext'.
For example:
<p>Part one of the article</p>
//Here the article is split on all img tags that are there.
<img src="#">
<img src="#">
<img src="#">
<img src="#">
<p>Part two of the article</p>
The below code only works when I add one image tag.
<div class="container relative" style="padding: 0px;">
<div class="row">
<div class="col-sm-12">
<div class="blog-item mb-20 mb-xs-40">
<!-- Text -->
<div class="blog-item-body">
<?
$introtext = $contenti[0]['introtext'];
$splitartikel = preg_split('/(<img[^>]+\>)/i', $introtext, -1, PREG_SPLIT_DELIM_CAPTURE);
echo $splitartikel[0];
?>
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid relative" style="padding: 0px;">
<div class="row">
<div class="col-sm-12">
<div class="middleimage">
<?
echo $splitartikel[1];
?>
</div>
</div>
</div>
</div>
<div class="container relative" style="padding: 0px;">
<div class="row">
<div class="col-sm-12">
<div class="blog-item mb-20 mb-xs-40">
<!-- Text -->
<div class="blog-item-body">
<?
echo $splitartikel[2];
?>
</div>
</div>
</div>
</div>
</div>
The query:
// Articles
$content = "SELECT * FROM `lb_content` WHERE alias = '".$conn->real_escape_string($_GET['alias'])."' ";
$contentcon = $conn->query($content);
$contenti = array();
while ($contenti[] = $contentcon->fetch_array());
I also tried looping the middle part, but this also loops the text before and after the image, while I only want to have the option to have multiple images.
Like this:
<?php foreach($splitartikel as $part) : ?>
<div class="container-fluid relative" style="padding: 0px;">
<div class="row">
<div class="col-sm-12">
<div class="middleimage">
<?php echo $part; ?>
</div>
</div>
</div>
</div>
<?php endforeach ?>
Maybe I need to do some sort of foreach loop for every image tag?