Footer image resizing

Support
#1

Hi,

I’m trying to put an image in the right of my footer and it’s very small.
http://www.staging3.dangerpress.com/

I can’t seem to find a way to enlarge it other than setting the retina which only increases it a little.

How can I enlarge it so it’s readable?

Thanks,

J

#2

Hi J,

I tried checking your site but it requires a login to access.

Please provide us the details so we can check.

Thank you.

#3

Thanks Jade.
Login attached in Secure Note.

#4

This issue could be that the image is an SVG. I’ve tried using svg files in other places with the same problem of Pro not displaying the image at full size.

Are svg files not supported by Pro?

#5

Hi there,

Unfortunately, the given user/pass is not working for us. But luckily I could access to the front end of your website with no problem.

I checked the footer image and here is what I see in the code:

The original size of the image is 300 x 37, but the code limits it to 191 x 24. Please kindly use the Image element to upload the image in the Footer Builder and add the proper width/height to the options available on that element:

There is no difference between SVG and other formats when it comes to showing them in the front end of the website.

Thank you.

#6

Thanks Christopher.

When I go the Image element inspector, the Retina & Dimensions boxes are grayed out and I’m unable to adjust them.

Apologies for being unclear about the login. There are two: The staging login and WP admin. Please see the attached secure note for the complete login.

J

#7

Howdy, @Feldspar!

If I’m understanding the issue at hand, it sounds like you’re wishing to make your image appear slightly larger than it currently is due to the fact that it is an SVG and will scale without any quality loss, correct?

Pro’s current image system is built around making bitmap image formats such as .jpg, .png, and .gif retina ready out of the box. This is done by taking the overall dimensions of the image and halving them in order to ensure that they appear crisp on high pixel density devices. The Retina & Dimensions control that appears at the top of the image input is more informational in that it shows you the current dimension being set on the image, although it does have the eye toggle, which allows you to switch between showing the standard size for the image or the retina size with halved dimensions. These dimensions are output as width and height attributes on the image itself inside the element, which allows us to keep images responsive overall if they need to shrink on smaller screens. Since bitmap images cannot scale up and maintain quality, the image control is for the most part built out considering these formats in ensuring that they maintain quality by not allowing users to “stretch” the dimensions of their image larger than the original.

While we may certainly look into providing some sort of option for .svg formats in the future, allowing users to scale images as needed, for the time being you have a couple options:

  1. Make the base image size of your .svg graphic larger in your graphic editing software. I can see from my DevTools that the “natural” size of your graphic seems to be 300x27. If you were to increase the canvas size of your image to begin with in whatever vector editing program you use, when you import it you will have all that extra size to play with, and you can use the Image Element’s Width and Max Width controls to tweak the overall output to what you want.
  2. You can apply some custom CSS for this particular instance if you wish to not edit your original graphic to make it larger. Since it is an SVG, you could scale it up without issue. All you need to do is find the CSS selector for your element and target the img element inside it. For your particular markup as it currently stands, the CSS selector would be .fm5.x-image img, and then on that img itself you can apply width, max-width, min-width, et cetera, however you’re expecting it to function. Do keep in mind that if you alter the amount of elements in your footer, the unique identifier class (currently fm5) will change and you will need to update that as necessary.

Hopefully this helps to shed a little more light on this particular situation and give you a solid path forward, cheers!

#8

Thanks Kory for the very detailed answer. Great customer support.

Let me clarify the issue I’m seeing. When I try to resize the width of the svg, it doesn’t change. If I upload the same image as a .png, I’m able to adjust the width as you suggest. I’d prefer to use .svg as it displays clearer across all devices.

Per your suggestion, I’ve resized and resaved the image at the size I need, 504x64 px and uploaded it both as a .png and .svg side-by-side, with identical settings.

The .png displays correctly when I set the Setup > Width > 504 px. The .svg stays at 191px wide and can only be made smaller by clicking the Retina eye icon.

504x64 .png on the left, 504x64 .svg on the right

Examining the image container, the .png is bound in the container per it’s size correctly.

The .svg stays 24px high and has, I’m assuming, 313px of empty space to the right.

Perhaps I’m in error with my .svg formatting which I’m creating in Illustrator.

Here are my settings

And here are other possible SVG Profiles I could try

Custom CSS sounds like a good fallback option but I’d like to find a way to use the great tools you’ve created in the footer editor if possible.

J

#10

Try using an even more larger SVG. I’ve uploaded a huge SVG in my test site and configured the Width setting to 100px and it works even with Retina & Dimensions enabled and disabled (see https://youtu.be/x5qblReAADk).

As far as I know, SVG profiles are for device support and not image size but you can try switching to different profiles and see the result. 1.1 is widely used.

SVG behaves or renders differently than bitmap image formats as @kory previously mentioned. Pro doesn’t currently have SVG support and neither is WordPress out of the box. Custom CSS and further development might be required to achieve your exact need. Regretfully, that will be going outside the scope of our support. We do have an in-house custom development team that offer paid services, who may be able to assist. They can be contacted at pinnacle@theme.co if this is of interest to you.

Thank you for your understanding.

#11

Thanks for making the video Xian.

I used your svg and it worked for me exactly as you demonstrated and was easily resizable.

This must mean there is something wrong with the way I’m saving my svg.
http://www.dangerpress.com/wp-content/uploads/2016/11/Footer4.svg

I’ve used it for years on my current site’s footer with no problems.

J

#12

Yes,

The way my colleague achieved the big SVG effect was to have a 1901 x 1018 size which is very big. That is not for your case:

Try bigger sizes as my colleague mentioned and see if it can help. Anyway, that will be a temporary workaround as both of my colleagues mentioned the SVG format is not supported yet.

Thank you.

#13

Thanks Christopher.

I was able to get the svg to work by making it 2000px wide and exporting from Illustrator with these settings

J

#14

Perfect! Glad that you managed to do so. :slight_smile: