I have code for a random image in the php section of my page
$imagesDir = 'images/eggs/';
$images = glob($imagesDir . '*.{jpg,jpeg,png,gif}', GLOB_BRACE);
$randomImage = $images[array_rand($images)];
it will display an image with this code
echo "<img src='$randomImage'>";
but when i try to do this in the body section of the page like this
<body>';
}
function template_body_above()
{
global $context, $settings, $options, $scripturl, $txt, $modSettings;
echo !empty($settings['forum_width']) ? '
<div id="wrapper" style="width: ' . $settings['forum_width'] . '">' : '', '
<div class="forest">
<div id="egg1"></div>
</div>
<div id="header"><div class="frame">
<div id="baloon1">
<img src="egg.php"/> //tried including seperate php code
<img src="<?php echo $randomImage ?>"> //php on same page
</div>
I am showing for the image source ...%3C?php...
Any help on where I'm going wrong ?
Try this way:
function template_body_above()
{
global $context, $settings, $options, $scripturl, $txt, $modSettings;
echo ( (!empty($settings['forum_width'])) ? '<div id="wrapper" style="width: ' . $settings['forum_width'] . '">' : '') .
'
<div class="forest">
<div id="egg1"></div>
</div>
<div id="header"><div class="frame">
<div id="baloon1">
<img src="' . $randomImage . '">
</div>
Related
This my code. I have used: echo "<img src="" . (++$count % 2 ? $image : 'right') . "">"; to check if my image would show or it would just right in the src section, as a test but my image shows outside of the src code. I am not sure what to do now.
<main>
<?php
global $post;
$args = array(
'post_type' => 'stg_start'
);
$latest_posts = get_posts($args);
$description = the_field('start-description');
$count = 0;
?>
<div class="container">
<div class="row">
<div class="col-lg-6">
<?php
$image = the_field('start-image');
foreach ($latest_posts as $post) :
echo "<img src=\"" . (++$count % 2 ? $image : 'right') . "\">";
endforeach;
?>
</div>
<div class="col-lg-6">
<?php
foreach ($latest_posts as $post) :
echo "<h1>" . the_field('start-title') . "</h1>";
echo "<p>by " . " | " . the_field('start-date') . "</p>";
endforeach;
?>
</div>
</div>
</div>
</main>
</div>
I've got a bunch of images in a folder called img and am trying to do a foreach loop to loop over them and output them to the screen, but then adding a unique class to each image.
Here's what I have so far but it says $i is undefined, so I'm not sure I'm on the right track. I'm very new to this.
$dir = "img/gallery/*.jpg";
$classes = array('promotional', 'beaches', 'volunteers');
$images = glob( $dir );
foreach ( $images as $image ):
$class = $classes[$i++ % 3];
echo '
<div class="col-sm-6 col-md-4 col-lg-4 col-xl-4 mix ' . $class . '">
<div class="portfolio-item">
<div class="shot-item">
<a class="overlay lightbox" href="' . $image . '">;
<img src="' . $image . '" />;
<i class="lnr lnr-plus-circle item-icon"></i>
</a>
</div>
</div>
</div>
';
endforeach;
Thanks for any help!
I would modify the foreach a little bit like so:
$dir = "img/gallery/*.jpg";
$classes = array('promotional', 'beaches', 'volunteers');
$images = glob( $dir );
$i = 0;
foreach ( $images as $x => $image ):
$class = $classes[$i++ % 6];
echo '
<div class="col-sm-6 col-md-4 col-lg-4 col-xl-4 mix ' . $class . '-' . $x . '">
<div class="portfolio-item">
<div class="shot-item">
<a class="overlay lightbox" href="' . $image . '">;
<img src="' . $image . '" />;
<i class="lnr lnr-plus-circle item-icon"></i>
</a>
</div>
</div>
</div>
';
endforeach;
I think best way would be using two class rather than one unique.
First class will be use to detect item/content type,
and second will be unique to identify uniquely.
By doing this it will give you more control over content.
Here is little bit modification.
$dir = "img/gallery/*.jpg";
$classes = array('promotional', 'beaches', 'volunteers');
$images = glob( $dir );
foreach ( $images as $index => $image ):
$class = $classes[$i++ % 6];
echo "
<div class="col-sm-6 col-md-4 col-lg-4 col-xl-4 mix my-list-item-{$class} image-id-{$index}">
<div class="portfolio-item">
<div class="shot-item">
<a class="overlay lightbox" href="' . $image . '">;
<img src="' . $image . '" />;
<i class="lnr lnr-plus-circle item-icon"></i>
</a>
</div>
</div>
</div>
";
endforeach;
What changes:
Changes single quote(') to double quote(") to be able to parse variable inside string, like this {$class} or simply like this $class
added class to identify type of item, my-list-item-{$class} : will result like this this my-list-item-promotional
added class to identify as a unique item, image-id-{$index} : will result like this image-id-5
Use in css or js
CSS:
.my-list-item-promotional{background: green;}
.my-list-item-promotional.image-id-2{background: yellow;}
This will provide all promotional type content background green except item number 2
You can use jQuery to select element like CSS does.
Thank you.
You don't need to define your own $i; it already exists as the index of the $images array.
After you do $images = glob( $dir );, $images will be a numerically indexed array. So instead of explicitly incrementing a counter variable like this:
foreach ( $images as $image ):
$class = $classes[$i++ % 3];
You can just use the index from the array like this:
foreach ( $images as $i => image ):
$class = $classes[$i % 3];
<?php
$imageDir = "";
$images = glob($imageDir . '*.jpg');
foreach ($images as $image) {
?>
<div class="col-lg-3 col-md-4 col-xs-6">
<?php
$name = chop($image, '.jpg');
$filename = $image;
if (file_exists($filename)) {
$taken = "Screenshot Taken: " . date("F d Y H:i:s", filemtime($filename));
}
?>
<a data-gallery="example-gallery" style="text-decoration:none" href="<?php echo $image; ?>" class="d-block mb-4 h-100" data-toggle="lightbox" data-title="Player Name: <?php echo $name; ?>" data-footer="<?php echo $taken; ?>" data-max-width="800" >
<img class="img-fluid img-thumbnail" src="<?php echo $image; ?>" alt="">
<p><?php echo $name; ?></p>
</a>
</div><?php}?>
Hi . i created a image gallery with php . using glob function. but some images wont display , because those images starts with a #(hash) . EX: www.mysite.com/ss/#insta.jpg
iam using tags . is there any other way to view images like this in a
< img> tag
.
Encode the # in your URL
Replacing it with %23 should work
I get a free website layout just to learn and keep training my php skills. The website has some slides in the index, and when it was index.html, getting the images from my computer it worked alright. But now i'm searching the images in the database, and instead of slides different images, it's sliding the same images and putting all the rest under the slides. Enter here to see what i mean gabrielozzy.zz.vc/vertigo.
Well in HTML and CSS it worked alright, why it's wrong now if i didn't change the html/css ?
Here's the code:
<?php
$slides = listarSlides($conexao);
foreach($slides as $slide){
echo'
<section id="dg-container" class="dg-container">
<div class="dg-wrapper">
<img src="images/' . $slide['imagem'] . '"alt="image1" />
<img src="images/' . $slide['imagem'] . '"alt="image2" />
<img src="images/' . $slide['imagem'] . '"alt="image3" />
<img src="images/' . $slide['imagem'] . '"alt="image4" />
<img src="images/' . $slide['imagem'] . '"alt="image5" />
<img src="images/' . $slide['imagem'] . '"alt="image1" />
<img src="images/' . $slide['imagem'] . '"alt="image2" />
<img src="images/' . $slide['imagem'] . '"alt="image3" />
<img src="images/' . $slide['imagem'] . '"alt="image4" />
<img src="images/' . $slide['imagem'] . '"alt="image5" />
<img src="images/' . $slide['imagem'] . '"alt="image1" />
<img src="images/' . $slide['imagem'] . '"alt="image2" />
<img src="images/' . $slide['imagem'] . '"alt="image3" />
</div>
</section>';
}
?>
functions.php:
<?php
function listarSlides($conexao){
$slides = array();
$query = "select imagem from slides order by cod_slides LIMIT 13";
$resultado = mysqli_query($conexao, $query);
while($slide = mysqli_fetch_assoc($resultado)){
array_push($slides, $slide);
}
return $slides;
}
?>
Thanks !
You're trying to loop over the whole div with single image multiple times, where as you have to just loop over the images.
So try to put the section> out of the loop and insert just instance of $silde['imagem'].
try this in your php:
<section id="dg-container" class="dg-container">
<div class="dg-wrapper">
<?php
$slides = listarSlides($conexao);
foreach($slides as $slide){
echo'
<img src="images/' . $slide['imagem'] . '"alt="image1" />
';
}
?>
</div>
</section>
I have the following XML file:
<?xml version="1.0" ?>
<Videos>
<video>
<Title>Video Title</Title>
<SubHeading>SubTitle</SubHeading>
<url>UIIArHNaKtE</url>
<image>image.png</image>
<category>3</category>
<latest>0</latest>
</video>
<video>
<Title>Video Title</Title>
<SubHeading>SubTitle</SubHeading>
<url>UIIArHNaKtE</url>
<image>image.png</image>
<category>3</category>
<latest>0</latest>
</video>
<video>
<Title>Video Title</Title>
<SubHeading>SubTitle</SubHeading>
<url>UIIArHNaKtE</url>
<image>image.png</image>
<category>3</category>
<latest>0</latest>
</video>
</Videos>
With a model file:
<?php
class xmlmodel extends CI_Model{
public function catalog(){
$doc = new DOMDocument();
$path = '../application/libraries/VideoData.xml';
$doc->load($path);//xml file loading here
$data = $doc->getElementsByTagName('video');
return $data;
}
}
The Controller:
<?php
class SixD extends CI_Controller {
public function index($sixD = 'latestadditions') {
if (!file_exists('../application/views/page/' . $sixD . '.php')) {
// Whoops, we don't have a page for that!
show_404();
}
$this->load->model('xmlmodel');
$data['category_catalog_entity'] = $this->xmlmodel->catalog();
$this->lang->load('common/menu.php');
$this->lang->load('common/headings.php');
$this->lang->load('common/links.php');
$this->lang->load('common/footer.php');
$this->lang->load('page/' . $sixD . '.php');
$this->load->view('templates/common/header');
$this->load->view('page/' . $sixD, $data);
$this->load->view('templates/common/footer');
}
}
And view:
<div class="container">
<h1 class="pageheading">
<?php echo lang('heading_pageheading'); ?>
</h1>
<hr class="heading" />
<div class="row">
<div class="col-sm-12">
<div class="row">
<div class="col-sm-8 col-lg-9">
<?php foreach($category_catalog_entity as $result){ ?>
<div class="row videopane software">
<div class="col-sm-7 col-sm-push-5">
<h3 class="pageheading"><?php echo anchor('http://youtu.be/' . $result->getElementsByTagName('url')->item(0)->nodeValue, $result->getElementsByTagName('Title')->item(0)->nodeValue . '<br /><small>' . $result->getElementsByTagName( "SubHeading" )->item(0)->nodeValue . '</small>', array('class' => 'fancybox-media'));?></h3>
</div>
<div class="col-sm-5 col-sm-pull-7 text-center">
<?php echo anchor('http://youtu.be/' . $result->getElementsByTagName('url')->item(0)->nodeValue . '?autoplay=1', img("Thumbnails/" . $result->getElementsByTagName('image')->item(0)->nodeValue, $result->getElementsByTagName('Title')->item(0)->nodeValue, $result->getElementsByTagName('Title')->item(0)->nodeValue, "img-responsive img-thumbnail"), array('class' => 'fancybox-media')); ?>
</div>
</div>
<?php }
} ?>
</div>
<div class="col-sm-4 col-lg-3 software">
<?php $this->load->view('modules/menu'); ?>
</div>
</div>
</div>
</div>
</div>
This all works however I wish to define what video displays on which page so I have 2 tags:
<category>3</category>
<latest>1</latest>
and what I want to do is have all videos that have a category of 3 to display on that one page and ignore any other category number. The latest tag is used for new videos so this will either be 1 for active or 0 for do not display.
I should point out each page has a seperate view page but basically uses the same format. There is no database hence I am using XML to control this if anyone can give me some pointers would be very useful.
i do not know how you handle the whole case with the views/models. but with the actual architecture you wont get the wished result.
i made now a quick&dirty version how i would implement this.
public function catalog($category_id = 1)
{
$data = array();
//$path = '../application/libraries/VideoData.xml';
$path = '1.xml';
$xml = simplexml_load_file($path);
$json = json_encode($xml);
$array = json_decode($json, TRUE);
foreach ($array['video'] as $video)
{
if ($video['category'] == $category_id)
{
$data[] = $video;
}
}
return $data;
}
of course you could leave your original calatog method and use a new method to only get the wanted videos.
in this way you can call in your controller by an url-parameter the category and only return the filtered result to your view
*edit: as i said this is only quick&dirty... if you want keep your domdocument way :) its just for the idea
Ok solved this ended up dropping the model file and putting attributes on the xml file:
<Videos>
<video type="Module">
<Title>TITLE</Title>
<SubHeading>SUBHEADING</SubHeading>
<url>YOUTUBECODE</url>
<image>IMAGE.png</image>
<description>DESCRIPTIOM</description>
<link><![CDATA[<i class='fa-li fa fa-angle-double-right'></i>LINK]]></link>
<link2><![CDATA[<i class='fa-li fa fa-angle-double-right'></i>LINK]]></link2>
</video>
<video type="Module" id="1">
<Title>TITLE</Title>
<SubHeading>SUBHEADING</SubHeading>
<url>YOUTUBECODE</url>
<image>IMAGE.png</image>
<description>DESCRIPTIOM</description>
<link><![CDATA[<i class='fa-li fa fa-angle-double-right'></i>LINK]]></link>
<link2><![CDATA[<i class='fa-li fa fa-angle-double-right'></i>LINK]]></link2>
</video>
<video type="Common" id="1">
<Title>TITLE</Title>
<SubHeading>SUBHEADING</SubHeading>
<url>YOUTUBECODE</url>
<image>IMAGE.png</image>
<description>DESCRIPTIOM</description>
<link><![CDATA[<i class='fa-li fa fa-angle-double-right'></i>LINK]]></link>
<link2><![CDATA[<i class='fa-li fa fa-angle-double-right'></i>LINK]]></link2>
</video>
</Videos>
This allowed me to display individual 'videos' on the pages I wanted. Using:
<div class="col-sm-8 col-lg-9">
<?php if(file_exists('../application/libraries/VideoData.xml')) {
$xml = simplexml_load_file('../application/libraries/VideoData.xml');
$count = 0;
$counts = 0;
foreach($xml->children() as $child) {
$role = $child->attributes(); {
if($role["1"])
echo('<div class="media thumbnail software"><div class="' . (++$counts%2 ? "col-sm-5 text-center" : "col-sm-5 col-sm-push-7 text-center") . '">' . anchor('http://youtu.be/' . $child->url . '?autoplay=1', img("Thumbnails/" . $child->image, $child->Title, $child->Title, "media-object img-responsive img-thumbnail"), array('class' => 'fancybox-media')) . '</div><div class="media-body ' . (++$count%2 ? "col-sm-7" : "col-sm-7 col-sm-pull-5") . '"><h3 class="media-heading pageheading">'.anchor('http://youtu.be/' . $child->url . '?autoplay=1', $child->Title . '<br /><small>' . $child->SubHeading . '</small>', array('class' => 'fancybox-media')) . '</h3><hr class="heading"><p>'. $child->description .'</p><ul class="fa-ul"><li>' . $child->link .'</li></ul></div></div>');
}
}
} ?>
</div>
Or:
<div class="col-sm-8 col-lg-9">
<?php if(file_exists('../application/libraries/VideoData.xml')) {
$xml = simplexml_load_file('../application/libraries/VideoData.xml');
$count = 0;
$counts = 0;
foreach($xml->children() as $child) {
$role = $child->attributes(); {
if($role == "Module")
echo('<div class="media thumbnail software"><div class="' . (++$counts%2 ? "col-sm-5 text-center" : "col-sm-5 col-sm-push-7 text-center") . '">' . anchor('http://youtu.be/' . $child->url . '?autoplay=1', img("Thumbnails/" . $child->image, $child->Title, $child->Title, "media-object img-responsive img-thumbnail"), array('class' => 'fancybox-media')) . '</div><div class="media-body ' . (++$count%2 ? "col-sm-7" : "col-sm-7 col-sm-pull-5") . '"><h3 class="media-heading pageheading">'.anchor('http://youtu.be/' . $child->url . '?autoplay=1', $child->Title . '<br /><small>' . $child->SubHeading . '</small>', array('class' => 'fancybox-media')) . '</h3><hr class="heading"><p>'. $child->description .'</p><ul class="fa-ul"><li>' . $child->link2 .'</li></ul></div></div>');
}
}
} ?>
</div>
Depending what i wanted to display. Thanks for KURN's help as it made me look at different ways of acheiving this and ended up using:
http://us3.php.net/manual/en/simplexmlelement.attributes.php#113164
to assist me. Hope this helps anyone else :)