[DEV] Image resizer, maar dan anders

[Ger]

Deze MOD heb ik eind vorig jaar gemaakt. Werkt op zich goed, maar heeft twee nadelen:
1. De JS wordt altijd geladen, dus ook bij berichten zonder afbeeldingen
2. De afbeeldingen worden eerst compleet geladen en dan pas geresized. Als iemand dus een stuk of 10 detailfoto's van zijn nieuwe zwaardje post, kan het dus zomaar zijn dat er 10 MB geladen wordt en daarna pas geresized wordt.

De eerste valt nog wel mee, maar de tweede is bij mensen met een wat tragere internetverbinding toch erg vervelend. Beter zou zijn als de plaatjes op de server geresized worden en dan pas naar de browser worden gestuurd.

Nu hink ik een beetje op twee gedachten:
1. De JS implementeren in de BBcode zelf
2. De boel ombouwen naar een PHP script dat een thumnail creëert.

Bij beiden geldt de vraag: waar moet dat dan? In ./styles/mijnstijl/template/bbcode.html of ./includes/bbcode.php?

En wat bevelen jullie aan? JS of PHP?

[Lucas]

Ikzelf zou het via PHP doen, maar goed...het is maar wat jij fijner vind denk ik.

[Ger]

Ok, ik heb wat php scriptjes gezocht en verbouwd, en kom dan tot onderstaande code:
*code geknipt om verwarring te komen*

Die wil ik in ./styles/mijnstijl/template/bbcode.html invoegen, maar dan moet dat natuurlijk gerenamed worden naar bbcode.php. Als ik dat doe, dan krijg je natuurlijk problemen met dat hij bbcode.html niet meer kan vinden. Waar wordt staat de verwijzing naar bbcode.html? Ik kan het in de cfg files niet vinden. (heb mijn stijl overigens gebaseerd op subsilver2)
Of kan ik dit beter in .includes/bbcode.php doen?

Wijziging: code geknipt om verwarring te voorkomen, zie onder

[Ger]

Vergeet bovenstaande code, die was veel te rommelig. Heb nu zelf een basis (nog niet af, maar wel een werkend systeem) gemaakt:

Code: Selecteer alles

<?php 
$maxwidth = 250;
$bron = "http://www.swordfactsbenelux.nl/forums/styles/sfb/imageset/site_logo.gif";
list($width, $height) = getimagesize($bron);

if ($width > $maxwidth) 
{
	$resizefactor = $maxwidth / $width ;
	$newheight = $resizefactor * $height ;
	echo "<a href=\"$bron\" target=\"_blank\" title=\"Klik op de thumbnail om de afbeelding op origineel formaat te zien\"><img style=\"border: 1px dashed\" src=\"$bron\" width=\"$maxwidth\" height=\"$newheight\" /></a> 
	<script type=text/javascript>
	if (img.parentNode.nodeName == 'A') 
            { 
              img.parentNode.onclick = function() { return false; } 
            }</script> ";

	}
		
else {
echo "<img src=\"$bron\" />" ;
}
?>

Deze resized wel, maar er wordt nog steeds het grote bronbestand gebruikt. Hier moet ik nog iets voor inbouwen.

Hoe dan ook, ik wil graag weten wáár ik dit moet toepassen. Kan iemand me dat vertellen?

[Ger]

Zit zelf natuurlijk ook niet stil, maar een beetje hulp zou welkom zijn...

Ik heb nu gedaan:
OPEN
./styles/subsilver2/template/bbcode.html

FIND

Code: Selecteer alles

<!-- BEGIN img --><img src="{URL}" alt="{L_IMAGE}" /><!-- END img -->

REPLACE WITH

Code: Selecteer alles

<!-- BEGIN img -->

<?php 
$maxwidth = 250;
$bron = "{URL}";
list($width, $height) = getimagesize($bron);

