I'm trying to display images on a webpage, using file paths queried from an SQL database. However, when I follow the link I only see one image (the second in the SQL table) which is incorrectly displayed as an icon and the title. I think the issue is with the echo statement, so could someone have a look? Thanks.
This is the link I follow from the selection page:
<a href="index.php?spain_2014">
<img src="congost.jpg" alt="congost" id="congost">
</a>
Then it passes through the controller, index.php:
else if(empty($_SERVER["QUERY_STRING"]) !== true)
{
$gallery_name = $_SERVER["QUERY_STRING"];
$rows = query("SELECT * FROM {$gallery_name}");
render("gallery_template.php", ["title" => "Gallery", "rows" => $rows]);
}
And is rendered in the gallery template:
<div id="gallery_images">
<!-- Gallery -->
<?php
foreach($rows as $row)
{
echo("<img src=\"~/vhosts/final_project/public/galleries/" . $row["filepath"] . "/>");
print($row["title"]);
} ?>
</div>
Related
I have a menu of Home About Blog Templates Contact.
There is a table in my database called Categories.
The items in my table are Home About Blog Templates Contact.
These five items are being pulled from my database by my header.php file for my website.
What I want is to be able to click on each category and it display a specific .php file I have.
for instance if I click home it will display my index.php
clicking about displays my about.php
clicking blog displays my blog.php file etc.
I am not sure how to go about this ?
I am following a tutorial on Udemy as a guideline but, I need further assistance.
This is the php code at the top of my header.php file
<?php
include("includes/config.php");
include("includes/db.php");
$query = "SELECT * FROM categories";
$categories = $db->query($query);
?>
This is the code that is pulling my menu from the database
<?php if(isset($_GET['category']) || strpos($_SERVER['REQUEST_URI'] , "index.php") === false) { ?>
<a class="" href="index.php">Home</a>
<?php }else { ?>
<a class="" href="index.php">Home</a>
<?php } ?>
<?php if($categories->num_rows > 0) {
while($row = $categories->fetch_assoc()){
if(isset($_GET['category']) && $row['id'] == $_GET['category'] ){ ?>
<a class="" href="index.php?category=<?php echo $row['id']; ?>"><?php echo $row['text']; ?></a>
<?php } else echo "<a class='' href='contact.php?category=$row[id]'>$row[text]</a>";
} }?>
Essentially, what is going on in this code is when I click home it displays my index.php file and the code in my index.php file display code from another table I have.
However, when I click the about blog templates and contact categories it will only display the contact.php file for each category I have.
Thus, when I click About Blog Templates Contact only the Contact.php file displays.
I need a starting point on how to build on this where I can tell the code if about, blog, templates, contact is click on then display it's respective file.
The question is how do I use the categories in my database as my variables.
I was thinking using else if statements such as else if categories is = about then display. about.php
else if categories is = blog then display blog.php
If there are any free resources or books I can use to figure this out it would be much appreciated.
EDIT
The Table has only is called categories
ID Text
1 About
2 Blog
3 Templates
4 Contact
There no data stored in the table. All the table structure is ID & Text. The Text is being displayed as the menu and each Text has its associated ID. To be clear the HOME button is apart of the menu but, its not in the category table. I hope this is enough information.
Where you have this in the loop's else block:
} else echo "<a class='' href='contact.php?category=$row[id]'>$row[text]</a>";
Note the href has contact.php for all links.
What I believe that your trying to achieve, based on the categories, is:
} else echo '<a class="" href="' . $row['text'] . '.php?category=' . $row['id'] . '">' . $row['text'] . '</a>';
...so that you set the link's file name to match the category name in the link?
I have a basic table in a wordpress site that looks like this: https://jsfiddle.net/4fcpdgs8/
Right now the table is hard coded with values found in the html but ideally I would like it to be dynamic based on the values in the MYSQL database. I have seen some solutions that involve php such as:
global $wpdb;
// this adds the prefix which is set by the user upon instillation of wordpress
$table_name = $wpdb->prefix . "your_table_name";
// this will get the data from your table
$retrieve_data = $wpdb->get_results( "SELECT * FROM $table_name" );
?>
<ul>
foreach ($retrieve_data as $retrieved_data){ ?>
<li><?php echo $retrieved_data->column_name;?></li>
<li><?php echo $retrieved_data->another_column_name;?></li>
<li><?php echo $retrieved_data->as_many_columns_as_you_have;?></li>
<?php
}
?>
</ul>
<?php
But one wrinkle is that one column is a url for an html image tag so doing the above just displays the url.
So, I would rather do something that would enable me to just reference the sql results like:
<img src=[mysql_image_column_row_one]>
<img src=[mysql_image_column_row_two]>
Rather than just displaying the sql results in a table. Sidenote: I know very little php and it is quite mysterious to me!
you can use this for images
<?php echo '<img name="myimage" src=' . $retrieved_data->column_name
. ' width="60" height="60" alt="imagedesciription" />'?>;
You must adept the image size or even resize the image.
You can use img tag with an image path inside li tag in foreach loop.
<li><img src='path_to_image_folder/<?php echo $retrieved_data->image_name?>'></li>
Im using lightgallery so i need to load images before call them in lightgallery. Problem is that images are large so it takes too much time to load. Is there any way to load that specific gallery when user click on link.
<div id="lightgallery-<?php echo get_the_ID(); ?>" class="hidelightgallery">
<?php
foreach ($files as $image) {
$image_attributes = wp_get_attachment_url( $image->ID );
$attachment_title = get_the_title($image->ID);
$caption = get_post_field('post_excerpt', $image->ID);
?>
<a class="item" href="<?php echo $image_attributes ?>" data-sub-html="<?php echo $attachment_title; ?> <?php if($caption!= '') echo ' - ' ?> <?php echo $caption ?>"><img src="<?php echo $image_attributes ?>"></a>
<?php } ?>
</div>
Now what i want is if user click for example link with this id then do foreach. Is that possible?
Just follow these steps,
create new template / html page where you will write html and populate by foreach loop
add your id = lightgallery whole code to that html page
when you will click on your link (which you mentioned) fire an ajax
Ajax function will get some id or number of images need to show or your logic on how you will populate data in foreach loop
in php you will get all relevant data, and you will populate that data in html file you created in step 1
php function will return that data to ajax function
Ajax function will get all your dynamic html data
populate that html where ever you want or just append that html wherever you want
Go step by step, this will solve your problem.
I have something that im currently working on, however it appears that the $_GET doesn't completely work.
I have a JavaScript light box that brings up an image in a little window, this works however i can only guess that it is using the same URL over and over again.
However when i view the source for the page (and even click one of the links in the source) it will display the correct data.
But the lightbox only seems to display the first image.
This is the JavaScript
<script>
//Checkes if any key pressed. If ESC key pressed it calls the lightbox_close() function.
window.document.onkeydown = function (e)
{
if (!e){
e = event;
}
if (e.keyCode == 27){
lightbox_close();
}
}
</script>
<script>
//This script makes light and fade divs visible by setting their display properties to block.
//Also it scrolls the browser to top of the page to make sure, the popup will be on middle of the screen.
function lightbox_open(){
window.scrollTo(0,0);
document.getElementById('light').style.display='block';
document.getElementById('fade').style.display='block';
}
</script>
<script>
//This makes light and fade divs invisible by setting their display properties to none.
function lightbox_close(){
document.getElementById('light').style.display='none';
document.getElementById('fade').style.display='none';
}
</script>
I wont show the CSS i dont think thats relivant (If someone wants it then ask away)
The relevant part that creates the links is this, its part of a ForEach statement all PHP
$i = 0;
foreach ($nrows as $nrow)
{
$id = $nrow['id'];
$rid = $nrow['RaidID'];
$bid = $nrow['BossID'];
$normal = $nrow['NormalKills'];
$heroic = $nrow['HeroicKills'];
$boss = substr($nrow['BossName'], 0, 3);
$p1 = $id + $bid.".php";
$image = $boss . $p1;
#echo $image;
echo $bid;
if ($oid != $rid)
{
$i = 0;
}
if ($i == 0) {
?><td style="width: 176px;"><center><b><?php echo $nrow['raid']; ?> </b></center></td> </tr><?php
$i++;
}
?><tr><td style="width: 176px;"><div align="left"><?php echo $nrow['BossName']; ?><div id="light"><img src="bossdata/template.php?boss=<?php echo $bid;?>"></a></div><div id="fade" onClick="lightbox_close();"></div>
</div>
<?php
if ($heroic == 0)
{
if ($normal > 0)
{
echo '<img src="images/whiteskull.png" align="right" alt="Normal Kill">';
}
else
{
echo '<img src="images/redx.png" align="right" alt="Not Killed">';
}
}
else
{
echo '<img src="images/redskull.png" align="right" alt="Normal Kill">';
}
?>
</td></tr><?php
$oid = $id;
}
Now this all works, and it actually displays an image with data, however no matter what link i click the boss data is always from the first one on the list.
To me this means that the data is getting through, and reaching the the right parts on image so its "Working", but all the links do the same thing and show the same data :(
*Removed last code Bulk
You have multiple div with the same ID "light" since you create them in a foreach loop.
<div id="light">
Your function lightbox_open() opens all the divs that have id "light".
document.getElementById('light').style.display='block';
That's why you always see the first lightbox. Because the others are behind the first one.
you should try something like this :
function lightbox_open(elem){
window.scrollTo(0,0);
elem.getElementByClass('light').style.display='block';
elem.getElementByClass('fade').style.display='block';
}
And change this :
<a href="#" onclick="lightbox_open();">
By this :
<a href="#" onclick="lightbox_open(this);">
And replace id by class in your div definition :
<div class="light">
$_GET is working correctly in your code.
The issue is in the way you are combining JavaScript and PHP in the second code box. First, all of your divs have the same ID: "light" which is wrong because they all IDs are meant to be unique within the HTML document. You need to identify them uniquely, for example appending the BossID to them.
After identifying each div uniquely you'll have to edit lightbox_open and lightbox_close so they can receive the BossID of the divs that you want to show and hide.
Right now the header has a bit of code in it that queries the section name and then uses that section name as the h1 title in the page. It works fine. However, I want to selectively break that operation in certain categories and give myself the ability to manually enter the h1 title for a given section. Here's what I'm struggling with: how can I maintain the automatic query and title selection in most instances, but selectively break it in a given category (the 'blog' category, for starters)?
Thanks for taking a look, I appreciate your help!
Here's the code that drives the existing function (it's the get_the_section_name part):
<?php if(!is_home()){?>
<div class="section <?php echo get_the_section_name();?>">
<?php
$sectitle = get_the_section_name();
$sectitle = str_ireplace("-"," ",$sectitle);
echo '<h1>' . $sectitle . '</h1>';?>
<p class="breadcrumbs">
<?php
if(function_exists('bcn_display'))
{
bcn_display();
}
?>
</p>
</div>
<div class="columns">
<?php } ?>
Here's a page that shows what it looks like displayed (see the title in the blue graphic underneath the main nav near the top of the page): http://69.20.59.228/category/blog/
Insert following code before line
echo '<h1>' . $sectitle . '</h1>';?>
Simply add more elements to $special_categories array
$special_categories = array(
"blog" => "Special blog title",
"other category" => "Another special category title",
);
if (array_key_exists($sectitle, $special_categories)) {
$sectitle = $special_categories[$sectitle];
}