- This topic has 13 replies, 2 voices, and was last updated 1 year, 6 months ago by Fernando.
-
AuthorPosts
-
October 10, 2022 at 6:01 pm #2369340Dikson
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
October 10, 2022 at 6:42 pm #2369349DiksonI did end up fitting the image into the middle, however how can I show a blurred banner in the background to fill the container
October 10, 2022 at 6:50 pm #2369351DiksonThis 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
October 10, 2022 at 7:20 pm #2369356Fernando Customer SupportHi 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.
October 10, 2022 at 7:55 pm #2369377DiksonThank 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?
October 10, 2022 at 8:02 pm #2369385Fernando Customer SupportTry 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.
October 10, 2022 at 8:05 pm #2369390DiksonYes this is perfect, but is there way to automatically do it, rather than writing css for each event?
October 10, 2022 at 8:15 pm #2369392Fernando Customer SupportWould 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.
October 10, 2022 at 8:17 pm #2369395DiksonYes 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?
October 10, 2022 at 8:21 pm #2369398Fernando Customer SupportI don’t think that’s possible. It may be good to ask the Events Calendar support first.
October 10, 2022 at 8:26 pm #2369401DiksonYou 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;
}October 10, 2022 at 10:15 pm #2369434Fernando Customer SupportYes, that should work. You’ll need to manually change the Image URL for each post though.
October 10, 2022 at 10:16 pm #2369435DiksonSorry 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/
October 10, 2022 at 10:20 pm #2369439Fernando Customer SupportIt works.
Try this:
.postid-54267 .wpem-slider-items { background: url(https://cdn.filestackcontent.com/blur=amount:10/resize=width:300/NpWlC9UDQHSaHEqEJtlt); background-size:cover; }
-
AuthorPosts
- You must be logged in to reply to this topic.