Archive for sierpień, 2009

Przyjazne URLe w Rails

Przyjazne URLe (w postaci: server.com/blog/123-tytul-bloga) w dowolnej aplikacji można w Railsach uzyskać bardzo łatwo. Cała pseudo-sztuczka opiera się na fakcie, że jeśli ID rekordu zaczyna się od cyfr, ActiveRecord wycina sobie tylko cyfry z początku ciągu znaków. Czyli wywołanie

1
@blog = Blog.find(123)

niczym się nie różni od

1
@blog = Blog.find("123-tu_jakis_tytul")

By uzyskać przyjazne URLe w aplikacji, do modelu należy dodać metodę to_param:

1
2
3
def to_param
  "#{id}-#{title.parameterize}"
end

Tak byłoby jednak za prosto – railsy nie radzą sobie z literami “ł” i “Ł”. Poniżej więc proste obejście tego (wrzucić do pliku config/initializers/active_support.rb):

1
2
3
4
5
6
7
8
9
10
11
module ActiveSupport
  module CoreExtensions
    module String
      module Inflections
        def parameterize(sep = '-')
          Inflector.parameterize(self.gsub("ł", "l").gsub("Ł", "L"), sep)
        end
      end
    end
  end
end

obrazek nad obrazkiem – image overflow

Chwilę sposobu na wciśnięcie jednego obrazka nad drugi szukałem, więc podam rozwiązanie tu.

W sklepie OTTO Polska mieliśmy wprowadzić obsługę promocji oraz odpowiedniego informowania o tym klienta. I chodziło nie tylko o przedstawienie banalnych przekreślonych cen, co dodatkowy znak/ikonę nad zdjęciem produktu – tak, by promocja maksymalnie rzucała się w oczy. Problem z całym zagadnieniem polegał na tym, że nie byliśmy w stanie przygotować gotowych zdjęć z naniesionym już znakiem, a i w kodzie nie mieliśmy ochoty specjalnie babrać. Rozwiązania chwilę szukałem, ale jedyne co znalazłem to ponoć skuteczne rozwiązanie z wykorzystaniem parametru background (dla obrazka który de-facto ma być naniesiony dodajemy background, w ramach którego wstawia się oryginalne zdjęcie. Bez sensu.). Rozwiązania, które znalazłem w pierwszej kolejności po prostu zdecydowanie mnie nie usatysfakcjonowały (link).

Oto co my zrobiliśmy:

?View Code HTML4STRICT
1
2
3
4
<a href="produkt">
<img src="photo.png" border="0" alt="" width="255" />
<img style="position: absolute; margin-left: -54px; z-index: 100;" src="reduced.gif" alt="" />
</a>

Okazuje się, że liczy się kolejność (wpierw zdjęcie, potem ikona) i zasadniczo tylko parametry z-index i position. Margin tylko odpowiednio ustawia ikonę.

Efekt końcowy: