Text automatisch laten aanpassen aan hoogte DIV

[wpbremer]

Hallo iedereen,

ik heb een samenvatting van een nieuwsbericht in een div staan en deze div heeft een bepaalde hoogte. Nu wil ik niet dat deze samenvatting groter is dan de div hoog is. Nu heb ik met |truncate het maximaal aantal tekens aangegeven dat het nieuwsbericht lang mag zijn, maar dit heeft wel nadelen. Ten eerste als er in de text een harde return () of () wordt gebruikt dan kan de text buiten het vak treden. Toen heb ik het aantal tekens wat de samenvatting groot mag zijn zo ingekort dat er twee harde returns in mogen staan, maar als deze er niet in staan dan is het vak voor de helft leeg.

Is er een andere optie, ik kwam op smarty.net iets tegen van replace. Zou het mogelijk zijn om of daarmee te veranderen in een zin die de breedte van het vak heeft maar niet zichtbaar is in de text, zodat |truncate het aantal letters wel meetelt, maar niet laat zien?

Of zijn er andere oplossingen?

[Rolf]

A UDT (User Defined Tag) to trim news entries respecting html tags. Variables: character limit, text to add after truncation, read more link and customized link text. How to notes in the comments at the top of the file . . .

http://dev.cmsmadesimple.org/projects/truncate_better

®

[wpbremer]

Bedankt Rolf, ik ben er wat mee aan het prutsen, maar ik kom er achter dat ik niet helemaal kan ontleden hoe deze werkt?

Kun je me opweg helpen?

Ik gebruik op dit moment de volgende string:

Code: Select all

{truncate_better text=$entry->summary truncate='300' add='p'}

[Rolf]

Maak een UDT truncate_better aan en kopieer de code er in.
De te gebruiken tag is:
{truncate_better text=$entry->content truncate='300' add=' . . . '  link=$entry->moreurl link_text="Read More!"}

Wordt dan zoiets...

Code: Select all

{if $entry->summary}
	<div class="NewsSummarySummary">
{truncate_better text=$entry->summary truncate='300' add=' . . . '  link=$entry->moreurl link_text="Lees verder"}
	</div>

	<div class="NewsSummaryMorelink">
		[{$entry->morelink}]
	</div>

{else if $entry->content}

	<div class="NewsSummaryContent">
{truncate_better text=$entry->content truncate='300' add=' . . . '  link=$entry->moreurl link_text="Lees verder"}
	</div>
{/if}

Rolf

[wpbremer]

Bedankt Rolf voor je reactie,

maar ik had onderstaande code reeds gemaakt:

Code: Select all

<!-- Start News Display Template -->
{foreach from=$items item=entry}

{if $entry->summary}
                 <div id='nieuws_midden_div'>
                {truncate_better text=$entry->summary truncate='300' add='p'}</p>
                </div>
                <div id='inhoud_meerlink_nieuws'>
                     <a href="{$entry->moreurl}"><img src="uploads/opmaak/opmaak_kerk_meer.png" alt="Meer"/></a>
                </div>

{else if $entry->content}
                 <div id='nieuws_midden_div'>
                {truncate_better text=$entry->content truncate='300' add='p'}</p>
                </div>
                <div id='inhoud_meerlink_nieuws'>
                     <a href="{$entry->moreurl}"><img src="uploads/opmaak/opmaak_kerk_meer.png" alt="Meer"/></a>
                </div>
{/if}

{/foreach}
<!-- End News Display Template -->

Ik wil de meerlink in een aparte div houden daar deze op een vaste plaats moet blijven staan.

Als ik bovenstaand template gebruik dan komt er een p achter de tekst te staan en ik zie dat er een link wordt toegevoegd aan de tekst en dat wil ik niet.

Ik zou misschien ook strip_tags kunnen toevoegen zodat alle 's en 's worden verwijderd. Alleen dan wordt alle tekst achter elkaar geplaatst en is alle opmaak weg.

Bijbehorende website is: kerk.wpbremer.nl

[Rolf]

Als ik bovenstaand template gebruik dan komt er een p achter de tekst te staan

Klopt:
{truncate_better text=$entry->summary truncate='300' add='p'}

ik zie dat er een link wordt toegevoegd aan de tekst en dat wil ik niet.

Ja dat staat vast in de code

Kijk onderaan in de code en zet de // er voor.

Code: Select all

//echo ( $ret );

®

[wpbremer]

Misschien heel stom van me, maar wat is het verschil tussen:

nieuwe code:

Code: Select all

{truncate_better text=$entry->summary truncate='300'}

en oude code:

Code: Select all

{eval var=$entry->summary|truncate:300}

Ik zie op mij homepage geen verschil.

[Rolf]

De standaard truncate versie telt het aantal karakters in de $entry->summary string en kapt deze af na x-karakters
Maar telt deze ook als 3 karakters, terwijl je dit eigenlijk niet wilt.

Ook kan hij de tekst afkappen op een plaats waar je dit niet wilt. Bijv.
zomaar wat tekst...

Je mist dus nu in de pagina waardoor de hele layout op de hobbel kan gaan.

Voor zover ik het begrijp zal deze tag dit voorkomen.

R.

[wpbremer]

Ok ik heb het even getest maar met:

Code: Select all

{truncate_better text=$entry->content truncate='300'}

worden de en tags gewoon meegeteld als karakter. Dus volgens mij is dat het verschil niet.

Ik denk dat ik de strip_tags ga gebruiken, hiermee worden alle 's en 's verwijderd en ook mijn styling.
De styling pas ik dan toe op de div waardoor de tekst ook weer goed opgemaakt wordt.

De tekst zal dan altijd netjes in de div passen en er niet uitlopen. Tevens zullen eventuele foto's die geplaatst worden voordat het aantal karakters op is ook niet getoond worden. Hierdoor voorkom ik dat een foto de hele div inneemt.

[Rolf]

Ohh, ik dacht dat deze tag dit ook zou aanpassen.
Ik heb het eens ergens gelezen. Zal nog wel eens zoeken, wellicht een andere.

In ieder geval heb ik ook mijn website nu met deze tag uitgevoerd, dat moest ook al tijden maar het kwam er niet van 

Rolf

[wpbremer]

Mooi zo, ik stop er voor vandaag mee, ga morgenavond weer verder.