[Support request] How to perfectly fit the whole image in the container block

[Dikson]

Hi I am running a event ticketing website, I have a single page with the following design. Single Event Page. I cropped the image and still the whole image is not visible in the container. I uploaded the same image in another website Same Image on another site, the image is uploaded as whole and the quality is maintained. How can I do this for my single event page. Thank you

[Dikson]

I did end up fitting the image into the middle, however how can I show a blurred banner in the background to fill the container

[Dikson]

This the template for that single event page, if it helps, Template Code for my single event page

This is sample image, of what I would like to achieve, the black marker part I would like the blurred version of the image as that speciifc columns bakcground outcome picture

[Fernando]

Hi Dikson,

I believe that section of your page is created through a plugin called The Events Manager? It would be best to reach out to them with regards to this.

Otherwise, in GeneratePress Premium, you can use a Block Element and use GenerateBlocks to add that image.

[Dikson]

Thank you, I already have this code to display the current banner version

wpem-single-event-page .wpem-single-event-wrapper .wpem-single-event-header-top .wpem-event-single-image-wrapper .wpem-event-single-image img, .wpem-single-event-page .wpem-single-event-wrapper .wpem-single-event-header-top .wpem-single-event-slider-wrapper .wpem-single-event-slider .wpem-slider-items img {
max-height: 390px;
max-width: 568px;
height: inherit;object-fit: cover;
background: #104e8b;
margin: 0 auto;
}

So there is no way to give blurred background image to that banner column using css?

[Fernando]

Try adding this CSS:

.wpem-slider-items {
    background: url(https://cdn.filestackcontent.com/blur=amount:10/resize=width:300/NpWlC9UDQHSaHEqEJtlt);
    background-size:cover;
}

Note that I got the image URL from your other site. That image is blurred itself, it’s not blurred through code. It may be good to upload a copy of that in your current site as well. Then, use the new URL.

[Dikson]

Yes this is perfect, but is there way to automatically do it, rather than writing css for each event?

[Fernando]

Would the images be different for each event? Is it based on the Featured Image or a Post meta of the event?

If so, this is doable through GeneratePress Premium and GenerateBlocks. Currently, you’re using the plugin to display that image.

[Dikson]

Yes the image will be based on the main banner image of that event, is it possible to do so through manual css code for each event?

[Fernando]

I don’t think that’s possible. It may be good to ask the Events Calendar support first.

[Dikson]

You know how you did it for all the events the same, is there a way I can change the blurred image using the pageid

something like this

e.g

.postid-46110 .wpem-slider-items {
background: url(https://cdn.filestackcontent.com/blur=amount:10/resize=width:300/NpWlC9UDQHSaHEqEJtlt);
background-size:cover;
}

[Fernando]

Yes, that should work. You’ll need to manually change the Image URL for each post though.

[Dikson]

Sorry it didnt work, do you know the exact css to write for a specific page e.g this page https://eventik.com.au/event/mens-night-out/

[Fernando]

It works.

Try this:

.postid-54267 .wpem-slider-items {
    background: url(https://cdn.filestackcontent.com/blur=amount:10/resize=width:300/NpWlC9UDQHSaHEqEJtlt);
    background-size:cover;
}

[Author]

Posts