- This topic has 11 replies, 3 voices, and was last updated 1 day, 5 hours ago by Ying.
February 22, 2021 at 10:50 am #1668151Janet Davis
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.
JanetFebruary 22, 2021 at 11:34 am #1668207YingStaffCustomer Support
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/February 22, 2021 at 12:21 pm #1668254Janet 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?February 22, 2021 at 12:41 pm #1668283YingStaffCustomer Support
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.February 22, 2021 at 1:14 pm #1668315Janet 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.February 22, 2021 at 1:30 pm #1668325YingStaffCustomer Support
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/my5uAzT6AUE0February 22, 2021 at 5:05 pm #1668495Janet 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 youFebruary 22, 2021 at 8:29 pm #1668597ElvinStaffCustomer Support
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?"February 23, 2021 at 6:43 am #1669099Janet 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 youFebruary 23, 2021 at 9:13 am #1669455YingStaffCustomer Support
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.
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.February 23, 2021 at 11:24 am #1669613Janet Davis
The size to container worked like a charm.
Thank you so much!February 23, 2021 at 12:07 pm #1669667YingStaffCustomer Support
You are welcome 🙂
- You must be logged in to reply to this topic.