Hi there, I have recently moved to Cwicly from another Page Builder called Yootheme Pro. One feature I have noticed which is missing on Cwicly (which I used to have on Yootheme Pro), is the ability to insert SVG images as inline SVG instead of using the <img> tag. I want to do this becuase then I am easily able to style the SVG using CSS. But of course if the SVG gets loaded as <img> then I do not have the possibility to change it with css.
Now I know that Cwicly has an ‘Icon’ element which allows me to load inline svg, however this can’t be used with Dynamic Data (I can only load a static icon) - I will explain with an example:
I have a custom post type with a custom field (an ACF image field)
This custom field is an icon (but an svg file) that represents the service being offered on the custom post
I want to dynamically load this icon, with inline SVG, onto the front end, and then I want to change the color depending on the taxonomy term that is applied to the custom post (as that term adds a css class to the body)
When setting up the template for this, I can load the ACF image field dynamically (by loading the custom field as a Cwicly Image element), but this will only load as an <img>, so I can’t change the color using css.
If I try using the ‘Icon’ element in my template there is no option in that element to dynamically load the image
When I used Yootheme Pro, I was able to load the ACF image field and then Yootheme Pro would convert the image to inline SVG for me (Yootheme Pro uses this SVG component on the Uikit framework = SVG - UIkit).
I would really like for you to consider adding this improvement to the image element please, as I seem to have a use case for this on pretty much any website I build for a client. You could simply have a toggle in the ‘primary’ tab that says ‘Inline SVG?’ and when toggled on it would load inline SVG on the front end, and if it is toggled off then just the <img> code would load.
In the meantime, you can also add an SVG using the code block, which should give you a little more control, but yes, it would be nice to have better SVG options. Maybe it can be baked into the image block to keep things cleaner, since an SVG is an “image”, but with some kind of toggle or auto-detection that shows SVG specific options.
Thanks for your suggestion - I’m not sure if you saw but I need to load the image via dynamic data (as it is an ACF custom field), so your solution doesn’t work for that unless I’m mistaken.
Thanks again
Oops, sorry about that. I actually don’t know if you can load the type of dynamic data you’re looking for via the Code block, but like I mentioned before, I’m all for dedicated SVG tools either in the form of a new SVG block, or SVG options within the Image block.
The problem here is the wrapper which gets added to the code block in the back-end, which can result in back-/front-end discrepancies in certain scenarios if you control aspects via a wrapping div block, which generally is the case.
Not sure though, if there will be a way around this then.
I’m very happy to see the introduction of a dedicated SVG block which provides a true flexible solution for every scenario, and which also finally includes native SVG uploads.
: