Wymiary obrazków w html


W ramach treningu o zabawy, w wyniku pewnego zapytania napisałem takie coś – może się komuś przyda. Jako parametr należy podać nazwy plików html w których należy uzupełnić tagi <img /> o wymiary obrazków.

#!/usr/bin/env python
# -*- coding: iso-8859-2 -*-
import os.path
import re
import Image
import sys

if len(sys.argv) == 1:
  print 'Podaj nazwy plików'

def replace(html):
  rx = r'''(?im)(<\\s*img\\s*src=(["'])(?P.*?)\\2.*?/>)'''
  imgs = re.findall(rx, html) #, re.I|re.M)
  if imgs:
    for imgtag, tmp, fname in imgs:
      if imgtag.find('width=') == -1 and\\
          imgtag.find('height=') == -1 and\\
          os.path.isfile(fname):
        intag = 'width="%dpx" height="%dpx"' % Image.open(fname).size
        ntag = imgtag[:-2] + intag + ' />'
        html = html.replace(imgtag, ntag)
  return html

files = sys.argv[1:]
for f in files:
  if not os.path.isfile(f):
    print 'Nie znaleziono:', f
    continue
  html = replace(open(f).read())
  open(f, 'w').write(html)

Wymagany jest moduł PIL.

Oczywiście jest to mocno niedopracowane, ale napisanie tego to było dosłownie kilka minut, dla zabawy, a jako że to jest python, to łatwo samemu to dopracować i poprawić :) Ważne, że działa jak powinno…

02 Luty 2006

Tagi:

Komentarze:

niemrugajacy rollover bez preloadu


jako ze chociaz chwilowo minela mi ostatnia niemoc odnosnie moich wysilkow wziecia sie za jakakolwiek prace (czesciowo zwiazana z moja choroba), to opisze sobie dla sportu pewien prosty trick:

wiekszosc osob dluzej zajmujaych sie tematem zna ten sposob, zreszta zostal ladnie opisany przez Yano na pcw faq, ale tutaj bedzie minimalnie zmodyfikowana wersja pozwalajaca na nieznajomosc (teoretyczna) wysokosci obrazka. generalnie trick polega na tym, ze wersja obrazka z hoverem stanowi wraz z wersja bez hovera jedna calosc, dzieki czemu po zaladowaniu sie obrazka, nie ma juz czego doladowywac (jesli chodzi o zmieniajace sie obrazki w hoverze za pomoca js czy tez innych metod… :) ). ja robie to tak:

tworze obrazek (tak jak ladnie opisal Yano), tak ze na dole jest wersja taka, jaka ma sie wyswietlic po ‘najechaniu; kursorem nad obrazek/link. wyzej ma byc wersja jaka sie wyswietla domyslnie. i kod:

html

<a href="http://urzenia.net/"></a>

css

a {
display: block;
width: 10px;
height: 10px;
background: #fff url('obrazek.png') top center no-repeat;
}
a:hover {
background-position: bottom center;
}

co prawda jest trudniej dorobic trzeci stan (wrecz sie nie da, trzeba wtedy skorzystac z przesuniec w pikselach jak w wersji Yano), ale zazwyczaj tego trzeciego stanu sie nie robi, wtedy znacznie prosciej jest zamiast liczyc polowki i wartosci przesuniec, wpisywac top/bottom

inna sprawa jest wai i co zrobic, jesli ktos ma wylaczone sciaganie obrazkow, ale to temat na osobna opowiesc… ;)

06 Wrzesień 2005

Tagi:

Komentarze:

layout na 3 kolumny


jako ze larkowi pokazywalem jak najprosciej stworzyc dzialajacy w geckowatych i ie layout 3 kolumnowy, to go tu zamieszcze. moze sie komus przyda (informuje, ze to tylko ogolny zarys, i nie ma dopracowanych wartosci marginesow/paddingow dla innych niz gecko, ale poza tym powinno byc ok)

acha, dzialac bedzie w gecko i ie6 i operze 7.5. w starszych – nie wiem. mam ten luksus, ze moge je olac… :)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
        <head>
                <title>layout 3 kolumnowy</title>
                <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
                <meta http-equiv="Content-language" content="pl" />
                <style type="text/css">
                        body {
                                margin: 0;
                                padding: 0;
                                background-color: #000;
                        }
                        #main {
                                width: 750px;
                                margin: 0 auto;
                        }
                        h1, form {
                                margin: 0;
                                padding: 0;
                        }
                        h1 {
                                display: block;
                                width: 750px;
                                height: 209px;
                                background-color: #999;
                        }
                        #contLeft {
                                width: 174px;
                                float: left;
                                background-color: #fae;
                        }
                        #contRight {
                                width: 186px;
                                float: left;
                                background-color: #faa;
                        }
                        .clear {
                                width: 0px;
                                height: 0px;
                                margin: 0px;
                                padding: 0px;
                                font-size: 0px;
                                clear: both;
                        }
                        #contCenter {
                                width: 390px;
                                float: left;
                                font-size: 12px;
                                background-color: #1aa;
                        }
                        #footer {
                                height: 25px;
                                color: #fff;
                                text-align: center;
                                background-color: #444;
                        }
                </style>
        </meta></meta></head>
        <body>v id="main">
                        <h1>NAGLOWEK</h1>
                        <div id="contLeft">KOLUMNA LEWA</div>
                        <div id="contCenter">SRODEK</div>
                        <div id="contRight">KOLUMNA PRAWA</div>
                        <div class="clear"></div>
                        <div id="footer">STOPKA</div>
        </body>
</html>

tylko nie wiem czy nie wystarczyloby dodac do #footer clear: both; i wywalic .clear (tzn nie wiem czy bedzie dzialac pod ie, bo pod gecko/opera na pewno)

przyklad tutaj

25 Styczeń 2005

Tagi:

Komentarze: