replace image in media node - Templates, (partial) views and macros

Go to solution

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

Dipa 88 posts 370 karma points

Mar 31, 2016 @ 09:39

0

Overwrite image in 'Media' node

Hello, I have query related to media tree node content. I have developed a site and published it. But now I want to replace the existing image. So when I am adding image with same name under 'Media' node it creates new image with (1) name.

Means if I have image with name 'Untitled.png' under 'Media' node, then I add image with same name then it creates a new with name 'Untitled(1).png'. I want to overwrite the image only.

How can I overwrite the image? Help me with this issue ASAP. I got headache in this image replacing issue.

Thanks, Dipa

Copy Link
Dennis Adolfi 1082 posts 6449 karma points MVP 6x c-trib

Mar 31, 2016 @ 09:53

0

Hi Dipa.

I think this is how Umbraco handles uploads with the same name by default. Would be quite scary if Umbraco would override a Image with the same name by default. Not sure if you can configure it to override images with tha same name.

To replace a existing image, click on the image in Media, then "Remove file(s)", and then upload a new file with the same filename (to preserve the link to the image).

Hope this helps you!

Copy Link
Dipa 88 posts 370 karma points

Mar 31, 2016 @ 10:49
0
Hi Dennis,

I can not follow your suggestion. Because in template I have used that image like this :
```
<img alt="" src="~/media/1165/Umtitled.png">
```
If I will remove and add new one then it will generate new Id for it and image will not be displayed.

Can you suggest me any other way for this issue? Please help me.

Thanks, Dipa
Copy Link
Dennis Adolfi 1082 posts 6449 karma points MVP 6x c-trib

Mar 31, 2016 @ 10:58

101

Oh, sorry if i explained myself badly. I dont suggest you remove the entire media node, just the image inside the node. That way the ID of the node remaions the same but you replace the image.

Copy Link
Dipa 88 posts 370 karma points

Mar 31, 2016 @ 11:10

1

Thanks Dennis,

I got the solution.

Copy Link
Dennis Adolfi 1082 posts 6449 karma points MVP 6x c-trib

Mar 31, 2016 @ 11:12

0

Awsome, great to hear. Glad i could help! :)

Have a great day!!

Copy Link
Dipa 88 posts 370 karma points

Mar 31, 2016 @ 12:04
1
Hi Dennis, Your help was helpful.

Using your way MediaID is not changing. But in project solution under media folder it is generating new folder. And to display I am not using media ID I am using it like this :
```
<img alt="" src="~/media/1165/Umtitled.png">
```
Did you get my point?
Copy Link
Dennis Adolfi 1082 posts 6449 karma points MVP 6x c-trib

Mar 31, 2016 @ 12:18
1
Ah, i see. Well then you probobly have to update the folder path or fetch the image in your view using a Media ID instead of the path. That could probobly be a good idea anyway for the future if you´re changing the image again.
```
<img alt="" src="@Umbraco.TypedMedia(id).Url">
```
Copy Link
Dipa 88 posts 370 karma points

Apr 01, 2016 @ 05:31
0
Hi Dennis,

Your suggestion works perfectly for me in any html or cshtml page. That is good way to use mediaID to render it.

But I have one more query. If I want to use same in style(.css) file then ? Means I have a class like below :

CSS
```
.Banner{
    top: 0;
    display: block;
    height: 555px;
    background: rgba(0, 0, 0, 0) url("../media/1118/banner.png") no-repeat scroll center top;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1) inset;
    position: fixed;
    width: 100%;
}
```
HTML
```
<div class="Banner"></div>
```
How can I use mediaID in this case? Please help me with this.

Thanks.
Copy Link
Dennis Adolfi 1082 posts 6449 karma points MVP 6x c-trib

Apr 01, 2016 @ 06:21
1
Great to hear that it worked for you! Glad that i can be off help.

In your case with the css class, since you already set how you´d like background to be rendered, you just have to specify the background image in your view and it should be fine:
```
<div class="Banner" style="background-image: url('@(Umbraco.TypedMedia(id).Url)')"></div>
```
Leave your class the way it is, and the rest of your defined styles will be applied from your class.
Copy Link
is working on a reply...

Please Sign in or register to post replies

Flag this post as spam?

Overwrite image in 'Media' node