How to display php image gallery inside a div? - php

My website has two div columns: a vertical navigation menu and main content. I used php to navigate different pages of my website to the main div (similar to this php example)...(eg. index.php?pg=about_us --> get content from /page/about.html). But one of the pages I want to display this gallery (http://sye.dk/sfpg/) on the main div.
How to display my gallery correctly in the main div (installed under /pages/gallery/index.php) (eg. width about 700px)? I have the same problem if the navigation menu is pointed to an external website. (let's say google) The size and charset are not displayed correctly while using div. Thank you.
<?php
// ...blah blah blah
$pgname = isset($_GET['pg']) ? trim(strip_tags($_GET['pg'])) : 'index';
//....
?>
// starts html, header and body
<div class="left_col">
<nav id="navigation">
<ul>
<li>Home</li>
<li>News</li>
<li>Gallery</li>
<li>Donate</li>
<li>About Us</li>
</ul>
</nav>
</div>
<section class="main_col clearfix">
<?php
if ($pgname != 'gallery'){
echo file_get_contents('pages/'. $pgname. '.html');
} else {
echo file_get_contents('http://google.com/'); // this doesn't work, and neither work with '/pages/gallery/index.php'
}
?>
</section>

Simplified, the above becomes:
gallery.php:
<?php
$name = 'gallery'; // Fixed for this example.
$html_gallery = 'pages/'. $name . '.html';
?>
<html>
<section>
<?php include $html_gallery ?>
</section>
</html>
pages/gallery.html:
<img src="/images/foo.jpg">
<img src="/images/bar.jpg">
<img src="/images/baz.jpg">
gallery.php would render much like this:
<html>
<section>
<img src="/images/foo.jpg">
<img src="/images/bar.jpg">
<img src="/images/baz.jpg">
</section>
</html>
So as you can see, it is up to you to style the output.

I like your idea a lot... but I think it would be much easier for you to use JavaScript and AJAX for this. Also, this approach will prevent the page from reloading!
EDIT - So, if you say you have both HTML and PHP files to use, an ext parameter (extension) in your events will do the trick. - EDIT
My idea would be to give an onclick event on each li calling a JavaScript function, let's say onclick="getContent(page, ext)". So of course you need to replace page to whatever string you like, let's say gallery; and ext to any extension you need as a string, let's say php.
Sample result:
<li onclick="getContent('news', 'html')" title="News">News</li>
<li onclick="getContent('gallery', 'php')" title="Gallery">Gallery</li>
Now, let's build our JavaScript-AJAX stuff. What we first need to do is create the function and place it right after the <body> tag inside a <script> tag, of course. Then remember to add an id to your main column, in the following example it will be content.
<script type="text/javascript">
function getContent(pageName, ext){
var url = "pages/"+pageName+"."+ext, // gallery.php - news.html
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function(){
if (xhttp.readyState == 4 && xhttp.status == 200) {
document.getElementById("content").innerHTML = xhttp.responseText;
}
};
xhttp.open("GET", url, true);
xhttp.send();
}
</script>
So now this function creates the request and gets the data from your URL and then places all the HTML in it inside your section. Of course, make sure that the HTML file contains only what you need inside the section.
Your main column in HTML should look like this:
<section class="main_col clearfix" id="content"></section>
- EDIT -
About the pre-made single file PHP gallery and resizing problem... I saw the demo and I think I know how it works... my advice is to make sure you set a width to your main_col section because the content given by the demo seems to be lots of div's with a class thumbbox which happens to be arranged by CSS display:inline-block so it should just work fine like that.
But the biggest problem I see is that once you load the content on your page, it will not work unless you include(); (PHP) the file or at least the source code for your single page PHP gallery, because you will only load the HTML and I also see that it uses the JavaScript onclick event just like my idea.
What I can say is that to help you solve this thing entirely, I should be able to see how you're implementing this library and many other things. I think you can work it out tho if you include the file like I said (so that the PHP code loads and hopefully prints the necessary JavaScript).
Also, the charset might be solved using PHP utf8_encode(); or utf8_decode();. Use the first one to encode from ISO-8859-1 to UTF8 and the second one for the other way round.

Related

How do I link to a specific section on another page on Wordpress

I'm new to Wordpress and PHP and this might be a dumb question, but I'm trying to link one of my menu items to one of the sections on my index page.
I know that if I just wanted to link it to the index I should use this:
<?php echo home_url(); ?>
But I want the link to send the user to the "About" section. Basically, I need to know how to do this:
index.php#about
but with PHP.
Thank you!
You're on the right track.
The ideal way to do this would be to add a <a name="about></a> tag to the appropriate section of your template. This is called an HTML anchor and is how those #tags know where to point to.
Given that this is Wordpress, you could probably also get away with just appending that to the title of the appropriate section. So wherever you specified 'call this section "About"', you could probably redo it as 'call this section "<a name="about">About</a>"' and then you'll be able to link to it using anchors like in your example-- About
If you are new to php, maybe you should use wordpress's editor ?
In your page (in the admin page), you can put any html you want.
In the editor, you can add custom links (with anchors or not) and you can put a div tag in the "html" tab.
So if you put your link at the top of your page and put your section in a div id="myanchor", it should do it !
You shouldn't do this with HTML or PHP but rather with JS. Specifically for long pages and require in-page navigation, I really like the scrollTo jQuery plugin.
In practice, you'll have some HTML containers that look something like this:
<!-- Your menu -->
<ul>
<li id="about-button"></li>
<li id="product-button"></li>
<li id="something-button"></li>
<li id="else-button"></li>
</ul>
<!--Your page sections-->
<main class="my-page">
<section id="about"></section>
<section id="product"></section>
<section id="something"></section>
<section id="else"></section>
</main>
Once you've included jQuery and the scrollTo plugin, you'll have some JS that looks like this:
$('#about-button').click(function() {
$.scrollTo($('#about'), {
duration: 800,
offset: -50
});
return false;
});
The JS is saying that once you click on the #about-button, take 800 milliseconds and animate the page down to -50px before the position of the #about HTML element. You could just setup a series of click functions for each button and you'd have a slick in-page nav system.

If I want to mark as active page in the navigation menu in menu.php

I used 'include' php to separate header of my website.
So, I can easily fix if I need to change the navigation menu part in the header, instead fixing more than 20 pages each.
My question is I like to add a class, 'current' in the one of navigation button.
For example, if I am in 'Home' page, then I want to change font color of 'Home' button to red.
If I move to 'Contact' page, I want 'Contact' button to be changed to red and want 'Home' button to normal color.
Since all navigation button codes are in the header.html.
How can I add class 'current', so users can know which page they are looking at?
Thanks in advance.
If you are using php then you can set it like this.
1) Give class to each link
<li class="home">Home</li>
<li class="about">About</li>
<li class="contact">About</li>
Note : Give filename & classname same (If filename is home.php then class for this menu is "home")
2) In header.php use this code.
<?php
$class = basename($_SERVER['REQUEST_URI'], '.php?' . $_SERVER['QUERY_STRING']);
/* This basename function returns filename from url. For example if url is http://www.example.com/home.php?id=15, then this will return "home" only. */
?>
<script type="text/javascript" src="jquery.min.js"> <!-- Link your jquery library -->
<script type="text/javascript">
$(document).ready(function(){
$(".<?php echo $class; ?>").addClass('current');
});
</script>
This is a very basic and unsafe example, just so that you hopefully get the idea.
Find out first what page you're on, maybe you have a URL parameter called page that you call like index.php?page=home or index.php?page=contact.
<?php $page=$_REQUEST['page']; ?>
Then write your HTML:
Home<br>
Contact
Now add the class-checks to your links:
Home<br>
Contact
(This uses fancy inline IF statements, just because they fit the purpose so nicely. If you don't know them yet, I recommend to read up on them.)
If your $page variable is set to "home", this will generate the HTML source like so:
Home<br>
Contact
You could also include the entire class assignment into the PHP check:
<a href="index.php?page=home"<?=($page=='home'?' class="current"':'');?>>Home</a><br>
<a href="index.php?page=contact"<?=($page=='contact'?' class="current"':'');?>>Contact</a>
And that would generate the HTML source like this:
Home<br>
Contact
The most practical way would be to quite simply make a little function that generates everything for you, like for example this one:
<?php
function makeNavLink($pageName){
global $page;
$link='<a href="index.php?page='.$pageName.'"';
$link.=($page==$pageName?' class="current"':'').'>';
$link.=ucwords($pageName).'</a>';
return $link;
}
?>
That would allow you to call the function in your page like this:
<?=makeNavLink("home");?><br>
<?=makeNavLink("contact");?>
And it would also make the HTML output look like this if your page is "contact":
Home<br>
Contact
I can't comment because I don't have 50 rep, but I did some research and found this link How to have the class=“selected” depending on what the current page/url is. $_SERVER['REQUEST_URI'] is the approach that is used in this example. So if you need further clarification, you can look that up too.
Edit: This example does not require JQuery. Or you could try this:
<div class="menu">
<div id="whatever" class="whatever">
<ul>
<li><a href="index.php" <?php if (basename($_SERVER['PHP_SELF']) == "index.php") { ?> class="current" <?php } ?>>Home</a></li>
<li><a href="about.php" <?php if (basename($_SERVER['PHP_SELF']) == "about.php") { ?> class="current" <?php } ?>>About</a> </li>
</ul>
</div>
</div>

Add content to PHP file with PHP / edit PHP file with PHP

I'm building my own CMS system and I want to create new pages dynamicly from a template. Just like in wordpress when you add a new Page.
This is the template:
<?php require_once('backend-nav.php');?>
<div id="main">
<div id="main-content" class="xlarge">
<article id="article-wrapper">
// My content needs to go here!
</article>
<?php require_once('backend-sidebar.php')?>
</div>
</div><!-- End main content container -->
<?php require_once('backend-footer.php')?>
<?php } else {
echo '<div class="container">You have to be logged in to view this page:.
'Login'.'</div>';
}
?>
I have made a form to submit the content that I want on the page, and then use the following code to open the templatet php file and save it as a new file on the server with the content for the page
$doc = new DOMDocument();
$doc->loadHTMLFile("new_page.php");
$article = $doc->getElementById('article-wrapper');
$p = $doc->createElement('p');
$addP = $article->appendChild($p);
$content = $doc->createTextNode($page_content);
$addP->appendChild($content);
// the url for the page is also submitted to the form and later added to the menu, which works.
$doc->saveHTMLFile($page_url.'.php');
Since there is no loadPHP function I'd recon I use this one. It also worked for me when adding the link to my main menu, which is also a PHP file.
Now the content gets added to the file, and is saved accordingly but for some reason it fucks up the code in some places like this, some sign are replaced like ? and > etc.:
require_once('backend-header.php');
?>
<?php if (isset($_COOKIE['username'])) { ?>
<?php require_once('backend-nav.php');?>
<html>
<body>
<div id="main">
<div id="main-content" class="xlarge">
<article id="article-wrapper">
<p>test content added in p tags</p></article>
<?php require_once('backend-sidebar.php')?> </div><!-- End main content container -->
</div>
<?php require_once('backend-footer.php')?><?php } else {
echo '<div class="container">You have to be logged in to view this page: ' .
'Login'.'';
}?></body></html>
the PHP ending tag before the html end tag is replaced
I have also tried fread/write to alter the file but I probably are not using things the right way.
Is there a way to add code to php file with php, or a other way to get what I'm trying to do?
Thanks!
DOMDocument only use to read XML and HTML, these have a structure. When you insert PHP code into html file, it is not realy a html anymore. Let see an example below.
The html code:
<a>text</a>
There is a node that named "a" have a content. DOMDocument can understand it well.
But
<a><?php if (false) : ?>true</a><? else: ?>false</a><?php endif ?>
DOMDocument can not understand php and it will read the first < /a> as the closer of < a>. How about the second one, the reader may try to read by fixing it or just ignore it or append something to make it become structured. So, you can not use DOMDocument in this case. You could try to use file_get_contents and replace the content then use file_put_contents to write it back.

