So I made myself a little html/css template. And now I'm trying to actually use it with some PHP code however, it only renders text. The images and css arent there. Everything is in the templates/Default directory. Do i have to do something funky with my paths in the template?
Use firebug and see why the images don't show up. You need to activate the "NET" tab and then you see all the requests being made when your browser requests the page. My guess is that the paths to CSS and images are incorrect.
Wow, that's a weird question... :)
Just check what URLs the browser requests when looking for the stylesheets/images. I think you will have to adjust paths that you use in your smarty template.
Yes probably, sorry it is always a pain with linking images and css - seems simple, but isn't always!!!
Is there a space being create for where the images should be? If so, right click and see the path the image is calling in and make sure it is uploaded there.
Otherwise, use a tool like firebug (firefox plugin) to find out where the css and images are being called in, or just right click and 'view source of the page' then just make sure everything is being called in from the right place! If needs be, put direct urls for the images ie. www.mysite.com/templates/templatename/images/myimage.gif - just to make sure they are where you think they are!
good luck
you shoudl put your images in html/img
Then all image paths should start /img/
Related
While i am still learning css html5 and Jquery, combined with the information from the internet, i came up with a idea to program the css in to different chapters, and call them in to the head section when need it.
from my understanding, via google it is faster to load css styles in the head as a <style></style>.
This way i will only have the css at the page that i need, and it will be better readable for me, becouse i dont use html css styling in dreamweaver anyway.
My css is now so big it is taking tomutch time to find it all.
even with dreamweaver search box.
Does any one have experience with this, or see any problems i might incounter?
Thanx in advance..
The only way to create structure if you're working in a big php project is to save a blank html page, load the existing css on to that page, use the css options/panels in dreamweaver and load the body parts you need in there.
If your using a dynamic css location link, other wise, i think dreamweaver will do just fine in php.
Not sure becouse i never used it that way...
Situation
i try'd to make more sence doing it this way, but i have just put everything back, becouse i got a unknown error, did not investigate it further. And the <style></style> has the highest level of design, meaning all the rules that where set, will be overwritten, things will get complicated fast if you start moving parts aspecialy if have a multi css styling site, so it is not recommended if you already have a big project, do it from the start...
Edit * 27-11-2015
I found the solution, i am using classes to slowely but surely replace the css file...
anyone know how to scan a folder using jquery or javascript code snippet, after that get a picture file name and embed in <li></li> or <div></div>, i've used php code to read through the folder and loop through the element to display the thumbnails and all, but it's not work well.
I've try on galleria, gallerific, galleryView jquery slideshow plugin but those might not work well with php processing because of predefined configuration or something, can anyone tweak or hack these gallery to dynamically read an image from a folder?
There is a way to read local files using javascript, but it requires the user to set up his browser appropriately. I know about such feature in Firefox. In your case, the best way would be to use PHP for folder scan and Lightbox for image display (which in turn has slideshow plugins).
Perhaps you'd be better of saying what didn't work well when you tried the PHP path and we can help you fix that?
Your best bet is probably going to either be an existing thing such as Gallery as powtac mentioned, or if you are only wanting to display images from a single folder that might be a bit of overkill.
You could use PHP to output the thumbnails and whatever other information you need into a list of <li> tags, use CSS to hide some of them (if required) and then use Lightbox or any of the many other JS image galleries available to do what you want.
Then you can ask on here if you are having trouble with one of those steps (detailing what you are doing, what's going wrong etc).
I'm creating a website from scratch and I was really into this in the late 90's but the web has changed alot since then! And I'm more of a designer so when I started putting this site together, I basically did a system of php includes to make the site more "dynamic"
When you first visit the site, you'll be presented to a logon screen, if you're not already logged on (cookies). If you're not logged on, a page called access.php is introdused.
I thought I'd preload the most heavy images at this point. So that when the user is done logging on, the images are already cached. And this is working as I want. But I still notice that the biggest image still isn't rendered immediatly anyway. So it's seems kinda pointless.
All of this has made me rethink how the site is structured and how scripts and css files are loaded. Using FireBug and YSlow with Firefox I see a few pointers like expires headers and reducing the size of each script. But is this really the culprit?
For example, would this be really really stupid in the main index.php? The entire site is basically structured like this
<?php
require("dbconnect.php");
?>
<?php
include ("head.php");
?>
And below this is basically just the body and the content of the site.
Head.php however consists of the doctype, head portions, linking of two css style sheets, jQuery library, jQuery validation engine, Cufon and Cufon font file, and then the small Cufon.Replace snippet.
The rest of the body comes with the index.php file, but at the bottom of this again is an include of a file called "footer.php" which basically consists of loading of a couple of jsLoader scripts and a slidepanel and then a js function.
All of this makes the end page source look like a typical complete webpage, but I'm wondering if any of you can see immediatly that "this is really really stupid" and "don't do that, do this instead" etc. :) Are includes a bad way to go?
This site is also pretty image intensive and I can probably do a little more optimization.
But I don't think that's its the primary culprit. YSlow gives me a report of what takes up the most space:
doc(1) - 5.8K
js(5) - 198.7K
css(2) - 5.6K
cssimage(8) - 634.7K
image(6) - 110.8K
I know it looks like it's cssimage(8) that weighs the most, but I've already preloaded these images from before and it doesn't really affect the rendering.
To speed a little, you could assemble all your images on the same image sprite, so that you have only 1 request to download all the images. But that requires you to fine tune your css to let display just the small subset of your image.
To have a better explanation, check out : http://css-tricks.com/css-sprites/
Another answer that could seem a little stupid but I like to think of this when I make a website : Just Keep It Simple. I mean do all your JS add real value, do all this images are fine, could you display less, make a lighter design ? I'm not criticizing your work at all, just suggest you...
I used the following approach on an extranet project:
Using jQuery and a array of file names, I ajax in all the images, .js and .css files so that they are preloaded in the cache. As I iterate through the array, I update a progress bar on the screen that indicates that the site is loading - much like a flash loader.
It worked well.
What I will do is show by default the loading page with pure CSS and HTML then wait for the jQuery to load and preload the images with ImageLoader. Once you are done redirect to the normal website since the images will be already in the cache they won't be loaded again.
Another optimization you can do is minify all JS files and combine all except the jquery.js. Put the jquery.js first into your HTML so it loads first. Also put your SCRIPT tags at the bottom of the HTML.
It sounds like you have pretty much nailed preloading, if you have loaded it once, and the expiry header is set correctly, you have preloaded it, no matter what kind of content it is.
File combination can be key to a quick website, each extra file will add load time, in the worst cases of network and server lag you might add up to a second extra for each separate file. More commonly it will be around 100 - 200 milliseconds per file.
If not already minified, minify the scripts, and put them in the same file, just remember to keep the order. I have no idea why Ivo Sabev wouldn't include jQuery.
Same thing with the CSS files.
How much have you done about testing image compression? There can really be a gain from trying out different compression settings and comparing size vs. quality. For PNG images IrfanView with PNGOUT can often make files 25% smaller than other programs, on top of that, a very big gain in size reduction can be achieved by reducing the image to 8 bit colour, with a lot of graphic elements you simply can't tell the difference. Right here on Stack Overflow there is a great example of well compressed and stacked images in the editor control buttons: http://sstatic.net/so/Img/wmd-buttons.png
I am scraping a website with HTML with php that retrieves a page and removes certain elements to only show a photo gallery. It works flawlessly for every browser BUT any version of IE (typical ;)). We can fix the problem by rewriting the .css file, but we cannot implement it into the head of the php as this will be overwritten by the .css file from the websites server. How would we go about hosting our own version of the .css file so that our website will be displayed using OUR version? Would be swap something out with a filter?
Cheers!
You do realize that it may not really be a scraping problem? It's sounds like a straightforward page display problem.
Worrying about scraping might be a red herring. After you have scraped you have some HTML (and possibly some CSS) ... does that validate at W3C? I realize that is no guarantee, but it is an indicator (I know that IE doesn't always display valid pages properly, but sometimes it's a "gotcha" when other browsers seem to display invalid HTML/CSS properly).
If it's valid then maybe you should look back at your scraping. If you already removes certain elements to only show a photo gallery then maybe you can also remove the CSS from the HTML header (or wherever) and reaplce it with your own?
If you're already scrapping the website, why not just use PHP to omit their CSS file and write your own in its place? Alternatively, you could write your own CSS file just below their's in the <head> so it overwrote their styles.
This is just another thing to check, but if one of the elements you're removing is comments, you could unwittingly be pulling out ie only stylesheets that are between conditional comments. Another thing to look at is paths. Maybe one of their stylesheets has a relative path that you can't call from your server. You would need to make that an absolute path for it to work.
Really, you should probably take a close look at the source of the original page and your formatted source side by side. You could be pulling out something that's should be left in.
You ask how you could remove their css... you do it the same way you remove the other elements you're pulling out. Just pull out style tags and tags that link to stylesheets.
Aside from that I would just write some styles to fix it and stick it them anywhere after the existing css is called. (Like every one else here mentioned)
Just add another CSS header and mark your styles as !important to override the original ones?
i'm looking for a way to display a web page inside a div of other web page.
i can fetch the the webpage with CURL, but since it has an external stylesheet when i try to display it, it appears without all his style properties.
i remember facebook used this technique with shared links (you used to see the page that was linked with a facebook header)
did some unsuccessful jquery tests but I'm pretty much clueless about how to continue..
i know this can be done with frames but i always here that it's good practice to avoid frames so i'm a bit confused
any ideas how to work this out?
If you want to display the other website's contents exactly as they are rendered in that site then frames are, in this case, the best (easiest) way to go.
Facebook and Google both use this technique to display pages while maintaining their branding / navigation bar above the other site.
I am going to guess that Facebook still used an iFrame, just with no borders and a well placed header outside of it. The reason I am guessing that is because if the outside page has its own style sheet, there is a high probability that your styles and their styles will clash and not show things properly.
In order for the styles not to clash everything on both ends would have to be extremely detailed, not just generic styles applied to all paragraphs etc...
i agree that using frames would probably be the best solution for you problem.
but if you still want to avoid frames and put the contents into a div with the id externalConent, you could request the stylesheets the same way you get the other contents and prefix every rule in them with "#externalContent ". save these stylesheets to your server and include them in your page. with a few more customizations, that should work.
i have to admit this solution does sound quite strange... well, it is.
but it's the only way i see to do what you're asking for.
If you are unable to use a frame or iframe, try:
extract the HTML inside the BODY and inserting it into the destination DIV
extract the and sections at the header
Is not very clean though, but it will definitely work, you can insert a phpBB forum into another dynamic way using this technique, take a look at http://www.clearerimages.com/forum/ for an example.