if ($width > $maxwidth) 
{
	$resizefactor = $maxwidth / $width ;
	$newheight = $resizefactor * $height ;
	echo "<a href=\"$bron\" target=\"_blank\" title=\"Klik op de thumbnail om de afbeelding op origineel formaat te zien\"><img style=\"border: 1px dashed\" src=\"$bron\" width=\"$maxwidth\" height=\"$newheight\" /></a> 
	<script type=text/javascript>
	if (img.parentNode.nodeName == 'A') 
            { 
              img.parentNode.onclick = function() { return false; } 
            }</script> ";

	}
	
	
else {
echo "<img src=\"$bron\" />" ;
}


?>

<!-- END img -->

SAVE AS
./styles/subsilver2/template/bbcode.php

OPEN
./includes/bbcode.php

FIND

Code: Selecteer alles

bbcode.html

REPLACE WITH

Code: Selecteer alles

bbcode.php

Uploaden en template refreshen. Toch werkt het niet, terwijl als ik het nieuwe php stuk als apart bestand aanroep (en {URL} vervang door een grote afbeelding) dan werkt het wel. Waar zit de fout?

[justme3]

bij die "oude" image resizer ging veel kwaliteit verloren als het verklein was. Kun je dat in v2 aanpassen?

[BetaDevil]

probeer eens ipv van <?php ?> het volgende <!-- PHP --> <!-- ENDPHP -->

[Ger]

bij die "oude" image resizer ging veel kwaliteit verloren als het verklein was. Kun je dat in v2 aanpassen?

Klopt, komt doordat het in elkaar gedrukt wordt. Mijn uiteindelijke doel is om het daadwerkelijke plaatje te verkleinen en als thumbnail in een aparte dir te zetten. Ik weet dat php dat kan (is een functie voor) maar ken het resultaat er niet van. Wordt dus ff afwachten. Hoe dan ook, wil ik eerst zorgen dat het script überhaupt verwerkt wordt, dan zien we daarna wel weer verder.

probeer eens ipv van <?php ?> het volgende <!-- PHP --> <!-- ENDPHP -->

Geprobeerd, zonder succes helaas. Overigens zowel met de uieindelijke extensie van het bestand .php als met html. Maar ik begrijp van je dat dit wel de juiste locatie is?

Ik snap de suggestie overigens ook niet (geen kritiek, gewoon oprecht niet snappen). Zover ik begreep moet je toch altijd met <?php ?> aangeven waar je php begint en stopt? Of staat dat op een andere manier in phpBB geregeld?

[BetaDevil]

Zo moet je inderdaad php beginnen, maar omdat de template-bestanden van phpBB (1) .html zijn, (2) in php geparsed worden gaat dit niet. Daarom zijn er speciale php-commando's voor de templates. Bijvoorbeeld:
<?php ?> moet in de template zijn <!-- PHP --> <!-- ENDPHP -->
include 'bestand.php'; moet in de templates zijn <!-- INCLUDEPHP bestand.php -->.

[Ger]

Aha! Dat is dan misschien ook de reden dat de overige PHP commando's niet worden verwerkt.

Als ik dit nu in een apart PHP bestand zet, en die include met de door jouw genoemde code, zou het dan wel goed gaan?

[BetaDevil]

Het zou gewoon moeten werken, maar toch nog even opgezocht:

A note, it is very much encouraged that template designers do not include PHP. The ability to include raw PHP was introduced primarily to allow end users to include banner code, etc. without modifying multiple files (as with 2.0.x). It was not intended for general use ... hence http://www.phpbb.com will not make available template sets which include PHP. And by default templates will have PHP disabled (the admin will need to specifically activate PHP for a template).

Dus je moet eerst PHP in templates actieveren.

[Ger]

Bedankt voor het opzoeken. Waar komt dat vandaan? Wellicht kan ik er meer info uithalen.

En waar moet ik de PHP activeren? Kan het niet vinden...

[BetaDevil]

Bedankt voor het opzoeken. Waar komt dat vandaan? Wellicht kan ik er meer info uithalen.

In de coding guidelines in de docs-map, misschien staat er ook nog wel wat in de MODS Documentatie.

En waar moet ik de PHP activeren? Kan het niet vinden...

In het beheerderspaneel; Security settings of Instellingen beveiliging.

[Ger]

