Dynamic Css
How Do I?
Hello,
I am trying to create a dynamic blog card.
I would like the freedom to allow users to upload the featured image. Maintain the original image that user uploads without processing/resizing.
I would like to use a css property with a background as a cover.
{exp:channel:entries channel="blog_news" disable="categories"}
{blog_card_img}
<div class="blogcard_img" (style)="background-image: url({url});width: 100%; height: 350px; background-size: cover;></div>
{/blog_card_img}
{/exp:channel:entries}
The above code did not work. It is displaying the image at the tag “{blog_card_img}” it is not getting the image from the {url}. What am I doing wrong here?
The following also did not work.
Link custom stylesheet from EE. Created a css style in EE. Linked in templated.
<link href=”{path={Style/dynamicStyle}}” rel=”stylesheet”>
and the css contains:
/* Blog Cards */ .blogcard_img{ width: 100%; height: 350px; background-image: url({blog_card_img}); background-size: cover;
}
Please help.
Forum was removing code. (style) does not have (parentheses).
Have you thought about using an add-on?
Ansel should manage this for you and you - https://www.buzzingpixel.com/software/ansel-ee
Has a 30 day trial.
Thanks for the tip on the plugin.
Not quite what I am looking for. I’m looking for understanding on the proper way to use EE and its native abilities to the max.
Do you happen to know how to do what I described?
Thanks
Yeah should do, my guess is that if it’s not working then it’s a CSS issue that needs resolving.
You should be able to target the image within the div to fill with cover.
I’m so happy.
To use this feature, open a Module message, dino game then click “Add Cards” and then “Dynamic Cards.” There will be an input section where you can enter the URL of the service that will return the Cards.
This post came up for me. It appears to be a year old. However it does not seem to have a response.
Where you able to find a solution?
Why do did you have the the “style” wrapped in brackets ‘{}’? Perhaps that was the issue.
One more thing that I would suggest is to add a conditional for if there is an image. Or you might get an error if you dont make it required.
Try this code: See if it works.
{exp:channel:entries channel="blog_news" disable="categories"}
{if blog_card_img}
{blog_card_img}
<div class="blogcard_img" url({url});width: 100%; height: 350px; background-size: cover;></div>
{/blog_card_img}
{/if}
{/exp:channel:entries}