Best way to place a different image in every Card element

Support
#1

Hi!

I have seen that there are posts wondering how to place an image background in the Card element. I would like to know which one of the options is the best, considering that I plan to use many Card elements in my site, but on every instance I will use different images for both the front and the back of the card. The card will not have text, just images on both sides.

I want to plan ahead and do this in the best posible and most efficient way, so as not to screw up my site and have to correct everything later.

Is the Id, Class, Style management the best way to accomplish this?

Thanks a heap!

#2

Hey there,

There’s no option to add a background image to the card element so the only way is the advanced controls (ID, Class and Style). Please bear in mind that using advanced controls requires you have knowledge of HTML and CSS. I will show you a guide but this is outside the scope of our support to continue on developing and providing guidance. Below are the steps and here’s a video walkthrough https://youtu.be/oWLqoVN5R3M

  1. Add an ID to your card (i.e. cat). This is so you can target each card specifically.
  2. Add this code in your page’s CSS. See https://www.w3schools.com/css/ to learn CSS.
.x-card-outer .front, .x-card-outer .back {
    background-size: cover;
    background-position: center center;
}

#cat .x-face-inner {
    visibility: hidden
}

#cat .front {
    background-image: url(IMAGE_URL);
}

#cat .back {
    background-image: url(IMAGE_URL);
}
  1. Change the IMAGE_URL with the actual image URL.
  2. The selectors with an ID # are unique so you need to duplicate them and edit the ID per card.
  3. If you want all cards to have no text content, you can replace this selector #cat .x-face-inner with #page-id .x-face-inner. See https://theme.co/apex/forum/t/setup-how-to-locate-post-ids/59 to learn how to get your page id.

In case you don’t understand this guide or you find it hard to follow, please consider hiring a professional web developer especially if you have a tight deadline. We do have an in-house custom development team that offer paid services, who may be able to assist. They can be contacted at pinnacle@theme.co if this is of interest to you.

Hope this helps.

1 Like
#3

Hi!

Thank you so very much for the very detailed explanation. I am a physician, but I would very much like to learn basic CSS. Still I think I should contact the dev team as you suggest.

I plan to insert a different card in every post of my blog, so, the page will contain many many card elements, all of them with a different front and background image.

Would you predict that this will slow down or crash the site? The fact that I insert so much different CSS on it?

Alternatively, would you suggest a different way to proceed, considering I plan to insert a lot of card elements?

Thank you again for your detailed aid.

Kind regards.

#4

Hi Luis,

Adding CSS should not be a problem but if you will place a lot of custom CSS in the site, it would be best if you format them correctly to avoid CSS errors such as incorrect pairing of { } in CSS blocks. It is essential to make the code readable so that you will not have troubles maintaining it when the code gets longer. Also you can try checking out some optimization plugins for your site to minify the CSS which will make the load time faster. This is however, an advance option which you may consider if it if necessary for your site.

The card element is a very specific element with specific functionality to it. Unfortunately, the option I could suggest for now is to use the custom CSS as the functionality you require is not available in the current element.

Hope this helps.

1 Like
#5

Thank you for your advice!

Just to check if I am understanding correctly: if I were to format my CSS correctly, the fact that I plan to customize many many cards would not affect the site performance? I plan to use a custom image for the front and back of the card, in every single of my posts.

Another quick question: how can I resize the Card element so it fits the image that I plan to have as a background? I don’t want it to wrap around, nor to appear cropped.

Thanks again for the kind support!

#6

Hello There,

Thanks for updating in!

1.) It may not affect the site performance because the css is separate from the card. The card will be loaded on the page immediately and there would be a bit of delay in showing the background image especially if the image has a bigger file size.

2.) To resize your card element, please add an inline css max-width: 300px; (assuming your image is 300 pixels wide) in the card element settings style field. With Background image you can hardly achieve a total responsiveness without compromises. I would like you to try this demo here: https://davidwalsh.name/demo/background-size.html which would explain how background image works.

Hope this helps.

#7

Hi!

Thank you so much, it is much clearer now.

Regarding the CSS for the max width, you mentioned that I should add it “inline”, where should I add it? I always thought inline meant directly on the HTML. Should I add it to each card element in the general CSS?

#8

Hi There,

Inline means that we will add it on the style field of the element. Inline css will only work on that specific element and has greater precedence or higher priority compare to other CSS for that element.

Hope this helps.