Forum

Thread tagged as: Question

Workflow question — How do I let clients upload SVG _or_ PNG / JPG?

I have a "Sponsors" section on a client site.

The sponsor logo should ideally be an SVG, and the client has SVGs for about 90% of sponsors. Sometimes an SVG is not available though, and we'll have to make do with a PNG or JPEG.

I understand how to add an SVG upload e.g. like this https://grabaperch.com/blog/archive/svg-images-in-perch, and I understand how to program responsive images.

My question is, how can the image tag generate images dynamically, depending the file type uploaded? My impression is that this is not possible, and I would have to program two different upload sections—the first for an SVG upload, and the second for a regular PNG/JPG.
Jay George

Jay George 2 points

  • 4 years ago
Drew McLellan

Drew McLellan 2638 points
Perch Support

4 years ago

What different markup are you trying to achieve?
Jay George

Jay George 2 points

4 years ago

I'd like an upload section in the admin, like normally you have with an image, but it should be able to handle either an SVG or a responsive PNG/JPG. Maybe it's already possible to do that but it's not in the docs? (or I've missed it)

If so, please can you give me an example of the Perch markup? If not, feature request? :-)
Jay George

Jay George 2 points

4 years ago

For example, the markup for SVG and a responsive image are quite different

Responsive Image might be:

<img 
    src="<perch:content type="image" id="feature_image" label="Feature Image" width="135" quality="100" sharpen="0"/>"

    srcset="
    <perch:content type="image" id="feature_image" description="retina" density="2" width="135" quality="100" sharpen="0"/> 2x"

    alt="<perch:content type="text" id="feature_image" label="Description"/>"
/>

SVG might be:

<perch:content id="feature_image" type="image" label="Feature Image" output="tag" include="inline" width="135" />

In the markup how can I say, "if svg, use <perch:content id="feature_image" type="image" label="Feature Image" output="tag" include="inline" width="135" />, else use the responsive image markup?
Drew McLellan

Drew McLellan 2638 points
Perch Support

4 years ago

I think you'd need to add an option for the editor to select what type of approach they wish to use.
Jay George

Jay George 2 points

4 years ago

OK thanks for clarifying. I guess I could have a checkbox to say "Are you uploading an SVG?" and then have an if statement in the HTML file.

This would be a good workflow example for your feedback request as per https://grabaperch.com/blog/archive/svg-images-in-perch Getting sponsor logos from different vendors is tough because the client is not always able to obtain SVGs, in which case they'd need to fallback to a standard image format.