Afbeeldingen toevoegen via CMS (redactiesysteem)
Iedereen de allerbeste wensen!
Ik heb een redactiesysteem gebouwd in PHP voor het weergeven van nieuws berichten. Maak gebruik van CKeditor, content wordt opgeslagen in MySQL database. Werkt allemaal goed. Nu wil ik er nog een mogelijkheid aan toevoegen voor het toevoegen van afbeeldingen.
Uiteraard kan dit ook via CKeditor, echter heb ik wat speciale eisen waardoor het misschien beter is om dit 'los' er bij te bouwen. Wat ik graag zou willen:
- Afbeeldingen moeten eerst gecropt worden tot een bepaald formaat, zodat onze redactie op een éénduidige manier kan werken (kan ik met jquery doen).
- URL van de afbeelding wil ik graag in de database opslaan zodat ik hier een og:image tag van kan genereren voor het delen van het artikel op Facebook.
Wanneer ik de standaard functies van CKeditor gebruik lijkt het me lastig om de url er weer uit te halen. Wanneer ik iets los bouw wordt het weer lastig om afbeeldingen op een willekeurig plaats in de tekst te laten zien i.p.v. boven of onder het artikel.
Hebben jullie misschien wat tips, hoe ik dit zou kunnen aanpakken?
Het nadeel van de gratis KCfinder was dat dit een gigantische load op de webserver bracht bij het openen, omdat alle afbeelding on-the-fly door PHP leken te gaan. De betaalde CKfinder zal wel beter werken, vermoed ik. ;-)
Inmiddels gebruik ik nog steeds CKeditor, maar ik heb wel mijn eigen afbeeldingen-library gemaakt die er (nog) niet mee samenwerkt.
Ik ben van mening dat je beter niet met HTML-codes in je content moet gaan pruttelen, ook al is dat op een WYSIWYG-manier te doen. Op dit moment heb ik bovenaan mijn artikelen een standaard plek waar ik mijn afbeeldingen (die ik buiten CKeditor beheer) kan invoegen.
Dit zijn mijn tools die ik gebruik:
- Het croppen, en resizen doe ik met de Verot.net UploadClass
- Het uploaden doe ik met PLupload die de Upload-class aanroept.
- En het zoeken in de foto's is allemaal custom made. En elke foto kan ik taggen, voorzien van auteurs en beschrijvingen. Als ik bij wijze van sprake een foto van een Audi A4 zoek, dan kan ik dus daar makkelijk op zoeken
Wel ben ik momenteel bezig om UBB-codes in te gaan bouwen om objecten zoals foto's tweets, instagram toe te voegen. Op die manier heb ik meer vrijheid om content uit te breiden naar eigen wens. Dan wordt de HTML-code ook niet vervuild met verschillende stijlen, of andere inline CSS-bagger. Een aanpassing aan de UBB-configuratie is dan voldoende om bijvoorbeeld een 'lightbox' toe te voegen.
Voor deze UBB-parser die ik in elkaar schroef ben ik bezig met NBBC, die ik gecloned heb op Github.
De source op nbbc/examples/tag_callback.php moet een beetje een idee geven wat er moet gebeuren. Van de week geef ik die misschien even een update.
Gewijzigd op 03/01/2021 16:07:18 door - Ariën -
- Ariën - op 03/01/2021 15:27:41:
Dit zijn mijn tools die ik gebruik:
- Het croppen, en resizen doe ik met de Verot.net UploadClass
- Het uploaden doe ik met PLupload die de Upload-class aanroept.
- En het zoeken in de foto's is allemaal custom made. En elke foto kan ik taggen, voorzien van auteurs en beschrijvingen. Als ik bij wijze van sprake een foto van een Audi A4 zoek, dan kan ik dus daar makkelijk op zoeken
- Het croppen, en resizen doe ik met de Verot.net UploadClass
- Het uploaden doe ik met PLupload die de Upload-class aanroept.
- En het zoeken in de foto's is allemaal custom made. En elke foto kan ik taggen, voorzien van auteurs en beschrijvingen. Als ik bij wijze van sprake een foto van een Audi A4 zoek, dan kan ik dus daar makkelijk op zoeken
Interessant! Heb even zitten kijken op verot.net, maar zie geen demo staan. Kun je hiermee een venstertje over de afbeelding leggen zodat je dat gedeelte dan kan croppen?
Had zelf zitten experimenteren met CropperJS.
https://www.verot.net/php_class_upload.htm
Hier staan zat voorbeelden en documentatie van de UploadClass van Verot.
Echter is croppen hierin een serverside method gestuurd proces. Je moet zelf zorgen voor een userinterface. Je kan dit ook wel doen in combinatie met Cropper.JS.
Hier staan zat voorbeelden en documentatie van de UploadClass van Verot.
Echter is croppen hierin een serverside method gestuurd proces. Je moet zelf zorgen voor een userinterface. Je kan dit ook wel doen in combinatie met Cropper.JS.
Gewijzigd op 03/01/2021 17:52:04 door - Ariën -
- Ariën - op 03/01/2021 17:47:19:
https://www.verot.net/php_class_upload.htm
Hier staan zat voorbeelden en documentatie van de UploadClass van Verot.
Echter is croppen hierin een serverside method gestuurd proces. Je moet zelf zorgen voor een userinterface. Je kan dit ook wel doen in combinatie met Cropper.JS.
Hier staan zat voorbeelden en documentatie van de UploadClass van Verot.
Echter is croppen hierin een serverside method gestuurd proces. Je moet zelf zorgen voor een userinterface. Je kan dit ook wel doen in combinatie met Cropper.JS.
Hoi Arién,
Ben inmiddels een heel eind. Een mediabibliotheek gemaakt met tags en beschrijving, netjes opgeslagen in database. Ik ben nog even aan het stoeien met het croppen van afbeeldingen. De oplossing die jij gebruikt is serverside had je het over.
Mogelijk kun je me nog van wat adviezen voorzien want ik heb niet helemaal in de gaten hoe dat nu precies werkt. Heb wat zitten experimenteren met cropper.js met als voorbeeld: https://www.webslesson.info/2020/08/php-crop-image-while-uploading-with-cropper-js.html. Volgens mij wordt het croppen lokaal gedaan en daarna geupload.
Wat mij opvalt is dat de kwaliteit niet zo goed is. Wanneer ik met Photoshop crop ziet het er veel beter uit. Wat is nu het verschil met de methode die jij gebruikt? En is de kwaliteit dan beter?
Ik weet dat je bij de Verot-class kan instellen wat de kwaliteit is. Ikzelf gebruik de crop-functie daar (nog?) niet, en doe dat nu nog op mijn eigen PC (Windows kan dat ook goed ;-) ). Maar de kwaliteit is standaard iets lager dan je met met de hand doet, met bijv. het desktopprogramma PixResizer. Maar alles valt bij te stellen, maar het gaat wel ten koste van de bestandsgrootte uiteraard ;-)