I am looking to load all images from specific folders into my website. Currently, I have to copy and paste this HTML code and change each individual file name. Is there a way that I can dynamically load each image into this same HTML?
<div class="item">
<div class="item__content">
<img src="img/Underwater/1.jpg" alt="img02" />
<h3 class="item__title">Retro irony sartorial <span class="item__date">05/05/2015</span></h3>
<div class="item__details">
<ul>
<li><i class="icon icon-camera"></i><span>Canon PowerShot S95</span></li>
<li><i class="icon icon-focal_length"></i><span>22.5 mm</span></li>
<li><i class="icon icon-aperture"></i><span>ƒ/5.6</span></li>
<li><i class="icon icon-exposure_time"></i><span>1/1000</span></li>
<li><i class="icon icon-iso"></i><span>80</span></li>
</ul>
</div>
</div>
</div>
This while use glob to search for jpgs within your designated file path. Just change the file extension (if needed) and the image folder that you are pulling the images from.
<?php
$directory = "imagepath";
$images = glob($directory . "/*.jpg");
foreach($images as $image)
{
echo "<img src=".$image.">";
}
?>
If you are looking to do it using only plain HTML, that won't be possible.
To load all you images dynamically, you'd have to use server-side code, PHP or Javascript (through Node.js for example).
Related
I've got 2 versions of a site, a live testing version and a local version.
I'm currently working on the local version, using MAMP. The backend of both sites is identical, I've ensured that the admin of each site is exactly the same.
I'm trying to add images to the site via the Edit Page section, but the images aren't displaying.
I inspected the site to see any errors, none were found, however I came acrosss something interesting.
After comparing the html markup of the 2 site versions side by side, I noticed that my local version is missing the the div that displays images.
Here is the div on the live version -
Here is the my local version, in which the div is not being shown -
As you can see in the local version there is a ul instead of div class="image-16-8.
Here is the php file that is displaying these images
<?php
function tbhHeroShortcode($atts)
{
$values = shortcode_atts(array(
'images' => '',
'first-line' => '',
'second-line' => '',
'video' => '',
'link' => '',
), $atts);
ob_start();
?>
<div class="hero">
<?
$images = decode_shortcode_data($values['images']);
if ($images): ?>
<ul data-simple-slider>
<?php foreach ($images as $image): ?>
<li>
<div class="image-16-8" style="background-image: url(<?= $image->url; ?>); "></div>
</li>
<?php endforeach; ?>
</ul>
<?php endif; ?>
<div class="hero-content">
<div class="hero-content-first-line">
<h1 class="header"><?= decode_shortcode_data($values['first-line']) ?></h1>
</div>
<h1 class="italic-header"><?= decode_shortcode_data($values['second-line']) ?></h1>
<div class="hero-content-cta">
<a class="hollow-button" href="<?= decode_shortcode_data($values['link']) ?>">Learn More</a>
</div>
</div>
<?php if (count($images) > 1): ?>
<div class="hero-controls">
<i class="fa fa-chevron-left hero-controls__left" aria-hidden="true"></i>
<i class="fa fa-chevron-right hero-controls__right" aria-hidden="true"></i>
</div>
<?php endif; ?>
</div>
<?php
$component = ob_get_contents();
ob_end_clean();
return $component;
}
add_shortcode('tbhHero', 'tbhHeroShortcode');
Does anyone have any idea of why this is happening?
Well the ul is showing because it's right there in your php
<div class="hero">
<?
$images = decode_shortcode_data($values['images']);
if ($images): ?>
<ul data-simple-slider>
However, on your screenshot from the live version your hero div is different, it looks like this
<div class="hero" id>
The output you are seeing is not being generated by the same file, so either there is some browser/server caching going on and what you are seeing from the live site doesnt reflect the current state of your php, or somehow your php file updates are out of sync between your two environments.
I would guess that the difference between the two sites is in the "edit page" area of whatever page is serving as the home page. I would expect that local version has a shortcode called [tbh-hero] on it with image listed, while the other one doesn't have any images listed or perhaps doesn't have a shortcode on it at all. But, honestly, there are a lot of ways that that code could be implemented within the structure of a given theme.
I am working on local machine and my URL is:
http://localhost:91/GlobalVision/index.php?mm=1&sm=1
<? $mm=$_GET["mm"];
$sm=$_GET["sm"]; ?>
<ul class="sidebar-menu">
<li class="header">MAIN NAVIGATION</li>
<li class=" <? if($mm==1) echo "active" ?> treeview">
<a href="#">
<i class="fa fa-dashboard"></i> <span>Dashboard</span> <i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li <? if($mm==1 && $sm==1) echo "class=\"active\"" ?>><i class="fa fa-circle-o"></i> Dashboard1</li>
<li <? if($mm==1 && $sm==2) echo "class=\"active\"" ?>><i class="fa fa-circle-o"></i> index2</li>
</ul>
</li>
</ul>
i have created this file as separate menu file and included in other php files.
i wanted url as:
http://localhost:91/GlobalSDK/index
I tried writing:
^([a-zA-Z]+)/$ index.php?mm=$1&sm=$2 [L]
this rules in .htaccess file but it gives me error.
What should be the rule to achieve this. Even when index page get change it should display only page name not parameters. What should be the rule for this?
Try these methods
1) Use a form and POST the information.
2) Use session variables to carry information from page to page.
3) Use "encoded" or non-sensical information in the QueryString in
place of the real data.
I'm trying to make a simple php page using includes and I'm finding it hard to navigate the urls using ../ to locate the right path to the folder.
Is there an easy way to construct a simple php navigation. Only doing it locally without using mysql and etc.
<a class="list-group-item" href="index.php">Overview <i class="fa fa-tachometer fa-fw"></i></a>
<a class="list-group-item" href="ticket/tickets.php">Tickets <i class="fa fa-ticket fa-fw"></i></a>
<? php
$indexURL = ('project/*');
?>
<div id="sidebar" class="sample">
<div class="search">
<input type="search" placeholder="Search..."> <i class="fa fa-search fa-2x"></i>
</div>
<div class="list-group">
<a class="list-group-item" href="<?php echo '$indexURL' ?>/index.php">Overview <i class="fa fa-tachometer fa-fw"></i></a>
This line will write out $indexURL, literally. If you want the value of $indexURL, remove the single quotes.
<?php echo '$indexURL' ?>
To get absolute path to your document root use:
$_SERVER['DOCUMENT_ROOT'];
This should return c:\wamp\www
Or /opt/www
Or your location to apache document root.
To test this simply type:
echo $_SERVER['DOCUMENT_ROOT'];
To get the folder location use
echo basename(__DIR__);
will return the current directory name only
echo basename(__FILE__);
will return the current file name only
echo basename(dirname(__FILE__));
Will return the location of the php file that is running the code.
Lets take 3 files for example
home.php
test/pics.php
test/images/editor.php
in your pics.php you need to use functions in editor.php, so you use
Pics.php:
require_once dirname(__FILE__) . '/images/editor.php';
Home.php
require_once 'test/pics.php';
I've been stuck on this all morning and I don't think i'm that much further.
I'm trying to display a wordpress menu, I then want to display all the child pages for the parent menu, all the child pages have thumbnails and I want these to show to.
I'me trying to add the thumbnails into the ing tag in the child pages
Here's how I went the code to look
Parent menu
<nav>
<a href="#" >Sample Page 1</a>
<a href="#" >Sample Page 2</a>
</nav>
Child menu
<ul class="sample_page_1">
<li>
<a href="#">
<img src="image.jpg" alt="img05">
<h4>Belts</h4>
</a>
</li>
<li>
<a href="#">
<img src="image.jpg" alt="img05">
<h4>Belts</h4>
</a>
</li>
</ul>
<ul class="sample_page_2">
<li>
<a href="#">
<img src="image.jpg" alt="img05">
<h4>Belts</h4>
</a>
</li>
<li>
<a href="#">
<img src="image.jpg" alt="img05">
<h4>Belts</h4>
</a>
</li>
</ul>
Here's the code I have so far but it's not doing what it should, it's not displaying the images and I can't figure out how? Not even sure it's it the correct way to do it?
<ul>
<?php
$menu_name = 'shoes';
$items = wp_get_nav_menu_items($menu_name);
foreach ( $items as $item){
echo '<li>'.$item->title.'</li>';
}
?>
</ul>
Thanks
Testing this on my end yielded satisfactory results. This will affect ALL menus, so feel free to add additional logic to only target certain menus.
You'll probably have to style it to make it look a bit better, but just drop this into your functions.php file:
add_filter('walker_nav_menu_start_el', 'maiorano_generate_nav_images', 20, 4);
function maiorano_generate_nav_images($item_output, $item, $depth, $args){
if(has_post_thumbnail($item->object_id)){
$dom = new DOMDocument(); //DOM Parser because RegEx is a terrible idea
$dom->loadHTML($item_output); //Load the markup provided by the original walker
$img = $dom->createDocumentFragment(); //Create arbitrary Element
$img->appendXML(get_the_post_thumbnail($item->object_id, 'thumbnail')); //Apply image data via string
$dom->getElementsByTagName('a')->item(0)->appendChild($img); //Append the image to the link
$item_output = $dom->saveHTML(); //Replace the original output
}
return $item_output;
}
I am trying to copy a website to my local machine. I have downloaded all the code, and things like page redirection, and importing work fine. But displaying images, css, and using javascript doesn't seem to work.
<?php
$root = $_SERVER['DOCUMENT_ROOT'];
include ($root . '/resources/config.php');
echo "$imagepath/user_suit.png";
?>
<div class="sidebar1">
<ul class="nav">
<li>
<div id="loginLink" class="menu" onmousedown="return false;" >
<img src="
<?php
echo $imagepath
?>/user_suit.png" width="15" height="14" alt="Member Login"> Member Login
</div>
</li>
</ul>
Welcome Guest!
</div>
<script type="text/javascript">
$("#loginLink").click(function(){
// load contact form onclick
$("#contentPane").hide();
$("#loadingPageGif").show();
$("#contentPane").load("
<?php
echo $server
?>/code/login/Studentlogin.php",
function() {
$("#loadingPageGif").hide();
$("#contentPane").fadeIn();
});
});
</script>
In this code, the embedded image does not load, and clicking on the link does nothing.
I can right click on the unloaded image, go to view image, and it correctly displays.
I can put echo lines in $root . '/resources/config.php' and they show up correctly.
The site I downloaded it from does not have these issues, so I am guessing it has something to do with xampp.
The browser adds http://, you should make that
<div id="loginLink" class="menu" onmousedown="return false;" > <img src="http://localhost:82/public_html/images/user_suit.png" width="15" height="14" alt="Member Login"> Member Login </div>