Images showing as 100% width

🙋Get Help
1

HI - I’m having my first real go of Frontity and I like the progress so far. However - I am running into two issues:

1: Any foogallery images will not load up - it will show data-src to be the valid jpg, but the src tag as an svg. So the images appear invisible, ie container is appropriate with, but no image.
2. Any images from elsewhere seem to appear to be 100% width - even thumbnails. Is there a way around this? There are quite a few images on my site, so a quick fix on that would be amazing.

Here’s the code that displays with Foogallery:

<img alt="" class="frontity-lazy-image skip-lazy fg-image" loading="lazy" width="200" height="300" data-src-fg="2109218829.jpg" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22200%22%20height%3D%22300%22%20viewBox%3D%220%200%20200%20300%22%3E%3C%2Fsvg%3E">

And the CSS for ‘normal’ images, ie which have been input on a page/post via creating a default Wordpress gallery:

.css-1ahxlsp-Container noscript > img, .css-1ahxlsp-Container img {
position: absolute;
height: 100%;
}

.css-x1inxt-Content img {
width: 100%;
object-fit: cover;
object-position: center;
}

.css-x1inxt-Content * {
max-width: 100%;
}

2

Hi @meggsp

Welcome to the Frontity community. Could you please provide a link to a repo so that the code for your project can be examined and, if necessary, cloned.

Please see here for the kind of information that you can provide that will help others to help you.

3

hey, thanks so much for the response :smiley:

the code is on a localhost install, as i convert my current website to react. it’s using the mars theme.

so unfortunately cannot provide a repo.
this mainly just seems to be a problem with images in WP being displayed with Frontity

4

Would this mean anything?
Access to fetch at ‘domain.co.uk/wp-json/wp/v2/posts?_embed=true&slug=us8gQnZ.jpg’ from origin ‘http://localhost:3000’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled

5

I’m not sure that this error is related to your original query. For this, though, you might find this thread useful.