De PHPhulp kroeg
Hoe omgaan met afbeeldingen in cms
In een tabel wordt een verwijzing naar de ge-uploade afbeeldingen gezet, tevens staan hier de tekstbijschriften bij. De afbeeldingen worden dan op de website boven of onder het nieuwsbericht weergegeven. Ik wil graag het nieuwsbericht schoon houden van opmaak en afbeeldingstags omdat deze content voor meer media te gebruiken zoals bijvoorbeeld een kabelkrant.
Toch is het soms wenselijk om tussen de tekst een afbeelding te kunnen opnemen. Hoe doen andere cms'en dit?
Aanvullende vraag is, hoe om te gaan met meerdere resoluties van de afbeeldingen. Ik sla nu de afbeelding op in 1280 x 720 en in 100 x 56 voor een thumbnail. Echter op nieuwsoverzichtspagina worden de afbeeldingen veel kleiner weergegeven dan bij het bericht zelf, dus eigenlijk is hier geen hoge resolutie afbeelding voor nodig.
Is het dan wijs om de afbeelding nog een keer met een lagere resolutie op te slaan? Kost wel veel meer opslagruimte, maar laad tijd wordt natuurlijk wel sneller. Wat is hier gebruikelijk in?
Eerst dacht ik aan UBB-tags, maar dan komen er standaard weer paragraph-tags om, wat niet altijd gewenst is.
Een grote bekende site lijkt in hun eigen CMS HTML-achtige tags te gebruiken. Zoiets als dit:
Code (php)
1
2
3
4
5
2
3
4
5
<cms-image data-image-id="42"></cms-image>
<cms-gallery data-gallery-id="5"></cms-gallery>
<cms-youtube data-youtube-id="AbCdEfG123"></cms-youtube>
<cms-tweet data-tweet-id="1234567890"></cms-tweet>
<cms-instagram data-instagram-id="1234567890"></cms-instagram>
<cms-gallery data-gallery-id="5"></cms-gallery>
<cms-youtube data-youtube-id="AbCdEfG123"></cms-youtube>
<cms-tweet data-tweet-id="1234567890"></cms-tweet>
<cms-instagram data-instagram-id="1234567890"></cms-instagram>
En dan staat er in de WYSIWYG een mooie placeholder.
Echter heeft het wel wat voeten in de aarde om CKeditor om te kunnen laten gaan met deze tags. En voor het gemak moet je een mooie userinterface bouwen.
Gewijzigd op 08/10/2024 17:54:20 door - Ariën -
- Ariën - op 08/10/2024 15:44:47:
En dan staat er in de WYSIWYG een mooie placeholder.
Echter heeft het wel wat voeten in de aarde om CKeditor om te kunnen laten gaan met deze tags. En voor het gemak moet je een mooie userinterface bouwen.
Echter heeft het wel wat voeten in de aarde om CKeditor om te kunnen laten gaan met deze tags. En voor het gemak moet je een mooie userinterface bouwen.
Placeholder is natuurlijk we te realiseren. Kwestie van handmatig die 'tag' intikken in CKEditor. Deze is er later wel weer uit te filteren wanneer je de tekst-content ergens anders voor nodig hebt. Echter het mooist zou zijn als je die placeholder er gewoon in zou kunnen slepen nadat je de afbeelding hebt toegevoegd.
Ik voeg nu de afbeeldingen toe onder aan het formulier. De 1e afbeelding komt op de website boven het bericht te staan, en de rest van de afbeeldingen onder het bericht. Door middel van jQuery UI kan ik de afbeeldingen onderling van positie wisselen door te slepen. Mooiste zou zijn om ze naar de CKEditor te kunnen slepen en dat daar dan de Placeholder zou komen te staan. Maar dat kan denk ik niet...
Okee, je kan het mogelijk met Bowser ofzo misschien wat compacter maken. :-P
Maar daar moet ik mij nog eens in verdiepen.
Voor nu heb ik deze testcase gemaakt (zelf even ckeditor inladen etc):
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<body>
<!--
allowedContent: 'cms-image[data-image-id]; cms-gallery[data-gallery-id]; cms-youtube[data-youtube-id]; cms-x[data-x-id]; cms-instagram[data-instagram-id]; b;i;u;s;a;h1;h2;h3;h4;h5;h6;sub;sup;img',
-->
<!-- Tekstgebied voor CKEditor -->
<pre><cms-image data-image-id="42"></cms-image>
<cms-gallery data-gallery-id="5"></cms-gallery>
<cms-youtube data-youtube-id="AbCdEfG123"></cms-youtube>
<cms-x data-x-id="1234567890"></cms-x>
<cms-instagram data-instagram-id="1234567890"></cms-instagram></pre>
<form method="POST">
<textarea name="editor1" id="editor1" rows="10" cols="80"></textarea>
<script>
// CKEditor initialisatie
CKEDITOR.replace('editor1', {
autoParagraph: false,
allowedContent: true,
});
</script>
<input type="submit" value="Verstuur!">
</form>
<?php
if ($_SERVER['REQUEST_METHOD'] == "POST") {
print_r($_POST);
}
?>
</body>
<!--
allowedContent: 'cms-image[data-image-id]; cms-gallery[data-gallery-id]; cms-youtube[data-youtube-id]; cms-x[data-x-id]; cms-instagram[data-instagram-id]; b;i;u;s;a;h1;h2;h3;h4;h5;h6;sub;sup;img',
-->
<!-- Tekstgebied voor CKEditor -->
<pre><cms-image data-image-id="42"></cms-image>
<cms-gallery data-gallery-id="5"></cms-gallery>
<cms-youtube data-youtube-id="AbCdEfG123"></cms-youtube>
<cms-x data-x-id="1234567890"></cms-x>
<cms-instagram data-instagram-id="1234567890"></cms-instagram></pre>
<form method="POST">
<textarea name="editor1" id="editor1" rows="10" cols="80"></textarea>
<script>
// CKEditor initialisatie
CKEDITOR.replace('editor1', {
autoParagraph: false,
allowedContent: true,
});
</script>
<input type="submit" value="Verstuur!">
</form>
<?php
if ($_SERVER['REQUEST_METHOD'] == "POST") {
print_r($_POST);
}
?>
</body>
Met allowedContent: true; kan je dus ervoor zorgen dat alle content toegestaan is in de HTML, en dat er niet gefilterd wordt door CKeditor (versie 4). Rete handig, want in mijn vorige test moest ik alle tags handmatig benoemen, maar true als boolean werkt dus ook voor alles.
Dan is enkel de stap om widgets te bouwen om die tags te herkennen en in je visuele overzicht te plaatsen en een manier om ze eenvoudig toe te voegen met een bepaalde knop.
En uiteraard ook een serverside parser.
Toevoeging op 02/11/2024 01:59:41:
Ik kom al ergens.....
De bedoeling is dat je een dialog krijgt achter die functies, waar je weer een ID-nummer kan invullen o.i.d. Als het af is, dan kijk ik even of ik het op GitHub kan plaatsen.
Gewijzigd op 02/11/2024 02:04:53 door - Ariën -