image CSS formatting

uli · 2014-09-10 22:11:19

candyman wrote #283653:

The path is OK.

url(/images/file.png)

The CSS syntax is OK, too. Now, when you put your system’s path to the local site (like http://localhost:8888/your_site) in the browser’s address bar, followed by that image URL, does the image show up?

candyman · 2014-09-10 22:17:43

Yes! I can see:

localhost/mysite/images/file.png

p.s.: I’ve localized the images folder (Immagini, in Italian) but I don’t think it’s the problem (obviously I’ve changed all the urls, the ones in CSS too).

The problem is that the CSS don’t see the images folder… Weird…

Last edited by candyman (2014-09-10 22:25:18)

candyman · 2014-09-11 08:41:41

Tried with apostrophes and ../ with no luck :(

Last edited by candyman (2014-09-11 08:41:50)

gaekwad · 2014-09-11 09:25:58

I’ve skim-read, so forgive me if I’ve missed something or this sounds idiotic. This:

url(/images/file.png)

…translates to this:

localhost/images/file.png

Because / will go to localhost and not localhost/mysite. If you’re dev’ing for a live site with, say, example.com as the domain, then the mysite part is a subdirectory. If you open the web inspector and inspect where the image should be, what is the URL it’s looking for?

Last edited by gaekwad (2014-09-11 09:26:14)

candyman · 2014-09-11 09:39:02

With the inspector of chrome I can’t find the url :(

Anyway, yes, I think you solved the puzzle!

My live site is: http://mysite.com

My local site is: localhost/mysite

In the Prefs I’ve put as TXP url site: localhost/mysite

So, how can I solve this? I’ve to create a custom CSS for the local site?

Many thanks :)

gaekwad · 2014-09-11 09:42:38

You could try:

url(/mysite/images/file.png)

It’s a dev-only hack – don’t forget to take it out when you switch to your live site, but it should work.

candyman · 2014-09-11 09:54:43

It doen’t work.
Anyway I’m pretty sure the problem is this.
Now I try to move the full images folder…

Edit: it worked! :)

I copied the full images directory under the localhost folder.
So, the images of the articles are loaded in the images folder, the CSS ones in its copy.

Last edited by candyman (2014-09-11 09:57:50)

colak · 2014-09-11 09:58:54

you have to change the paths of the images in your css.

As such… yes, you have to create a custom css for your locals site where the images will be on /mysite/img.jpg

candyman · 2014-09-11 10:21:36

Thanks all for the (usual) help.

So the TXP designers usually create a custom CSS for their local installs?
Or is there another method to avoid the problem?

colak · 2014-09-11 14:04:03

I can not speak for anybody else but I guess that you could have avoided the problem if you installed the site in the root of your localhost. The slash in the beginning has nothing to do with txp but how the browser interprets it, which is, the root of the site.

gaekwad · 2014-09-11 19:34:18

When I do AMP dev on my Mac, I use the local Apache instance, the local PHP, install MySQL, then create vhosts inside the ~/Sites folder for each project. My schema tacks a .localhost on the end of a URL, so deving for example.com exists locally as example.com.localhost, which avoids the subdirectory stuff. When I push to the live site, I just switch out the site URL in prefs and that’s about it.

candyman · 2014-09-11 22:00:39

Thanks Pete, this is a good advice.
I’ve created a subdirectory for TXP just ‘cause I had different projects (a forum and so on…) in the same httdocs folder of XAAMP.
Your solution is smarter, I’ll do this way in future.

gaekwad · 2014-09-12 07:07:00

The other option if you want to keep things nice and modular is to spin up a VirtualBox VM in bridged networking mode for each dev instance, and use hosts to map names to each one. Personally, and I’ll try and write this up proper, I use Gas Mask for hosts management, whether it’s localhost or VMs.

{Edited to remove link to Gas Mask for security reasons. Website is reported to contain malware and viruses. – Uli}

Last edited by uli (2014-09-12 09:57:31)

michaelkpate · 2014-09-12 12:30:32

gaekwad wrote #283698:

The other option if you want to keep things nice and modular is to spin up a VirtualBox VM in bridged networking mode for each dev instance, and use hosts to map names to each one.

I discovered Vagrant a couple of weeks ago. It wasn’t quite as easy to setup under Windows (at least for me) as advertised but I did get it up and running.

candyman · 2014-09-12 12:55:13

This is something new: thank you, Michael!

I think this could be a good start for your FAQ contribute! ;-)

Last edited by candyman (2014-09-12 12:55:23)

Textpattern CMS

Textpattern CMS support forum

#16 2014-09-10 22:11:19

Re: image CSS formatting

candyman wrote #283653:

#17 2014-09-10 22:17:43

Re: image CSS formatting

#18 2014-09-11 08:41:41

Re: image CSS formatting

#19 2014-09-11 09:25:58

Re: image CSS formatting

#20 2014-09-11 09:39:02

Re: image CSS formatting

#21 2014-09-11 09:42:38

Re: image CSS formatting

#22 2014-09-11 09:54:43

Re: image CSS formatting

#23 2014-09-11 09:58:54

Re: image CSS formatting

#24 2014-09-11 10:21:36

Re: image CSS formatting

#25 2014-09-11 14:04:03

Re: image CSS formatting

#26 2014-09-11 19:34:18

Re: image CSS formatting

#27 2014-09-11 22:00:39

Re: image CSS formatting

#28 2014-09-12 07:07:00

Re: image CSS formatting

#29 2014-09-12 12:30:32

Re: image CSS formatting

gaekwad wrote #283698:

#30 2014-09-12 12:55:13

Re: image CSS formatting

Board footer