Ok, die heb ik gevonden. Het werkt echter nog niet, zowel het includen van een extern bestand als het invoeren van de code in bbcode.html (ook na verversen niet).

Aangezien ik volgens de documentatie in de templates toch verkeerd zit, ben ik eens verder op zoek gegaan. Is ./includes/message_parser.php iets? Een joekel van een bestand, maar als ik het zo bekijk wordt daar de boel in elkaar gezet tot nette berichten. Ik snap alleen de relatie tussen ./includes/bbcode.php, ./includes/message_parser.php en ./styles/*/template/bbcode.html niet.

Feitelijk bekijkt mijn script de bron van de ingegeven link binnen img-tags, en maakt daar een html-code van. Waar moet ik dan zijn?

[BetaDevil]

in includes/bbcode.php worden alle bbcode-dingen geregeld, in includes/message_parser.php staan functies om een mooi vloeiend bericht te vormen en in bbcode.html staan alle begin- en eindcodes van de standaard bbcode's.

[Ger]

Hmm... Mijn script doet dus eigenlijk wat message_parser.php en bbcode.html doen. Hoe krijg ik dat goed ingebouwd dan?

[Ger]

kick

[BetaDevil]

Hmm... Mijn script doet dus eigenlijk wat message_parser.php en bbcode.html doen. Hoe krijg ik dat goed ingebouwd dan?

Hier raakte ik zo ongeveer de draad kwijt

[Ger]

Mijn script ziet er zo uit:

Code: Selecteer alles

<?php 
$maxwidth = 250;
$bron = "{URL}";
list($width, $height) = getimagesize($bron);

if ($width > $maxwidth) 
{
   $resizefactor = $maxwidth / $width ;
   $newheight = $resizefactor * $height ;
   echo "<a href=\"$bron\" target=\"_blank\" title=\"Klik op de thumbnail om de afbeelding op origineel formaat te zien\"><img style=\"border: 1px dashed\" src=\"$bron\" width=\"$maxwidth\" height=\"$newheight\" /></a> 
   <script type=text/javascript>
   if (img.parentNode.nodeName == 'A') 
            { 
              img.parentNode.onclick = function() { return false; } 
            }</script> ";

   }
   
   
else {
echo "<img src=\"$bron\" />" ;
}


?>

Wat dat dus eigenlijk doet is kijken naar de bron die men tussen img-tags invoert met:
$bron = "{URL}";

Die bron is een image, en daarvan bekijkt het script of het geresized moet worden. Zo ja, dan wordt het geresized en als complete html-img opdracht naar de browser gestuurd. Zo nee, dan wordt het zonder resize-opdracht als html naar de browser gestuurd.

Als ik dan kijk naar ./styles/*/template/bbcode.html, dan zie ik daar de HTML-replacement van de bbcode staan. Dat is dus eigenlijk de laatste stap van mijn script. En in ./includes/message_parser.php staat ook een stukje bbcode-behandeling. Wat daar precies gebeurt ben ik nog niet helemaal uit (maar da's misschien omdat mijn PHP-ervaring beperkt is). Ergens tussen die twee zou mijn script ingebouwd moeten worden denk ik haast. Maar hoe...

[BetaDevil]

Open includes/message_parser.php
Zoek

Code: Selecteer alles

return '[img:' . $this->bbcode_uid . ']' . $this->bbcode_specialchars($in) . '[/img:' . $this->bbcode_uid . ']'; 

Daarvoor, toevoegen

Code: Selecteer alles

        $maxwidth = 250;
        list($width, $height) = getimagesize($in);
        
        if ($width > $maxwidth)
        {
            $newheight = ($maxwidth / $width) * $height;
            
            return "<a href='$in' target='_blank' title='" . $user->lang['CLICK_THUMBNAIL_NEW_FORMAT'] . "'><img style='border: 1px dashed;' src='$in' width='$maxwidth' height='$newheight' /></a>
                <script type=text/javascript>
                if (img.parentNode.nodeName == 'A')
                {
                    img.parentNode.onClick = function() (return false; }
                }
                </script>";
        } 

Dat zou moeten werken, maar ik maak wel vaker fouten