Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I'm building a website which will show comics.
I'd like to store each image in a backend file, and then have the site access those files and display them on the front end. I do not want to create a new page for each image.
Basically like this:
Similar to what you'd see here:
http://doctorcatmd.com/2011-01-10/doctor-cat
or
http://xkcd.com/1004/
I'd like to know how I can achieve this. Do I need to learn a querying language? Or do I have to actually create a new page for each file I'd like to show...? Any advice would be helpful.
Thanks!
You don't have to create a separate file containing HTML for every image, doing that is unnecessary and complete overkill. Instead, on the server-side you can generate the page based on a predefined template and insert content wherever you like. You can do this using a server-side scripting language such as PHP.
As far as determining what to insert (in your case an image), that's typically done using parameters from the client, usually in the form of as HTTP GET variable. They're (usually) the key-value pairs you see at the end of a URL after the question mark (eg. http://example.com/article.php?id=3454).
A very basic example of a PHP script that could do what you want is as follows.
<html>
<body>
<?php
$images = array(
1 => 'peanuts.jpg',
2 => 'dilbert.png',
3 => 'phantom.png'
);
echo '<img src="/images/"' . $images[ $_GET['id'] ] . '">';
?>
</body>
</html>
A URL like http://example.com/comics.php?id=2 would show a page with the dilbert.png image on it.
Just off the top of my head, one way you could do this is to use PHP and set up a template page, and then use a query string to determine which comic to show. Something like:
<div id="comic">
<?php
$comic_id = htmlspecialchars($_GET["comic_id"]);
?>
<img src="<?php print $comic_id?>"/>
</div>
In this case your comic ID would be the name of the file and your URLs would look like http://www.example.com?comic_id=comic1.png
This way you have one .php file as the template, but you can have it show whichever image you'd like.
Of course it would require more code to write the pager, which would need to know what the first, previous, current, next, and last comics are. That would require some sort of mapping mechanism for listing and ordering them. You could use a backend MySQL database for that, or something lighter.
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
I am new to Wordpress. I am used to make websites from scratch.
I am currently working on a wordpress template (Astra).
I need to make a custom page using HTML,CSS,JS,Php from scratch and add it to my wordpress pages.. How can I do it?
I've google it and saw many approaches but didn't get anyone of it.. Some suggested to make a Parent/Child related pages but I don't know ..
Can I just put a .php file in the directory and make a link between it and wordpress pages?
How can I link css/js pages with them also ?
Simply Create a .php file with all the html css JS and php code. on Top add comment inside your file
<?php
/* Template Name: Custom Page HTML */
and then create a new page and Select new created Template and publish that page.
you can create this file inside your theme folder.
I would suggest creating a normal page in wordpress then in the back end editor you can edit the html raw. I usually use my JavaScript inside my html. As for the css you can edit that by going to the page you created when logged in, then clicking customize. There should be a additional css option where you can edit the styling.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I have right now one project on static HTML with two languages and I have to manage everything by myself.
So if something new appears in header/footer I have to update 20 HTML files.
Also this project is hosted on normal shared hosting.
How can I make less painful, if I have to change something?
Right now i just bulk find/change in folder with sublime.
P.S I can't use any CMS. Must be static.
Since it has to be static, you probably can't use PHP.
An alternative that works on modern browser would be to use Javascript to include the header and footer from another file.
You have several options, one is using jQuery load(). Example to include two files contained in the resources folder :
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Demo load for header and footer</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div id="header"><!-- HEADER COMES HERE --></div>
<!-- Main content comes here -->
<div id="footer"><!-- FOOTER COMES HERE --></div>
<script>
$(document).ready(function() {
$( "#header" ).load( "/resources/header.html" );
$( "#footer" ).load( "/resources/footer.html" );
}
</script>
</body>
</html>
Please, consider a fallback by filling the #header and #footer divs with a content that would be displayed if javascript is not enabled. Also consider a fallback if load() doesn't work (look at the doc for this, there is an example).
Suggestion One:
P.S I can't use any CMS. Must be static.
You can use the Jquery to load up the files that you have in the respective place based on the needs that you have.
.load( url [, data ] [, complete ] )
Description: Load data from the server and place the returned HTML into the matched element.
Note: The event handling suite also has a method named .load(). jQuery determines which method to fire based on the set of arguments passed to it.
Reference: http://api.jquery.com/load/
$(document).ready(function() {
$('#some-menu').load('some-local-path/menu.html');
});
Provided you can have the ID of the DIV as you given and then it will load up the data over to that place and you can change it dynamically.
<html>
<body>
<div id="some_menu">
<!-- Loads the Menu Part Over Here -->
</div>
<script>
$(document).ready(function() {
$('#some-menu').load('some-local-path/menu.html');
// Like wise you can load up all the data that you need over here and place the necessary div over to the HTML.
});
</script>
</body>
</html>
If it is not a static you can follow up with the below one as i have mentioned using the PHP.
Alternative Reference:
It is better to use PHP since it supports awesome features and you can create your own CMS using the PHP.
More Clear Explanations
Look for the items that are being static on to your site and it has to be shown in all the pages.
Copy them and place in the respective files namely header in the header.php and footer in footer.php and so on and then you need to do one more thing alone.
You need to include all the files that are being given by you and thats the trick.
Entire Page will look like.
<html>
<head>Title of the Page</head>
<?php include 'scripts.php'; ?>
<body>
<?php include 'header_menu.php'; ?>
// Page content
<?php include 'sidebar.php'; ?>
//Page Contents
<?php include 'footer.php'; ?>
</body>
</html>
Like this way you can do it for your header,footer and whatever files you need to do so and if you update the single file alone it will be replicating in all the files even tones of files you have.
Basic include example
The include() statement includes and evaluates the specified file.
The include command simply takes all the text that exists in the specified file and copies it into the file that uses the include command. Include is quite useful when you want to include the same PHP, HTML, or text segment on multiple pages of a website. The include command is used widely by PHP web developers. Like PHP Echo, include is not a function, but a language construct.
vars.php
<?php
$color = 'green';
$fruit = 'apple';
?>
test.php
<?php
echo "A $color $fruit"; // A
include 'vars.php';
echo "A $color $fruit"; // A green apple
?>
Put the HTML content of the header in a PHP file and include it in every page, like this:
<?php include('header.php'); ?>
This way you only have one file (header.php) to edit.
More details on include() can be found at: http://php.net/manual/en/function.include.php
as far as I understood if you want to manage many HTML files in a static web I think you need a HTML template.
I would recommend to use "http://handlebarsjs.com/" you can use it as well in static pages.
I hope it helps.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 3 years ago.
Improve this question
I am working on a project : I need to extract the text of a PDF file and put this text in a "div".
For the moment I managed to do it by using the tag <iframe>.
But it works only when I know the path of the PDF File like for instance : src="nameofthefile.pdf" or src="folder/nameofthefile.pdf"... And now I would like to have the same result but when this PDF file is uploaded by an extern users in front-end.
So I think about the tag <input id="input" type="file"> but when I used it alone with my PDF I manage but the text is still encoded ...
So here are my questions (sorry for this four questions ... :P)
0) Firstly is it easy to decode a PDF text so that I can use only the <input> tag ?
1) If not can we get back a file in input and stock it in an iframe ? (thanks to javascript)
2) If the answer to the second question is "no" does it exist a way to upload a PDF file in an iframe and to give to this frame a special "src"attribute. Or is it possible to define dynamically the attribute "src" (like in day-to-day language : "if a user uploads a PDF file, my programm is able to know that the PDF is at this precise place and so it can extract the text" ?
3) Or last question : is it possible to upload a file thanks to the tag <iframe> by using only javascript or maybe JQuery but no AJAX or PHP? If not which method I should work on it ?
(I don't really want to use backend technologies like PHP^^)
To sum up about my code : I integrated the code from https://github.com/hubgit/hubgit.github.com/tree/master/2011/11/pdftotext into my project. But you need to know the src of the PDF ...
Thank you.
I don't really know if you can "extract" the text out of a PDF. But i think the part with the "special" src attribut would be the easyest way to use php.
<?php
$file = //Some Code for choosing the newest file in a directory;
echo '<iframe src="',$file,'"></iframe>';
?>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I have following task:
I need to gather information from multiple <textarea> tags, format them a bit and save on hard drive preferably in CSV format.
Important note no. 1: that data source HTML document is a file on my local hard drive, it's not hosted on any server (this file is a product of export from some database management tool).
Important note no. 2: only script language engine available is python
I already do some effort on preparing some python script that embed CSS stylesheet links and JavaScript links into this HTML file to use and some jQuery library functions for displaying purposes.
Now, on specific action (i.e. "save" button click) I need to:
Search for filled <textarea> tags (jQuery job?)
Format them and glue in single variable preferably (jQuery as well)
Display "save as" dialogue
Save file on hard drive
Well as far as I know, JavaScript is not allowed to manipulate files on machine file system, so for writing file this should be some server-side script, is that correct?
Should this save script be triggered by "save as" button? (realized as submit form button)? If yes, can I run firstly some JavaScript function (gathering textarea data and format them) and later save this in file?
How this kind of data can be passed to this server-side script?
Thank you for all kind of help and advice.
EDIT:
I see that some users already point <a> tag with download attribute, but there is one additional issue: we have to assume IE as web browser, which by default does not support download attribute.
The correct answer was posted as a comment instead of as an answer for some reason. Code courtesy of gabrielperales:
JavaScript:
$(function(){
function toCSV(text){
var str= 'data:application/octet-stream;charset=utf-16le;base64,';
str += btoa(text);
return str;
}
$('#editor').on('change', function(){
$('#download').attr('href', toCSV($(this).val()));
});
});
HTML:
<textarea id="editor"></textarea>
<br/>
<a id="download" href="" download="file.csv">Download</a>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
What I mean is that when creating multiple pages currently I always have to copy paste the header, navigation and footer boilerplate. And while it isn't all too hard to do(can basically copy-paste an emmet line and have it handle everything). I was wondering if there is a way where I wouldn't have to do that be it server side or as a plugin/addon for sublime text.
The current idea I have is to perhaps create a server side js which I could then possibly import on every page, though I know almost no js to pull that off.
Any suggestions?
In Html5 you can use the object tag to include a file.
Basically you create a single file containing your header and the common code that goes on each page.
Then on every page of your site you add
<object name="includedfile" type="text/html" data="page.inc"/>
where you need the content to appear.
Edit:
Check also jquery if you prefer to use javascript. There are easy functions to achieve the same result like:
$.get('test.html')
.success(function(data) {
$('div.content').html(data);
});
Where test.html is the page that you want to load and div.content is the place where you want to put the loaded code.
The only answer which works pre HTML5 is to learn PHP and/or install a system which allows you to use page templates. Most web servers have PHP installed.
Your page would then look something like this:
<?php
include "header.php";
?>
<!-- your html page code here -->
<?php
include "footer.php";
?>
At this point I would recommend you move into a more robust web language. Here are some options.
Ruby on Rails (yay!)
PHP
ASP.NET (yech)
You will definitely want more of the powerful features once you begin working on more complex websites.