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:
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:
Po pewnych bojach udało mi się zmusić do działania aplikację w Pylons, by działała pod mod_passenger. Kody przykładowej aplikacji wrzuciłem na githuba. Ot, może komuś się przyda i zaoszczędzi trochę cennego czasu.
Warto chyba tylko dodać, że kluczowy jest plik passenger_wsgi.py, który odpowiada za całą magię.
Ostatni update Railsów do wersji 2.1.2 (z 2.1.0 bodajże) spowodował, że pewien fragment pisanego systemu przestał działać – konkretnie stało się coś z wysyłaniem zagnieżdżonych form. Forma zamiast się kulturalnie wysłać i zapisać, bądź mniej kulturalnie wysłać się i rzucić pięknym, czytelnym błędem, ta zaczęła ordynarnie rzucać statusem 500 Internal Server Error (“nie pogadasz”). Wprowadziło nas to w lekką konsternację, bo nie często się zdarza, by aplikacja Rails w trybie development aż tak brzydko się zachowywała. Jedyną rzeczą, która była w stanie naprowadzić nas na przyczynę, był ostatni komunikat w konsoli:
Conflicting types for parameter containers. Expected an instance of Hash but found an instance of Array. This can be caused by colliding Array and Hash parameters like qs[]=value&qs[key]=value. (The parameters received were [{"sex"=>"M", "first_name"=>"Maciej", "last_name"=>"Litwiniuk"}].)
Zatem coś z parametrami. Nie udało się tego jednak łatwo zdebugować – aplikacja po prostu rozkładała się na łopatki, zanim zdążyła poprawnie wstać. Googlanie jednak pozwoliło znaleźć rozwiązanie, raczej banalne w swej prostocie – błąd powodowało pole date_select, które nagle zaczęło się błędnie renderować w zagnieżdżonych formach – nie dodawało znacznika tablicy ([]), co skutkowało właśnie wyjątkiem krytycznym – Railsy faktycznie w parametrach dostawały mieszaninę Hasha i tablicy.
Rada? Dodać parametr :index=>'' do wywołania date_select, które wymusza wstawienie indeksu w nazwie pola. Jego pusta wartość (NIE nil) powoduje, że pole zostanie wygenerowane poprawnie.
Przykład:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <% fields_for "subscription[member_attributes][]", member do |m| %>
<td><%= m.select(:sex, {'Meżczyzna'=>'M', 'Kobieta'=>'K'}) %></td>
<td><%= m.text_field :first_name %></td>
<td><%= m.text_field :last_name %></td>
<td width="50">
<%= m.date_select :birthdate,
:start_year => 1900,
:use_month_numbers => true,
:order => [:day, :month, :year],
:end_year=>Time.now.year,
:default=>{:year=>1990},
:class=>"dateselect",
:index=>'' %>
<%= link_to_function image_tag("icon_delete.gif", {:border=>0}), "$(this).parent('td').parent('tr').remove();prices_for_participants();" %></td>
</td> |
Warto wiedzieć, że istnieje różnica pomiędzy opcjami “Pokaż źródło”, a “Pokaż źródło zaznaczenia” dostępnymi w przeglądarkach Firefox.
Pokaż źródło (dostępne spod Ctrl+U lub Cmd+U) wyrzuca źródło strony, które zostało wygenerowane przez serwer. Jest to źródło statyczne, “czyste”, nie tknięte przez różnego rodzaju operacje JavaScriptowe (przesunięcia / ukrywanie / ładowanie treści via AJAX / etc). Podgląd ten pomocny jest zwłaszcza, gdy chcemy sprawdzić, czy strona została wygenerowana poprawnie, czy pliki JS, bądź CSS mają poprawne ścieżki, itd.
Pokaż źródło zaznaczenia dostępne jest w menu kontekstowym (prawy przycisk myszy) po zaznaczeniu treści na stronie. Pokazane źródło to kod, który już wyświetla przeglądarka – czyli po wszelkich dynamicznych operacjach. Jest to kod zinterpretowany przez przeglądarkę, zgodnie z którym strona została wygenerowana.
Najświeższe komentarze