Previously on the CogitActive Saga:
To ensure the new reaction buttons adapt well to the varying screen sizes used by my audience, a scalable solution is essential.
For those who’ve been following along, you’ll know my quest to restore the clean, minimalist reaction buttons of my website has been anything but straightforward. For newcomers, here’s the issue: the new plugin I’ve adopted, Rating Widget, primarily focuses on emoji-based reactions. As someone who values simplicity and professionalism, I needed a workaround. That’s where the option to upload custom images came into play—a promising solution to recreate my preferred text-only buttons.
To achieve this, I decided to turn to Scalable Vector Graphics (SVGs), a format perfectly suited to maintaining sharp, adaptable designs across all devices. Unlike traditional raster formats like PNGs and JPEGs, which rely on pixel grids, vector graphics use mathematical equations to represent shapes, lines, and colors. This means SVG files don’t lose clarity or detail, regardless of how much they’re resized. They’re resolution-independent and retain their sharpness whether viewed on a smartphone screen or a large desktop monitor.
An SVG file, or Scalable Vector Graphic, is a flexible format that keeps your graphics sharp at any size. Without the pixelation issues of JPEGs or PNGs, SVGs scale flawlessly, making them a must for crisp and responsive web design.SiteGround
To ensure the reaction buttons truly aligned with my vision, the overhaul wasn’t just about aesthetics—it also meant refining the reactions themselves. After a thorough brainstorming session, I settled on a new set of labels designed to reflect engagement more meaningfully: Useless, Not Worth It, Interesting, Informative, and You made my day! Each reaction carried a clearer meaning, enhancing engagement in a way that the previous system (Like, Agree, Disagree, and Thank You) hadn’t.
To create these graphics, I turned to Inkscape, a powerful vector graphic editor. After nearly five years without crafting any new graphics for this blog, I’ll admit I was a little rusty. But with some determination—and a few nostalgic moments spent poring over my old notes on using Inkscape—I managed to create what I needed. The moment I clicked to upload my first creation, I was, however, met with an unwelcome surprise.
Undeterred, I decided to try again. Whether dragging the image file into place or manually browsing for it, every attempt was met with the same unrelenting message: “Something went wrong, please try again.” The plugin offered an alternative: uploading my image elsewhere to generate a HTML and providing that instead. Convinced that this would finally resolve the issue, I went ahead. As soon as I attempted to upload my file, a new barrier presented itself.
The Media Library serves as a central hub for managing all your website’s media assets. From images and documents to audio and video files, this repository ensures that your media files are easily accessible and organized. However, the system that handles file uploads operates under strict guidelines: only approved file types are accepted by default.
When attempting to upload a file to your Media Library, you might encounter the dreaded error message: “Sorry, you are not allowed to upload this file type.” This occurs when the file extension is not included in WordPress’s predefined list of supported formats. Here’s a quick breakdown of the default file types allowed:
- Images: .jpeg, .jpg, .png, .gif, .ico
- Documents: .pdf, .doc, .docx, .ppt, .pptx, .pps, .ppsx, .odt, .xls, .xlsx, .psd
- Audio: .mp3, .m4a, .ogg, .wav
- Video: .mp4, .m4v, .mov, .wmv, .avi, .mpg, .ogv, .3gp, .3g2
Any file extension outside of this list will trigger the upload restriction error. Notably absent from these supported formats are vector images, such as SVG files. While SVGs offer unmatched scalability and sharpness, they are excluded from WordPress’s default list due to security concerns.
At its core, the issue stems from WordPress’s default restrictions on SVG uploads—a limitation rooted in security concerns. While these files offer unmatched scalability and precision, they also introduce potential vulnerabilities if mishandled, a topic I’ll explore in the next post.
To be continued…