I'm trying to add a image from my media picker to my website. It needs to be placede as a inline in my header as a background image. But it won't get on my webpage.
Header code:
<header style="width: 100%; height: 100%; background-image: url('#Umbraco.TypedMedia(Model.Content.GetPropertyValue("backgroundimage"))')"></header>
And yes the Alias is: backgroundimage
How can i make it visual on the website?
Umbraco.TypedMedia(Model.Content.GetPropertyValue("backgroundimage")) will return an IPublishedContent object. You need to render out it's Url property in your in-line code.
Try this:
#{
var backgroundImage = Umbraco.TypedMedia(Model.Content.GetPropertyValue("backgroundimage"))
}
<header style="width: 100%; height: 100%; background-image: url('#backgroundImage.Url')">
</header>
If you want to validate whether you have a valid image or not (i.e. the user has specified one) you could take it a step further and do this:
<header
style="width: 100%; height: 100%; #(backgroundImage == null ? null : "background-image: url('" + backgroundImage.Url + "')"
>
</header>
I have tried every referenced way i can find, and the ONLY thing that worked for me was to put the whole url string plus its quotes into a string variable, and then put that variable in the background-image declaration alone. Anything else stripped my url encoding.
string BkgImage = '"' + mediaItem.Url + '"';
<a href="#post.Url" class="post-news__thumb-bkg" style="background-image: url(#BkgImage)">
<img class="post-news__spacer" src="~/Images/spacer.gif" alt="#alt" />
</a>
Related
I want to set the img as a background image, however, I am not sure how to do it.
My code in HTML is specified as
Ideally I would love something like:
img {
background-image: url(<%= image_tag #destination.image_url %>);
}
But I know it is not really possible. Any ideas how can I implement it?
Well your css.erb or scss.erb files are compiled to css in the end. So your inline erb would not work after compilation. I'm not sure if it could be configured to recompile on every request but I don't think it is ideal to do that because it would make your web pages very slow.
The image_tag helper is for creating an img tag to your html. So what you get now in your css is something like this:
img {
background-image: url(<img src="path/to/image_url.jpg" >);
}
I don't think that's what you're after.
I think you should be able to add the img to your html instead of adding it in your css and then add some css to make it fill the wrapper.
<body>
<div class="wrapper">
<%= image_tag #destination.image_url, class: 'background-img' %>
</div>
</body>
.wrapper {
width: 100%;
height: 300px;
position: relative;
}
.background-img {
position: absolute;
width: 100%;
height: 100%;
}
<div class="wrapper">
<img src="https://via.placeholder.com/300" class="background-img">
</div>
Please note that I have used a div tag instead of an img tag.
Another option is to add some inline css:
.wrapper {
width: 100%;
height: 300px;
background-repeat: no-repeat;
}
<div class="wrapper" style="background-image: url(https://via.placeholder.com/300)"></div>
I wanted to hide the image element at the left of SIGN IN button in the image, it's an image display before login. How can I do it in AngularDart?
app_component.html
<div header class="custom-header">
<img class="icon" [src]="fbService.user?.photoURL">
<div id="user-name">{{fbService.user?.displayName}}</div>
<div id="email">{{fbService.user?.email}}</div>
</div>
app_component.css
.icon {
width: 40px;
height: 40px;
margin-right: 16px;
}
<img *ngIf="authService.isLoggedIn" class="icon" [src]="fbService.user?.photoURL">
or
<img *ngIf="authService.isLoggedIn | stream" class="icon" [src]="fbService.user?.photoURL">
if isLoggedIn is a stream.
You would need a global service that provides the isLoggedIn status and is injected to the component that contains the <img ...> element (under the name authService.
I have got a category - model which i am using it for my eCommerce system , I have a fixed background image for each category added , What i want to achieve is to programatically add different background image for each category added. Below is the code , currently i am adding images through css.
#using Nop.Web.Models.Catalog;
#if (Model.Count > 0)
{
<div class="home-page-category-grid">
#(Html.DataList<CategoryModel>(Model, 5,
#<div class="item-box">
<div class="category-item"> #*Thats where i am adding background-images in the class category-item*#
<h2 class="title">
<a href="#Url.RouteUrl("Category", new { categoryId = item.Id, SeName = item.SeName })" title="#item.PictureModel.Title">
#item.Name</a>
</h2>
<div class="picture">
<a href="#Url.RouteUrl("Category", new { categoryId = item.Id, SeName = item.SeName })" title="#item.PictureModel.Title">
<img style="border-width: 0px;" alt="#item.PictureModel.AlternateText" src="#item.PictureModel.ImageUrl"
title="#item.PictureModel.Title" /></a>
</div>
</div>
</div>
))
</div>
<div class="home-page-category-grid-separator"></div>
}
Css for Category -Item
.home-page-category-grid .category-item
{
text-align: center;
margin: 10px 0px 35px 4px; /*width: 150px;*/
width: 166px;
height: 185px;
background: url('images/picture-bg.png') no-repeat 0 100%;
}
Any suggestions or alternatives will be highly appreciated , i just need to add different background images for each category items , At present the background image is fixed in the category-item class used by datalist.
You can do this if you have the stylesheet definition in your view, not in an css file. Css files are, basicly, static files like html. If you want to get some dynamic things to that you have to do it in server side code. Maybe confusing what i say.. but check my sample and you understand what i mean.... i hope ;)
// Your View
<style>
body
{
background-image: url('#ViewBag.ImagePath');
}
</style>
// your action method
public ActionResult ActionName()
{
ViewBag.ImagePath = "<path to your image">
return View();
}
I would just use multiple CSS classes, one for the general background image styles and then an individual one for each of the categories that just has the specific background-image style set with the correct image reference.
something like this:
#using Nop.Web.Models.Catalog;
#if (Model.Count > 0)
{
<div class="home-page-category-grid">
#(Html.DataList<CategoryModel>(Model, 5,
#<div class="item-box">
<div class="category-item category-#item.Id"> #*Thats where i am adding background-images in the class category-item*#
<h2 class="title">
<a href="#Url.RouteUrl("Category", new { categoryId = item.Id, SeName = item.SeName })" title="#item.PictureModel.Title">
#item.Name</a>
</h2>
<div class="picture">
<a href="#Url.RouteUrl("Category", new { categoryId = item.Id, SeName = item.SeName })" title="#item.PictureModel.Title">
<img style="border-width: 0px;" alt="#item.PictureModel.AlternateText" src="#item.PictureModel.ImageUrl"
title="#item.PictureModel.Title" /></a>
</div>
</div>
</div>
))
</div>
<div class="home-page-category-grid-separator"></div>
See how I added category-#item.Id to that same class declaration? You can also use something more semantic like the category name if you've got one, etc. Then you can do this in the CSS:
.home-page-category-grid .category-item
{
text-align: center;
margin: 10px 0px 35px 4px; /*width: 150px;*/
width: 166px;
height: 185px;
}
.home-page-category-grid .category-item .category-1
{
background: url('images/picture-bg-1.png') no-repeat 0 100%;
}
.home-page-category-grid .category-item .category-2
{
background: url('images/picture-bg-2.png') no-repeat 0 100%;
}
There are some other alternatives as well, specifically if you don't know the image url until the loop executes... in which case I would just use a style attribute with a value of background-image:url(#item.BackgroundImage).
Using samandmoore's answer, you can also do this entirely in the View, with the source of the image based on the requested URL (using #Request.RawUrl):
<div class="parallax bg-image-#Request.RawUrl.Replace('/', '-')" >
<section class="page-title">
<div class="container">
<h2>#Html.Raw(ViewBag.Title)</h2>
</div>
</section>
</div>
Does the jQuery Mobile framework have a way of centering elements, specifically buttons? It looks like it defaults to left-aligning everything and I can't find a way (within the framework) to do this.
jQuery Mobile doesn't seem to have a css class to center elements (I searched through its css).
But you can write your own additional css.
Try creating your own:
.center-button{
margin: 0 auto;
}
example HTML:
<div data-role="button" class="center-button">button text</div>
and see what happens. You might need to set text-align to center in the wrapping tag, so this might work better:
.center-wrapper{
text-align: center;
}
.center-wrapper * {
margin: 0 auto;
}
example HTML:
<div class="center-wrapper">
<div data-role="button">button text</div>
</div>
An overkill approach: in inline css in the div did the trick:
style="margin:0 auto;
margin-left:auto;
margin-right:auto;
align:center;
text-align:center;"
Centers like a charm!
In the situation where you are NOT going to use this over and over (i.e. not needed in your style sheet), inline style statements usually work anywhere they would work inyour style sheet. E.g:
<div data-role="controlgroup" data-type="horizontal" style="text-align:center;">
The best option would be to put any element you want to be centered in a div like this:
<div class="center">
<img src="images/logo.png" />
</div>
and css or inline style:
.center {
text-align:center
}
I had found problems with some of the other methods mentioned here. Another way to do it would be to use layout grid B, and put your content in block b, and leave blocks a and c empty.
http://demos.jquerymobile.com/1.1.2/docs/content/content-grids.html
<div class="ui-grid-b">
<div class="ui-block-a"></div>
<div class="ui-block-b">Your Content Here</div>
<div class="ui-block-c"></div>
</div><!-- /grid-b -->
None of these answers alone worked for me. I had to combine them. (Maybe it is because I'm using a "button" tag and not a link typed as a button?)
In the HTML:
<div class="center-wrapper"><button type="submit" data-theme="b">Login</button></div>
In the CSS:
.center-wrapper {
text-align: center;
width: 300px;
margin:0 auto;
margin-left:auto;
margin-right:auto;
align:center;
text-align:center;
}
You can make the button an anchor element, and put it in a paragraph with the attribute:
align='center'
Worked for me.
To have them centered correctly and only for the items inside the wrapper .center-wrapper use this. ( all options combined should work cross browser ) if not please post a reply here!
.center-wrapper .ui-btn-text {
overflow: hidden;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
text-align: center;
margin: 0 auto;
}
This works
HTML
<section id="wrapper">
<div data-role="page">
</div>
</section>
Css
#wrapper {
margin:0 auto;
width:1239px;
height:1022px;
background:#ffffff;
position:relative;
}
Adjust as your requirement
.ui-btn{
margin:0.5em 10px;
}
Interesting situation. I have a Html.Textbox() that I render from a view as follows:
<%= Html.TextBox("title", Model.Title, new { #class = "txt" }) %>
In my controller, I have the following, somewhat simplified, validation on the title. For arguments sake, assume it finds the error, and re-renders the view with the modelstate error information.
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult EditBook(string title) {
Model = new Book(ControllerContext.RequestContext);
if (String.IsNullOrEmpty(title))
{
title = String.Empty;
ModelState.AddModelError("title", "* Title is a required");
modelState.SetModelValue("title", ValueProvider["title"]);
}
else { // show confirmation }
if (!ModelState.IsValid)
{
return View("EditBook", Model);
}
}
When the page is re-rendered, my html text box correctly has the input-validation-error class attached to it... But it's useless as it's the first class attached! I need it to override all existing styles on my text box. The html output is as follows:
<input type="text" name="title" id="title" class="input-validation-error txt"/>
Assume the following css styles have been defined:
input.txt { border: 1px; color: #000 }
.input-validation-error { border: 2px solid #fff }
The problem is, my original css class "txt" takes precedence, and prevents me from being able to style the error text box correctly.
Any thoughts?
This is more a CSS question than ASP.NET MVC specific. You should look at the Cascading order section of the CSS spec.
With that in mind, you can change the precedence of your styles by tweaking it as follows:
input.txt { border: 1px; color: #000 }
input.input-validation-error { border: 2px solid #fff }
With the addition of the input element to the input-validation-error class, the specificity of the two styles would be the same. This will cause the styles' declaration order to be used to determine precedence (in that case the spec says that last one declared wins).
Note the example above is just one way you can control the precedence... there may be a better way, but I'm not a CSS expert. You might get a better/more insightful response if you re-ask as a CSS question with CSS tags.
PS. The order in which the class names are declared on the element is irrelevant when determining precedence.
If you add the !important modifier it should help with this problem.
.input-validation-error { border: 2px solid #fff !important; }
Also, modifying what #DSO said a bit, I'm pretty sure you could also try this:
input.txt { border: 1px; color: #000 }
input.txt.input-validation-error { border: 2px solid #fff }
Like I said, I'm pretty sure you can do that if you have something with two CSS classes.
Instead of relying on the framework to render styles at all, I went with an approach where I could apply my own css classes, while still using much of the Html.ValidationMessage() infrastructure.
Looks something like this:
<% bool emailError = !String.IsNullOrEmpty(Html.ValidationMessage("email")); %>
<div id="EmailMod" class="module <%= emailError ? "error" : String.Empty %>">
<label class="text_right">Email address</label>
<div class="input">
<input type="text" id="Email" name="Email" class="input" tabindex="1" />
<p id="EmailRequired" class="required <%= emailError ? "" : "hide" %>">* Please enter a valid email address.</p>
</div>
</div>