resize mange billeder på en hjemmeside - javascript/jquery

[thj01]

Jeg sidder og er ved at lave en e-bog om Ubuntu server, og mangler et javascript der kan skalere billeder.

Udfordringen er, at det ikke skal styres af sideopsætningen (CSS), men af billedets fysiske egenskaber. Billederne skal således kunne skaleres ned med f.eks. 20%, sådan at de alle sammen får samme udtryk.

Det kan gøres ved at lave et id/class til alle billederne og så CSS'e sig ud af det, men det ville være smartere hvis nogle lige kendte til et stykke kode der kan gøre det konsekvent ved alle billeder på siden.

Anyone?


PS. jeg har fundet mange der kan skalere ved at man angiver samme pixelstørrelse, men det er netop % satsen jeg har behov for at kunne anvende.

[AJenbo]

Det virker ikke optimalt at gøre det i JS, men værsko (jquery):

Kode: Vælg alt

$.each($('img'), function(index, img) {
  $(img).width($(img).width() * 0.2);
  $(img).height($(img).height() * 0.2);
});

[lath]

Jeg sidder og er ved at lave en e-bog om Ubuntu server, og mangler et javascript der kan skalere billeder.

Udfordringen er, at det ikke skal styres af sideopsætningen (CSS), men af billedets fysiske egenskaber. Billederne skal således kunne skaleres ned med f.eks. 20%, sådan at de alle sammen får samme udtryk.

Det kan gøres ved at lave et id/class til alle billederne og så CSS'e sig ud af det, men det ville være smartere hvis nogle lige kendte til et stykke kode der kan gøre det konsekvent ved alle billeder på siden.

Anyone?


PS. jeg har fundet mange der kan skalere ved at man angiver samme pixelstørrelse, men det er netop % satsen jeg har behov for at kunne anvende.

Det er godt nok ikke lige JavaScript, men ImageMagic kan noget af det du har brug for:
Du er ude efter batch kommandoen: mogrify

F.eks.

