Css i grafika

Zielona szkoła
1

plik css umieszczam w public/stylesheet, a jak w tym stytu są odwołania do grafiki typu:

background: url('images/a4.gif') repeat-x top left;

to tą grafikę należy wrzucać do public/images ? i jak wtedy powinien wyglądać wpis w pliku css żeby się do niej dostać ?

2 
url('/images/a4.gif')
3

nie dam sobie reki uciac,ale chyba powinno byc bardziej:

url('../images/a4.gif')
4

@Staszek, wersja radarka jest lepsza, bo odnosi sie do http://www.domena.com/images/a4.gif niezaleznie od tego ile slashy znajduje sie dalej. Wersja …/images/a4.gif (nie dam sobie reki uciac, ale kiedys chyba tak mi sie stalo) wchodzi tylko o jeden poziom wyzej. Np, jak masz adres http://www.domena.com/blog/articles/48-smthng to sie odniesie do http://www.domena.com/blog/articles/images/a4.gif.

Poprawcie mnie, jesli sie myle.

5

faktycznie wersja radarka tez bedzie dzialac. nie zwrocilem uwagi na slasha z przodu :slight_smile:

6

ba bedzie, działa. Dzięki za pomoc.

7

@sowiak: mylisz się, wersja Staszka jest lepsza.

Jeśli przeniesiesz całą aplikację do jakiegoś podkatalogu, np http://example.com/aplikacja/ to wszystkie

url('/images/a4.gif');

…trzeba będzie zmieniać na:

url('/aplikacja/images/a4.gif');

Położenie images względem stylesheets się nie zmieni, więc w:

url('../images/a4.gif');

…nie będzie trzeba zmieniać nic.

8 
url('/images/a4.gif');

Taki sposób ssie, bo:

  1. Aplikacja może być w katalogu - jak zauważył Czak.
  2. Jak front-endowiec daje Ci CSS-a, to u niego lokalnie na dysku ścieżka /images nie zadziała z oczywistych względów. Dlatego CSS będzie cały do przeróbki, żeby ścieżki były bezwzględne. Bez sensu.
url('../images/a4.gif');

Takie coś widzę najczęściej. Generalnie jest w porządku, ale ma wady:

  1. public/images bardziej powinno być katalogiem na zdjęcia paperclipa, a nie obrazki związane ze skórką graficzną.
  2. Zmiana względnej orientacji katalogów stylesheets i images zepsuje całą stronę.

Widziałem fajny sposób, w którym:
/styles/
/styles/jakis_styl.css - style

/styles/img - obrazki
/styles/img/a4.gif - obrazek do CSSa

A w CSS:

url('img/a4.gif');

W ten sposób katalog styles zawiera wszystko, co jest związane ze stylem strony - a do stylów bez wątpienia można zaliczyć także obrazki tła, nagłówki, gradienty itp. - no i sposób chyba odporny na pomyłki.

Co sądzicie?

9

tez przez dlugi okres czasu robilem tak jak piszesz. tzn. byl katalog gfx i w nim style oraz grafika.
Wydaje mi sie, ze w czasach kiedy kazdy edytor tekstu ma funkcje “find and replace all”, kazdy ze sposobow jest dobry i nie wymaga czasochlonnych zmian podczas przenoszenia apliakcji :slight_smile:

10

Błąd. public/images nie jest dobrym miejscem na zdjęcia z paperclipa. public/images powinno być w repozytorium i zawierać obrazki związane ze skórką graficzną.

Z kolei public/system powinien być wyłączony z repozytorium (czyt. w .gitignore) i być miejscem na zdjęcia z paperclipa. To się bierze z tego jak ten folder traktuje Capistrano (podlikowuje z shared i dzięki temu zachowuje uploady między kolejnymi wdrożeniami).

11

Stosując wzorzec Convention over Configuration, masz całkowitą rację. Ale tutaj bardziej mowa o samym problemie CSS-ów i tamtejszych odwołań do obrazków. Ja miałem na myśli, że public/styles/images/ to obrazki związane z prezentacją graficzną layoutu strony, a public/images/ to obrazki związane z treścią, wrzucone poprzez samą aplikację.

12

Celne spostrzezenie, tego nie wzialem pod uwage. :wink: