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/
Related
I have created ACF Fields for Wordpress User page Text and image When I try to display on single.php its not showing nither image or text is showing below is screenshot for refrence.
https://prnt.sc/ezFU-JPZH3Rs
<ul class="list-unstyled">
<li>
<div class="row">
<div class="col-4">
<div class="home-blog-author">
<?php
$avatar_image= get_field('user_image', 'user_'. $author_id );
?>
<picture>
<img src="<?php echo $avatar_image['url']; ?>" class="img-fluid" alt="<?php echo $avatar_image['alt']; ?>">
</picture>
</div>
</div>
<div class="col-8 align-self-center ps-0">
<div class="home-author-name">
<h5><?php //echo the_field('user_name', 'user_' .$author_id); ?></h5>
</div>
</div>
</div>
</li>
<li>
<i class="fas fa-calendar-alt"></i>
<span><?php echo get_the_date('d/m/Y'); ?></span>
</li>
</ul>
You know that in your snippet you have the name text commented out, right? Otherwise you have multiple possible failure points. Off the top of my head:
Are you sure you're retuning the html as expected (with or without the ACF data)? If not, then you may have the wrong template or other problems. If so:
Are you sure you have the ACF user_image field set to return an array - and in particular for the user you're testing?
Have you tried returning the ACF field by key rather than field name? That sometimes helps.
In wordpress i developed one theme heaving one portfolio section i applied lazy load.
i am facing problem with images not shown in proper manner(proper size).
enter image description here
<div class="col-lg-4 col-md-6 portfolio-item <?php echo strtolower($tax); ?>">
<div class="portfolio-wrap">
<img src="<?php the_field('image_loader', 'option'); ?>" data-echo="<?php echo $url; ?>" class="img-fluid " alt="">
<div class="portfolio-info">
<h4><?php the_title();?></h4>
<div>
<i class="ion ion-eye"></i>
<i class="ion ion-android-open"></i>
</div>
</div>
</div>
</div>
js file name echo.min.js
https://drive.google.com/drive/folders/1DHLLdv3CTEmukndqy8f-EUln6uYddcYy
reference youtube
https://www.youtube.com/watch?v=wUz6KYREkWM&t=654s
<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 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">