• Kopier en bunke af de originale billeder ind i en mappe, lad os kalde den mappe ./img/20pct:
• Kør så:
  

  Kode: Vælg alt

  mogrify -resize 20% ./img/20pct/*jpg
  
  Tip er fra "Batch resize using ImageMagick": http://blog.coppermine-gallery.net/2009/07/08/batch-resize-using-imagemagick/
• Nu har alle (*) .jpg filer i ./img/20pct/ mappen en størrelse der er 20% af den oprindelige størrelse.

Det gode er at browseren kan downloade et allerede nedskaleret billede der passer til skærmstørrelsen.
Dermed skal der ikke downloades så meget.

/Lars

[thj01]

@Ajenbo

Vil det ramme billedet - eller det element det er inde i?

Problemet er at det er billedet jeg vil have skaleret - ikke <img> elementet.



@lath

Hvis jeg gør det vil alle mine screenshots være ødelagt, da de vil blive for pixeleret. Det gør ikke så meget på skærmen, men det bliver virkeligt skidt når det bliver skrevet ud. Og mange af de screenshots der kommer er i meget lav opløsning.


Jeg er virkeligt glad for at i kommer med nogle løsningsforslag

[AJenbo]

Det du ønsker kan slet ikke lade sig gøre med js i browseren, gør i stedet som Lath forslår, men gem som en kopi i en thumbnail mappe.

I HTML er <img> elementet billedet, hvis det er pga. du har noget styling af <img> som du samtidig ønsker har en bestemt størrelse skal du i stedet gør det med en <span> eller <div> omkring <img>.

[lath]

@lath

Hvis jeg gør det vil alle mine screenshots være ødelagt, da de vil blive for pixeleret. Det gør ikke så meget på skærmen, men det bliver virkeligt skidt når det bliver skrevet ud. Og mange af de screenshots der kommer er i meget lav opløsning.

Du har naturligvis bare flere billeder i forskellige størrelser, herunder en til "Printer venlig".

Du kan bruge picturefill polyfill´en:

• Dokumentation og eksempler: http://scottjehl.github.io/picturefill/
• Kode er på: https://github.com/scottjehl/picturefill

/Lars

[thj01]

@Ajenbo

Det var det jeg frygtede - jeg håbede bare på at en eller anden havde lavet en plugin der aflæste billedes størrelse og så kunne skalere det ned for en automatisk

Problemet i dette tilfælde er at alle billederne er screenshots - og derfor har en forfærdelig opløsning som udgangspunkt. Og hvis man forsøger at lave forskellige størrelser af dem så ødelægger man mere end man redder .

Hvis så bare at de enkelte skærmbilleder var formateret ens, men det er de heller. De springer i størrelse alt efter den tekst der står idem.

Nå men tak for hjælpen - den eneste reelt holdbare løsning er nok at fixe dem enkeltvis for de ukurrante og i grupper for dem der passer ind der

[AJenbo]

Jeg ser stadig ikke hvorfor det ikke dur at skalere <img> elementet. Der burde ingen fordele være ved det frem for at lave ændringerne ved det egentlige billede, og hvis målet var at få dem gemt permanent så ville det jo være simpler med Laths løsning.

Jeg forstår heller ikke hvorfor en bedre løsning ikke ville være at skaller dem forholdsmæssigt inden for en bestemt størrelse, eks hvis dit idele mål er 250x250 bliver et 2500x1000 til 250x100 og et 200x1000 bliver 50x250.
Eller laver alle til at have en høje så det bliver 625x250 og 50x250. Hvis du blot laver 20% ud af en masse uorden så ender du stadig med uorden.

Det er lige som om du ikke ordentlig har fået illustreret hvad dit nuværende punkt er og hvad dit ønskede mål er.

[thj01]

@AJenbo problemet er ikke at skalere dem enkeltvis. Det kan jeg sagtens gøre. Det er jo blot at CSS'e/HTML'e/ og GIMP'e sig frem til det.

Det jeg ønskede var et script der kunne aflæse samtlige billeders fysiske dimensioner - og så vise dem i en 80%'s opløsning - one solution to rule them all. - netop fordi alle billeder har samme handicap - at de er screenshots.

Det var gør en ting - løs alle problemer jeg håbede nogle kendte til. Jeg ved der findes et hav af andre løsninger, og lath's løsning er faktisk rigtig smart (den havde jeg ikke fundet ).

[AJenbo]

Men min finder jo nettop alle billederne på en side og viser dem i 20% af den originale størrelse, mens Laths metode gemmer billederne i en 20%. Så hvordan er det ikke præcis hvad du efterspørger?

[thj01]

Har nu prøvet jqueryscriptet af... og det virker ikke.

Jeg tror at det skyldes at jeg ikke har givet img elementet en størrelse - og derved rammer scriptet ikke img tagget.

Hvis jeg giver img tagget en størelse, så bliver det det som styrer screendumpene deres størrelse - og så er jeg tilbage ved start.

Jeg tror desværrer jeg er ude i den umulige opgave, da jeg søger efter et script der aflæser billedfilens pixelstørrelse og derefter skaber størrelsen på img tagget.

Den eneste mulighed jeg ser for at løse mit problem er ved at tage fysiske billeder af min skærm - og så resize dem, for derved bliver opløsningen så høj at de kan resizes ordentligt

[AJenbo]

Jeg tror at det skyldes at jeg ikke har givet img elementet en størrelse - og derved rammer scriptet ikke img tagget.

Nej browseren finder selv størrelsen når den loader billederne. Du må gøre noget galt når du køre scriptet, er Jquery loadet og hvordan afvikler du scriptet. Kan du eventuelt gøre siden tilgængelig for os andre så vi kan se den.

Hvis jeg giver img tagget en størelse, så bliver det det som styrer screendumpene deres størrelse - og så er jeg tilbage ved start.

Hvad bruger du til at danne siden, hvis det er php kan du tjekke størrelsen på billedet, så kunne du også lade den om at sætte størrelsen til en % af orginalen.

[thj01]

@AJenbo

Jeg er ved at skrive en bog om Ubuntu klient/server samt virtualisering rettet mod erhvervsuddannelserne, og har valgt at lave den ved hjælp af HTML5, CSS og javascript - så kan den nemlig hurtigt laves om til EPub, og det er releativt let at formatere det om. Derfor er PHP ikke relevant.

HTML5 giver skriveprocessen struktur når man anvender de semantiske elementer i sproget og CSS giver langt større kontrol over designet af tabeller, rammer osv. end f.eks. libreoffice gør. Der er bare nogle standard indstillinger man ikke kan lave ved f.eks. tabeller i libreoffice, og som skal indstilles for hver tabel man har oprettet!

Derfor kan (vil??) jeg ikke henvise til det .

Men opbygningen er

<figure> <img>




***

Jeg har valgt at løse problemet ved at lave nogle classes, sådan at de enkelte billeder bliver skaleret efter en procentsats (det er vist også det mest rigtige hvad HTML5 angår).

[AJenbo]

Med CSS kan du kun skalere i forhold til det element den er inden i, dvs. 20% af brede på <figure>, ikke 20% af det originale billede.

Jeg kan ikke se hvorfor PHP ikke er relevant til at danne HTML'en for dig, det kunne også fint gøres så den gemmer det som statiske HTML file hvis du ønsker at kunne sende dem rundt.

Du burde vel fint kunne gamme et eksempel af en af de sider du laver også vedhæfte den som en zip så jeg kunne se det. Eventuelt med en "lorem ipsum" tekst og et intet sigende billed hvis du vil holde indholdet hemmeligt for nu.

Jeg ved ikke hvordan konvateringen til EPub forgår, men hvis det er inden scriptet køres ville det ikke funger og enheden det fremvises på ikke afvikler scripts så ville det ikke fungere med JavaScript løsninger efter konvateringe til EPub.

Hvis mit script ikke fungere er det enten pga. du ikke har indlæst jQuery, eller at du køre det på et tidspunkt inden billederne er blevet indlæst.

[thj01]

Jeg kørte dit script i starten af filen efter jeg havde indlæst jquery - og det havde ikke den ønskede effekt. Det er muligt at jeg har gjort noget forkert, men de andre scripts jeg anvender fungerer (f.eks. til at generere toc - table of content).

Jeg anvendte denne side for at gøre det korrekt: http://learn.jquery.com/about-jquery/how-jquery-works/ og hentede sel

PHP er irrelvant, da det ikke indgår i epub formatet - og da det er afhængig af at der er en server. Det er årsagen til at der skal anvendes javascript og lignende. Det som er specielt ved Epub fremfor en almindelige hjemmeside er, at filernes placering er defineret f.eks. ved at scripts og CSS skal ligge i nogle specifikt navngivne biblioteker, men det er noget jeg stadig er ret usikker på, da jeg først for nyligt er begyndt at sætte mig ind i det.

du kan teste med Sigil: http://linuxg.net/how-to-install-sigil-0-7-4-on-ubuntu-14-04-and-derivative-systems/