Bra sätt att begränsa bredden på textrader, men låta bilder flyta ut?

Inga förslag? :)

Hur kommer bilden in på sidan? Är den i WYSIWYG editorn (tinyMCE) eller är det ett eget fält dom skall säga vilken bild som skall visas? Har du något exempel på problemet?

Det är i TinyMCE och den placerar ju allt i p-taggar, men jag kan ju inte vara ensam på nätet om att inte vilja ha svårlästa textrader som tar upp en hel skärm i bredd (som wF iofs).

Men om man vill högerställa en bild så kan den däremot få flyta ut längst till höger är min tanke. Liksom att det finns ett css-val för line-height, det finns inget för line-width/line-length eller nåt för bara text? :D

Funkar det att göra en särskild stil som floatar just de bilderna mer som du vill?
Typ:

p img {
floatspecar här
}

Funkar inte "p img" (eller påverkar andra bilder), så se om du kan skapa en stil som passar just dina förutsättningar.

eftersom bilden kommer finnas med i p:elementet (om det var där du tänkte sätta max-width) så kommer den inte bli större än 650px ändå. Det du kan göra är ju med JSkod, finns det en img-element inne i p => ändra p/wrapper-elementets max-bredd från 650px till XXXpx. Eller kolla med server kod om <img> finns med i texten?

hm, finns det något element som jag kan använda som inte är helt semantiskt genomkorkat som inte är <p> om jag trots allt vill lägga bilder som ska floatas till höger i annat än <p>? TinyMCE begränsar ju mina möjligheter som sagt.

T.ex.:

<p>Massa text i p med begränsad bredd</p>
<element>Bild floatad till höger</element>
<p>Mer text i begränsad bredd</p>

Vad skulle element kunna vara? Det blir ju som jag vill om jag sätter en floatad <h6> eller liknande, men finns det nåt jag kan välja som är minst fult? :)
Det är väl nästan det som du menade voig fast som jag förstod det så ändras ju även textens bredd om det både finns text och bild i samma p. Om jag ska envisas med att ge varje bild en egen p så kan man kanske ta sig tid att ge den en klass också iofs, men det blir ju inte användarvänligt för den som inte kan html.

Edit/ Ok, såhär då. Kan man med jQuery kolla om det finns bilder som har klassen align-right och om så är fallet stänga nuvarande tagg och lägga bilden i en <p> med klassen full-width och sedan öppna föregående tagg igen för resterande material? Är jag ute på djupt vatten? :e

hehe, eller så lyssnar jag bara på er och kör en p med egen bredd på bilder. Kan skapa en klass. Ett steg till med en klass, men snyggare med p än ett h-element kanske.

Är det komplicerat att med jQuery söka och kolla efter p som enbart innehåller en bild och då sätta en klass automatiskt?

bassebhu skrev:

Edit/ Ok, såhär då. Kan man med jQuery kolla om det finns bilder som har klassen align-right och om så är fallet stänga nuvarande tagg och lägga bilden i en <p> med klassen full-width och sedan öppna föregående tagg igen för resterande material? Är jag ute på djupt vatten? :e

$("img.align-right").wrap('<p class="full-width"/>');

men detta borde du kunna göra i tinymce redan utan någon javascript

bassebhu skrev:

Är det komplicerat att med jQuery söka och kolla efter p som enbart innehåller en bild och då sätta en klass automatiskt?

$("p>img").parent().addClass("something-awsome");

fast den letar upp alla p som har en bild som en direkt barn.

Ja, absolut, men om jag vill att även Berta 53 som aldrig har gjort nåt liknande ska kunna högerställa en bild och få den automatiskt högerställd utan att paragrafen släpper iväg texten lika mycket så blir det lite trixigare.

Din första kod gör väl så att det blir en till p inom en annan p (tinymce lägger allt i p's)?
Och din andra kod funkar väl bara om man själv lägger alla bilder i ensamma p's, det som jag hoppas att Berta ska slippa, samt lägger även till klassen på en ev. vänsterställd bild som råkar ligga först i en p tillsammans med annan text?

Tack!

bassebhu skrev:

Ja, absolut, men om jag vill att även Berta 53 som aldrig har gjort nåt liknande ska kunna högerställa en bild och få den automatiskt högerställd utan att paragrafen släpper iväg texten lika mycket så blir det lite trixigare.

Din första kod gör väl så att det blir en till p inom en annan p (tinymce lägger allt i p's)?
Och din andra kod funkar väl bara om man själv lägger alla bilder i ensamma p's, det som jag hoppas att Berta ska slippa, samt lägger även till klassen på en ev. vänsterställd bild som råkar ligga först i en p tillsammans med annan text?

Tack!

Så du menar att Berta kommer fattar att lägga en bild i en ensamt p-element men inte förstå att man kan trycka på en style-dropdown som sätter en cssklass på elementet runt? Kan ju tycka att om Berta skall använda systemet så borde hon få någon typ av utbildning.

Förstå inte vad du vill göra, om det finns bilder i en paragraf så vill du göra vad? Flytta ut den och lägga in en ny p-element med en css klass efter där paragrafen som bilden fanns inne i från början?

var imgs = $("p>img");

imgs.each(function() {
    var that = $(this),
         parent = that.parent(),
         newP = that.wrap('<p class="your-new-class" />').parent();
     newP.after(parent);
});

något sånt i så fall... otestad

hehe, ja, Berta ska bara behöva trycka på bilden och högerställa den. När hon gör det i dagsläget så sätts en klass och bilden hamnar till höger, men inom paragrafen som har mindre bredd. Så lätt ska det vara, fast med skillnaden att (enbart) högerställda bilder ska hamna i egna paragrafer med klassen full-width eller dylikt.

Ska testa din nya kod, det verkar lovande! Tack!

Det är ju smidigare att sätta bredden på en parent till dina <p>, då slipper du mickla med bredderna, och att få till en bra och logisk ordning för texten och bilderna. Då löser det ju sig per automatik. :bire

Hela grejen är ju att jag vill ha lättlästa textrader med begränsad bredd medan högerställda bilder tillåts dra längre ut till höger. Går det att uppnå om allt ligger i en div med fast bredd? Sätter man nån position rel/abs på bilderna då eller?