using MS visual studio 2012, c# 4.5 and Umbraco 7.1.
I have been tweaking my master page, and I noticed I had to make images recursive (display on every page).
with property's its no problem, you simply say for example:
#Umbraco.Field("pageTitle", recursive: true)
this works fine, however for images its a little different as im using a media picker as the datatype for the image, when you do this you need to add some extra code like the following
if (Model.Content.HasValue("titleImage"))
{
var dynamicMedia1 = Umbraco.Media(Model.Content.GetPropertyValue("titleImage"));
<a class="pull-left">
<img class="media-object" src="#dynamicMedia1.umbracoFile" alt="" />
</a>
}
this display the image correctly which is great, but as it does not use umbraco.field I cant see how to use "recursive". I've tried looking at some old documentation but doesn't really reference images. And as most will know the new info Isn't quiet available + from what I found there was no mention of recursive images.
Is this possible? Am I missing something?
cheers guys
For anyone interested,
seems as the though all you need to do is add and underscore on the name, this flags the image as recursive.
.... Model.Content.GetPropertyValue("_titleImage")
You can also use Model.Content.HasValue("logotype", true) where "true" is the value of a boolean that sets the property's recursiveness. Set to "false" it will look for the property on the current page.
Related
I need to make a slideshow, on a webpage.I am not allowed to use javascript, it must be coded using c# and html using the razor syntax. I have an array of images, my lecturer suggested using switch statements, but I have been trying for weeks with no avail. I have tried, form posts, if statements, switch statements.
he will not give any more help with this.
this is my array and this is how I'm calling the variable, this works fine, however i cant figure out how to make it change when i click next or previous. I've removed all code from the buttons as nothing ive tried will work.
any help would be greatly appreciated
string[] images = {"images/1.jpg", "images/2.jpg", "images/3.jpg", "images/4.jpg", "images/5.jpeg", "images/6.png", "images/7.png", "images/8.png"};
<img src="#image" width="250px" height="250px" /><br />
<button>Next</button>
<button>Previous</button>
You could make next and previous "buttons" be links that call a controller with the number of the next and previous page in the query string parameter
You would of course ideally use JavaScript for this.
An alternative, and IMO not the best way, is to do something like:
Previous
Next
...and then get your razor template to display the appropriate image:
#{
string imageID = Request.QueryString["imageID"];
// fetch the image based on this ID
// (insert your logic here to get your image)
string theImage = #fetch.your.image
<img src="#theImage" />
}
He, I'm currently restyling a site that I'm working on. It's a VS2013 project and I'm still getting the hang of using Visual Studio for web dev.
Currently the project has quite a lot of <asp:HyperLink></asp:HyperLink> tags
I know that I can use <asp:HyperLink CssClass="testingCss"></asp:HyperLink> to change the css of these HyperLinks in css using classes but there are so many links that I'd have to edit to fix this. Is there any quicker way of dealing with this? Like making a default text color property in my site's css file?
For example, the css used in p tags:
p {
color:red;
}
I'm sure there has to be a way to do what I want to do like this p tag example I gave. Would appreciate any help I can get here as it should save a lot of time and maintenance.
Thank you in advance!
It will be a <asp:HyperLink> in your markup but when the page is rendered, this will be output as a regular HTML anchor - <a>
For this reason you can target it the same way you would any other anchor:
a { color:red }
Just Add this code to your css
a{color:#ff0000}
Turns out my problem was the bootstrap css conflicting with my other css file. I just changed the css in the bootstrap file to get what I wanted. You guys were right to say that you just need to change the a tag for HyperLinks in asp.net projects. Thanks for the help.
So I was wondering, if I have a div which contains a maps of google maps rendered with some makers and I want to take a picture of that element how can I do this?.I found this solutions it's a approach of what I need but the problem it's that sending a url doesn't help me, I need the specific Div with all the markers. For the server side i'm using C# and for the cliente, asp.net with jquery. Also the google maps apiV3 to handle the maps
Take a look at the Canvas2Image library by Nihilogic Labs:
http://www.nihilogic.dk/labs/canvas2image/
Here's an example of how to take a screenshot of an element through JavaScript:
var oCanvas = document.getElementById("thecanvas");
Canvas2Image.saveAsPNG(oCanvas);
EDIT
You might also take a look at Html2Canvas and FlashCanvas too. I believe one of them has support for earlier browsers (those which don't support HTML5).
Use the method in the link you mentioned and crop the resulting image to the dimensions of your div. You can use myDiv.getBoundingClientRect() in JavaScript to get the dimensions of your div.
Using the WebBrowser control, you can manipulate the document using html or JavaScript to get the page in the state you need to take your screenshot.
Have you considered using the Google Maps Static API - this will render a map image, with markers on it, as a PNG.
I've got your average e-Commerce app, I store ITEM_IMAGE_NAME in the database, and sometimes managers MISSPELL the image name.
To avoid "missing images" (red X in IE), every time I display the list of products, I check the server for the image related to the product, and if that file doesn't exist - I replace it with default image.
As far as i can tell this doesn't affect performance, but I was wondering if there are any alternatives to fix a "missing image" problem.
I'm using ASP.NET + C# (.NET 3.5)
Some code:
foreach (Item item in Items)
{
string path = Path.Combine("~/images/", item.categoryImage);
item.categoryImage = File.Exists(Server.MapPath(path)) ? item.categoryImage : GetImageDependingOnItemType();
}
You might consider something with javascript
<img src="image.jpg" onerror="this.onerror=null;this.src='default.jpg'">
Edit: Or program a 404.aspx returning a default image, if a nonexisting image was requested.
<style>
.fallback { background-image: url("fallback.png"); }
</style>
<img class="fallback" src="missing.png" width="400" height="300">
If missing.png loads, it will cover the space allocated for it, as if the fallback were not specified. (Assuming it's not transparent.)
If missing.png fails to load, the space will instead be filled with fallback.png. You'll still get a little "broken image" icon, but I prefer it that way... a little hint that says "fix me".
If your images aren't all the same size, you'll notice that the background tiles by default. You can use background-repeat: no-repeat; if you don't like that.
I like Erik's solution, but without removing the event after the first execution, because if you are using that code in, let's say, an MVC partial view, this will work only the first time it is loaded. So I'd go with:
<img src="image.jpg" onerror="this.src='default.jpg';" />
In case you have many images in the same situation, like a grid, you can do this instead:
$("img").on("error", function () {
$(this).attr('src', 'default.jpg');
});
Of course, you may want to use a more specific jQuery selector.
You can specify on the server what image should be returned for all requests to non-existent image files. That way the user can get a "2 AWESUM 2 SHO" lolcat instead of a red x.
I think your way is pretty much OK. I'd do it in a function or do in .categoryImage accessor.
I think I would find a way to make the data consistent rather than allowing users to enter inconsistent data. Perhaps your management app could allow the manager to select an existing image or upload a new one, then set the name of the image based on this input so that you'd be assured that the image will exist. Only remove an image when all references to it have been removed from the database. Restrict the interaction with the data to your app so that people can't make those sorts of mistakes.
Another way to handle this would be to have a handler (or a controller in ASP.NET MVC) that does the image lookup based on id and returns the image data. Coupled with caching this could be very efficient and would allow you to do image replacement as well.
Im new into that asp.net thing, but here goes.
I got at ImageButton, and when its clicked i want the image displayed in another window. If I can avoid using ajax i would like to do that.
If possible would like to make the window modal, but still avoid ajax, since Im not ready to mix more technolgies yet.
The existing answers with JavaScript are fine, but just to suggest an alternative - could you use a HyperLink (with an ImageUrl set so you still get an image) and set its Target property instead?
IMHO the best practice to show a picture is in the same page on the top of the content. I personally use Lightbox. You can find the documentation on their page, so it should be easy for you to integrate their JavaScript code.
Somewhat like this:
<asp:ImageButton ID="imbJoin" CssClass="btn-find" AlternateText="Find" ToolTip="Find" runat="server" ImageUrl="~/library/btn-find.gif" onClick="javascript:popUp("ServicesLocator.aspx")" />
Resource: http://www.experts-exchange.com/Programming/Languages/.NET/ASP.NET/Q_22832169.html
Using the ImageButton you need to use a JavaScript to open it in a new window. You can also look into the OnClientClick-event
You can use the ImageButton's OnClientClick property:
<asp:ImageButton ... OnClientClick="javascript:window.open('url_to_image');" >
But this popup window will not be modal.
The following javascript will do what you're looking for:
window.open('page.html','WindowTitle','width=400,height=200')
It might be worth pointing to a two relevant entries in the excellent EFNet's #javascript FAQ:
Correct Use of Popups - yay accessibility!
How do I make a popup window the same size as my image?
How do I create a custom 'OK' dialog or something similar? - modal windows are not that useful and something like the suggested Lightbox or similar scripts would be better "modal" options
Correct Use of Links - this one being only partly on-topic but the previous answers use of the "javascript:" pseudo protocol made it necessary: it is never required nor useful in a web page that should work across browsers. After all, JavaScript is the default (and only) scripting language.
Thank you for all the answers! I ended up using lightbox
I found this example
http://neutrongenious.wordpress.com/2007/09/08/lightbox-for-asp-net-2-0/
And it works perfectly