Anchor links in php file point to index.html

I have a file index.php containing mostly HTML and a bit of PHP. I have declared ids for some elements (e.g., <h2 id="contact">Contact</h2>) and provide links to them (cf. below).
<ul>
<li>Contact</li>
</ul>
The links work fine when clicked (i.e., the user is taken to the anchor point), but they point to, e.g., index.html#contact, so that when the page is reloaded, you get a 500 error.
How can this behaviour be avoided? And why does it occur anyhow?
I'm using the YAML CSS framework btw.
You can use javascript to scroll on your element so URL doesn't change and when you reload the page has the starter URL.
Try to use this :
<ul>
<li>Contact</li>
</ul>
<h2><a id="contact">Contact</a></h2>
or
<script>
function getPosition(element){
var e = document.getElementById(element);
var left = 0;
var top = 0;
do{
left += e.offsetLeft;
top += e.offsetTop;
}while(e = e.offsetParent);
return [left, top];
}
function jumpTo(id){
window.scrollTo(getPosition(id));
}
</script>
<ul>
<li>Contact</li>
</ul>
<h2>Contact</h2>
UPDATE:
Why don't you hack it with js :)
location.replace("http://www.w3schools.com");
UPDATE END
The hash (#) inside link means an "ID" of an element within the same page.
href="#id" .. means index.php/#id <-- scroll to an id element
href="link" .. means index.php/link <-- redirect to file called 'link'
Also you need in htaccess enable to redirect to file without file extension. e.g. php / html
Your problem
Check your existing htaccess
That's weird because it is supposed to work. As others suggest, have a look at your error logs. In the mean time you can try this quick fix:
Instead of having #contact in your <a> you can put the full url using the help of php like this:
<html>
<head>...</head>
<body>
<ul>
<li>Contact</li>
</ul>
<h2 id="contact">Contact</h2>
</body>
</html>
<?php
function getPageUrl(){
return 'http://' . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'];
}
?>
This should make your <a> look like this
Contact

PHP - Get dimension of HTML tag

I'm trying to get some attributes for HTML tags in a web page.
<html>
<head>
<title>test page</title>
</head>
<body>
<div id="header" class="clearit" role="banner">
<div id="headerWrapper">
<ul id="primaryNav" role="navigation">
<li id="musicNav" class="navItem">
Music
</li>
<li id="listenNav" class="navItem">
Radio
</li>
<li id="eventsNav" class="navItem">
Events
</li>
<li id="chartsNav" class="navItem">
Charts
</li>
<li id="communityNav" class="navItem">
Community
</li>
<li id="originalsNav" class="navItem">
Originals
</li>
</ul>
</div>
</div>
</body>
</html>
For example, I need the actual height and width for #headerWrapper and compare it with #musicNav in my PHP script. Since PHP is server-side, I can't get these attributes so I'm thinking to append Javascript code to calculate these attributes and store them in a JSON file like in this code:
<script type="text/javascript">
document.ready(function() {
var JSONObject= {
"tagname":"headerWrapper",
"height":$("#headerWrapper").height(),
"width":$("#headerWrapper").width()
},
{
"tagname":"musicNav",
"height":$("#musicNav").height(),
"width":$("#musicNav").width()
}
});
});
</script>
Then I'd like to read it in the php file that contains my algorithm to extract visual features from web pages. So I need to render the web page with appended Javascript using some browser. I'm using exec to send the new file to Firefox, like this:
exec('"C:\Program Files (x86)\Mozilla Firefox\firefox.exe" "http://localhost/Autoextractor/test.html" 2> errors.txt');
And Firefox opens in taskmanager but does not dispaly, the page is not rendered, and my appended Javascript code is not executed.
safe_mode=off - disabled_functions deleted from php.ini and when executing
exec("whoami");
The result is my user (note: my user in Administrator group) and I did try wscript with no result.
Does anyone have any idea why it's not working, or has another solution to get the dimensions of HTML tags?
Simply running a browser won't allow you to read any data back from it, so forget about using system.
You can use Selenium Webdriver to control a browser with PHP, run JavaScript, then return the result.
When you write your real JavaScript, you will need to fix the syntax errors that appear in the example you included in the question.
Keep in mind that the size of elements on screen will depend on factors such as installed fonts, chosen font size, browser, window size, etc. You can get a result for a browser running on your system, but you can't depend on it to be a universal result.
"have another solution to get Get dimension of HTML tags?"
Something wrong with Firebug/Inspect, which will give you rendered offsets with a few simple operations.
Run your code in a console if you want to do it programmatically, though you'll still need firebug/Inspect to find the right selectors (which really obviates the ability to do any of this automatically). Trying to log it all... well, it sounds like you're trying to keep a database... perhaps you should set one up.
This might be a problem that you need to add more context to get a useful response.

Categories