Using SEARCH Child theme and cannot swap out the top image

[Janet Davis]

Hello,

I am using the Search child theme built into GP.
The top image on the site of a female looking at a piece of paper – I am trying to swap this image out. I am not sure if it is size etc.

I created a replacement image that is saved as an SVG file at 9kb and as a PNG.
When I change the image to the svg no image appears. I can put the PNG file into it.

ANy idea why I can’t put the SVG file in.

Thank you
Janet

[Ying]

Hi Janet,

You’ll need an SVG support plugin in order to upload to WP.

This article should be helpful.
https://www.wpbeginner.com/wp-tutorials/how-to-add-svg-in-wordpress/

[Janet Davis]

The original image from downloading the theme was an SVG. Why would I need a plugin when I’m using a different file but still svg?

[Ying]

Once the SVG is uploaded, you won’t need the svg plugin to be activated anymore, that’s why you are able to use the SVGs which are already in the media library even without plugins.

But to upload new SVG, yes, you need plugin to do so.

[Janet Davis]

I’m not having issues adding the svg to the site. I did add the plugin and there wasn’t any difference in up loading. The issue is the picture. On the homepage the only SVG that will load is the original and only if I use undo, not if I add a new block and try to mimic the child theme block.

And when I do get a svg file to switch out as it is on the about page the full image doesn’t show.

Thank you again.

[Ying]

Sorry I misunderstood your question, have you tried adjust the image size in the block meta box when you switch or add an svg? Let me know 🙂
https://www.screencast.com/t/my5uAzT6AUE0

[Janet Davis]

This only works on images that are set as images, not ones that are background.
I did a replacement on the homepage, but not on any other devices. I’ve played with the sizing under background. Background for the tablet, and phone. But they still don’t show the entire image.

The home page and the about page are both images I just replaced and then have the issue.

Thank you

[Elvin]

Hi there,

The image isn’t “showing” because the SVG’s fill colors are all #fff with opacity set. #fff is the hex code of white.

And since its section’s background is almost white, it basically almost blends in, making it barely visible.

If you change the background-color value, the background image will be more pronounced as shown here: https://share.getcloudapp.com/WnuB72Ze

A wise man once said:
"Have you cleared your cache?"

[Janet Davis]

The main image on the homepage on the desktop and some larger laptops is fine. It doesn’t show up at all on the ipad and the phone. I played with the minimum height for the tablet and now the image shows on the tablet and iPhone. However, it doesn’t show the full picture on the iPad and it’s too large.

I’m looking for some kid of CSS to put into the site so that the image on the iPad is smaller but complete.

The image on the About page I ended up doing differently and got it to work. The home page image I don’t want side by side like the about page on the iPad.

Thank you

[Ying]

If you use SVG as background image and you don’t want it to be cut off in smaller screen, you can try:

1. set the Size to Contain which was Cover by default.
https://www.screencast.com/t/ozCSm6ZNt5B

2. After step 1, you could try to reduce the top/bottom padding of the container under laptop view, so the entire container shrinks, the image should get smaller too.

[Janet Davis]

The size to container worked like a charm.
Thank you so much!

[Ying]

You are welcome 🙂

[Author]

Posts