Mixing
How to center an image in Azure DevOps
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
I uploaded an image as attachment in my wiki page... here the code generated to the page:
I would like to center this image. But I cannot.
I tried to wrap that YAML code inside an HTML div.. but it's like i cannot insert YAML tags inside HTML tag...
I also tried to add the style tag, but style tag is not supported in Azure devOps Wiki pages.
Finally I tried to add a HTML img tag instead of yaml, but it does not recognize therelative path of the uploaded image...
Does a way to center the image exist?
Thank you
html
azure-devops yaml asked Jan 3 at 12:21
CiccioCiccio
89311440
add a comment |
I uploaded an image as attachment in my wiki page... here the code generated to the page:
I would like to center this image. But I cannot.
I tried to wrap that YAML code inside an HTML div.. but it's like i cannot insert YAML tags inside HTML tag...
I also tried to add the style tag, but style tag is not supported in Azure devOps Wiki pages.
Finally I tried to add a HTML img tag instead of yaml, but it does not recognize therelative path of the uploaded image...
Does a way to center the image exist?
Thank you
html
azure-devops yaml asked Jan 3 at 12:21
CiccioCiccio
89311440
add a comment |
I uploaded an image as attachment in my wiki page... here the code generated to the page:
I would like to center this image. But I cannot.
I tried to wrap that YAML code inside an HTML div.. but it's like i cannot insert YAML tags inside HTML tag...
I also tried to add the style tag, but style tag is not supported in Azure devOps Wiki pages.
Finally I tried to add a HTML img tag instead of yaml, but it does not recognize therelative path of the uploaded image...
Does a way to center the image exist?
Thank you
html
azure-devops yaml asked Jan 3 at 12:21
CiccioCiccio
89311440
I uploaded an image as attachment in my wiki page... here the code generated to the page:
I would like to center this image. But I cannot.
I tried to wrap that YAML code inside an HTML div.. but it's like i cannot insert YAML tags inside HTML tag...
I also tried to add the style tag, but style tag is not supported in Azure devOps Wiki pages.
Finally I tried to add a HTML img tag instead of yaml, but it does not recognize therelative path of the uploaded image...
Does a way to center the image exist?
Thank you
html
azure-devops yaml html
azure-devops yaml asked Jan 3 at 12:21
CiccioCiccio
89311440
asked Jan 3 at 12:21
CiccioCiccio
89311440
asked Jan 3 at 12:21
CiccioCiccio
89311440
asked Jan 3 at 12:21
CiccioCiccio
89311440
asked Jan 3 at 12:21
CiccioCiccio
89311440
89311440
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
Figure out the entire path (or the right relative one) for the image and put it in an img-tag inside a <center> tag. When inserting a file in a Wiki, I get an image-url like blob:https://dev.azure.com/SOME-GUID. This url (when including the blob:-prefix, can be used to display the attached image in an img-tag.
<center>
<img src="blob:https://dev.azure.com/SOME-GUID" />
</center>
If the image is important enough to be inside a Wiki page, it's probably important enough to host it somewhere you can use it inside your wiki. Have a look at creating a public container/blob in an Azure Storage account.
EDIT:
I have migrated my Organization to "Use the new URL: https://dev.azure.com/MY-ORGANIZATION/" (from Organization Settings - Overview). This might have impact on the way attached files are uploaded, although a different organization I'm in hasn't upgraded to the new URL yet, and also gets a decent blob:blob:https://dev.azure.com/SOME-GUID url for attached files.
answered Jan 3 at 12:43
rickvdboschrickvdbosch
4,37121727
I am not sure about this solution, because the absolute path is really strange...https://mytfs.visualstudio.com/96559a72-7481-4df1-b007-a026aae9c06b/_apis/git/repositories/34a0b44d-094a-4a84-833b-9464bf081bb0/Items?path=%2F.attachments%2FMyImage_3-dc7eb2d3-c632-4fe3-831a-b5dbfcbf1d98.png&versionDescriptor%5BversionOptions%5D=0&versionDescriptor%5BversionType%5D=0&versionDescriptor%5Bversion%5D=wikiMaster&download=false&resolveLfs=true&%24format=octetStream&api-version=5.0-preview.1... I dont know what could happen if Microsoft decide to change something... I think it is not a remote idea.
– Ciccio
Jan 3 at 13:05
if I remove just a value from querystring, for example a "*version", nothing works anymore... but, hey.... the solution works...
– Ciccio
Jan 3 at 13:06
They probably won't change this url anyhow... But is this an image that is attached to a workitem? Because if it's directly under a repo the url can be a LOT simpler.
– rickvdbosch
Jan 3 at 13:08
No, it is uploaded as attachment of the wikipage
– Ciccio
Jan 3 at 13:09
@Ciccio Have a look at my updated answer
– rickvdbosch
Jan 3 at 13:22
|
show 2 more comments
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54022218%2fhow-to-center-an-image-in-azure-devops%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Figure out the entire path (or the right relative one) for the image and put it in an img-tag inside a <center> tag. When inserting a file in a Wiki, I get an image-url like blob:https://dev.azure.com/SOME-GUID. This url (when including the blob:-prefix, can be used to display the attached image in an img-tag.
<center>
<img src="blob:https://dev.azure.com/SOME-GUID" />
</center>
If the image is important enough to be inside a Wiki page, it's probably important enough to host it somewhere you can use it inside your wiki. Have a look at creating a public container/blob in an Azure Storage account.
EDIT:
I have migrated my Organization to "Use the new URL: https://dev.azure.com/MY-ORGANIZATION/" (from Organization Settings - Overview). This might have impact on the way attached files are uploaded, although a different organization I'm in hasn't upgraded to the new URL yet, and also gets a decent blob:blob:https://dev.azure.com/SOME-GUID url for attached files.
answered Jan 3 at 12:43
rickvdboschrickvdbosch
4,37121727
I am not sure about this solution, because the absolute path is really strange...https://mytfs.visualstudio.com/96559a72-7481-4df1-b007-a026aae9c06b/_apis/git/repositories/34a0b44d-094a-4a84-833b-9464bf081bb0/Items?path=%2F.attachments%2FMyImage_3-dc7eb2d3-c632-4fe3-831a-b5dbfcbf1d98.png&versionDescriptor%5BversionOptions%5D=0&versionDescriptor%5BversionType%5D=0&versionDescriptor%5Bversion%5D=wikiMaster&download=false&resolveLfs=true&%24format=octetStream&api-version=5.0-preview.1... I dont know what could happen if Microsoft decide to change something... I think it is not a remote idea.
– Ciccio
Jan 3 at 13:05
if I remove just a value from querystring, for example a "*version", nothing works anymore... but, hey.... the solution works...
– Ciccio
Jan 3 at 13:06
They probably won't change this url anyhow... But is this an image that is attached to a workitem? Because if it's directly under a repo the url can be a LOT simpler.
– rickvdbosch
Jan 3 at 13:08
No, it is uploaded as attachment of the wikipage
– Ciccio
Jan 3 at 13:09
@Ciccio Have a look at my updated answer
– rickvdbosch
Jan 3 at 13:22
|
show 2 more comments
Figure out the entire path (or the right relative one) for the image and put it in an img-tag inside a <center> tag. When inserting a file in a Wiki, I get an image-url like blob:https://dev.azure.com/SOME-GUID. This url (when including the blob:-prefix, can be used to display the attached image in an img-tag.
<center>
<img src="blob:https://dev.azure.com/SOME-GUID" />
</center>
If the image is important enough to be inside a Wiki page, it's probably important enough to host it somewhere you can use it inside your wiki. Have a look at creating a public container/blob in an Azure Storage account.
EDIT:
I have migrated my Organization to "Use the new URL: https://dev.azure.com/MY-ORGANIZATION/" (from Organization Settings - Overview). This might have impact on the way attached files are uploaded, although a different organization I'm in hasn't upgraded to the new URL yet, and also gets a decent blob:blob:https://dev.azure.com/SOME-GUID url for attached files.
answered Jan 3 at 12:43
rickvdboschrickvdbosch
4,37121727
I am not sure about this solution, because the absolute path is really strange...https://mytfs.visualstudio.com/96559a72-7481-4df1-b007-a026aae9c06b/_apis/git/repositories/34a0b44d-094a-4a84-833b-9464bf081bb0/Items?path=%2F.attachments%2FMyImage_3-dc7eb2d3-c632-4fe3-831a-b5dbfcbf1d98.png&versionDescriptor%5BversionOptions%5D=0&versionDescriptor%5BversionType%5D=0&versionDescriptor%5Bversion%5D=wikiMaster&download=false&resolveLfs=true&%24format=octetStream&api-version=5.0-preview.1... I dont know what could happen if Microsoft decide to change something... I think it is not a remote idea.
– Ciccio
Jan 3 at 13:05
if I remove just a value from querystring, for example a "*version", nothing works anymore... but, hey.... the solution works...
– Ciccio
Jan 3 at 13:06
They probably won't change this url anyhow... But is this an image that is attached to a workitem? Because if it's directly under a repo the url can be a LOT simpler.
– rickvdbosch
Jan 3 at 13:08
No, it is uploaded as attachment of the wikipage
– Ciccio
Jan 3 at 13:09
@Ciccio Have a look at my updated answer
– rickvdbosch
Jan 3 at 13:22
|
show 2 more comments
Figure out the entire path (or the right relative one) for the image and put it in an img-tag inside a <center> tag. When inserting a file in a Wiki, I get an image-url like blob:https://dev.azure.com/SOME-GUID. This url (when including the blob:-prefix, can be used to display the attached image in an img-tag.
<center>
<img src="blob:https://dev.azure.com/SOME-GUID" />
</center>
If the image is important enough to be inside a Wiki page, it's probably important enough to host it somewhere you can use it inside your wiki. Have a look at creating a public container/blob in an Azure Storage account.
EDIT:
I have migrated my Organization to "Use the new URL: https://dev.azure.com/MY-ORGANIZATION/" (from Organization Settings - Overview). This might have impact on the way attached files are uploaded, although a different organization I'm in hasn't upgraded to the new URL yet, and also gets a decent blob:blob:https://dev.azure.com/SOME-GUID url for attached files.
answered Jan 3 at 12:43
rickvdboschrickvdbosch
4,37121727
Figure out the entire path (or the right relative one) for the image and put it in an img-tag inside a <center> tag. When inserting a file in a Wiki, I get an image-url like blob:https://dev.azure.com/SOME-GUID. This url (when including the blob:-prefix, can be used to display the attached image in an img-tag.
<center>
<img src="blob:https://dev.azure.com/SOME-GUID" />
</center>
If the image is important enough to be inside a Wiki page, it's probably important enough to host it somewhere you can use it inside your wiki. Have a look at creating a public container/blob in an Azure Storage account.
EDIT:
I have migrated my Organization to "Use the new URL: https://dev.azure.com/MY-ORGANIZATION/" (from Organization Settings - Overview). This might have impact on the way attached files are uploaded, although a different organization I'm in hasn't upgraded to the new URL yet, and also gets a decent blob:blob:https://dev.azure.com/SOME-GUID url for attached files.
answered Jan 3 at 12:43
rickvdboschrickvdbosch
4,37121727
edited Jan 3 at 13:16
answered Jan 3 at 12:43
rickvdboschrickvdbosch
4,37121727
answered Jan 3 at 12:43
rickvdboschrickvdbosch
4,37121727
answered Jan 3 at 12:43
rickvdboschrickvdbosch
4,37121727
4,37121727
I am not sure about this solution, because the absolute path is really strange...https://mytfs.visualstudio.com/96559a72-7481-4df1-b007-a026aae9c06b/_apis/git/repositories/34a0b44d-094a-4a84-833b-9464bf081bb0/Items?path=%2F.attachments%2FMyImage_3-dc7eb2d3-c632-4fe3-831a-b5dbfcbf1d98.png&versionDescriptor%5BversionOptions%5D=0&versionDescriptor%5BversionType%5D=0&versionDescriptor%5Bversion%5D=wikiMaster&download=false&resolveLfs=true&%24format=octetStream&api-version=5.0-preview.1... I dont know what could happen if Microsoft decide to change something... I think it is not a remote idea.
– Ciccio
Jan 3 at 13:05
if I remove just a value from querystring, for example a "*version", nothing works anymore... but, hey.... the solution works...
– Ciccio
Jan 3 at 13:06
They probably won't change this url anyhow... But is this an image that is attached to a workitem? Because if it's directly under a repo the url can be a LOT simpler.
– rickvdbosch
Jan 3 at 13:08
No, it is uploaded as attachment of the wikipage
– Ciccio
Jan 3 at 13:09
@Ciccio Have a look at my updated answer
– rickvdbosch
Jan 3 at 13:22
|
show 2 more comments
I am not sure about this solution, because the absolute path is really strange...https://mytfs.visualstudio.com/96559a72-7481-4df1-b007-a026aae9c06b/_apis/git/repositories/34a0b44d-094a-4a84-833b-9464bf081bb0/Items?path=%2F.attachments%2FMyImage_3-dc7eb2d3-c632-4fe3-831a-b5dbfcbf1d98.png&versionDescriptor%5BversionOptions%5D=0&versionDescriptor%5BversionType%5D=0&versionDescriptor%5Bversion%5D=wikiMaster&download=false&resolveLfs=true&%24format=octetStream&api-version=5.0-preview.1... I dont know what could happen if Microsoft decide to change something... I think it is not a remote idea.
– Ciccio
Jan 3 at 13:05
if I remove just a value from querystring, for example a "*version", nothing works anymore... but, hey.... the solution works...
– Ciccio
Jan 3 at 13:06
They probably won't change this url anyhow... But is this an image that is attached to a workitem? Because if it's directly under a repo the url can be a LOT simpler.
– rickvdbosch
Jan 3 at 13:08
No, it is uploaded as attachment of the wikipage
– Ciccio
Jan 3 at 13:09
@Ciccio Have a look at my updated answer
– rickvdbosch
Jan 3 at 13:22
I am not sure about this solution, because the absolute path is really strange...
https://mytfs.visualstudio.com/96559a72-7481-4df1-b007-a026aae9c06b/_apis/git/repositories/34a0b44d-094a-4a84-833b-9464bf081bb0/Items?path=%2F.attachments%2FMyImage_3-dc7eb2d3-c632-4fe3-831a-b5dbfcbf1d98.png&versionDescriptor%5BversionOptions%5D=0&versionDescriptor%5BversionType%5D=0&versionDescriptor%5Bversion%5D=wikiMaster&download=false&resolveLfs=true&%24format=octetStream&api-version=5.0-preview.1 ... I dont know what could happen if Microsoft decide to change something... I think it is not a remote idea.– Ciccio
Jan 3 at 13:05
I am not sure about this solution, because the absolute path is really strange...
https://mytfs.visualstudio.com/96559a72-7481-4df1-b007-a026aae9c06b/_apis/git/repositories/34a0b44d-094a-4a84-833b-9464bf081bb0/Items?path=%2F.attachments%2FMyImage_3-dc7eb2d3-c632-4fe3-831a-b5dbfcbf1d98.png&versionDescriptor%5BversionOptions%5D=0&versionDescriptor%5BversionType%5D=0&versionDescriptor%5Bversion%5D=wikiMaster&download=false&resolveLfs=true&%24format=octetStream&api-version=5.0-preview.1 ... I dont know what could happen if Microsoft decide to change something... I think it is not a remote idea.– Ciccio
Jan 3 at 13:05
if I remove just a value from querystring, for example a "*version", nothing works anymore... but, hey.... the solution works...
– Ciccio
Jan 3 at 13:06
if I remove just a value from querystring, for example a "*version", nothing works anymore... but, hey.... the solution works...
– Ciccio
Jan 3 at 13:06
They probably won't change this url anyhow... But is this an image that is attached to a workitem? Because if it's directly under a repo the url can be a LOT simpler.
– rickvdbosch
Jan 3 at 13:08
They probably won't change this url anyhow... But is this an image that is attached to a workitem? Because if it's directly under a repo the url can be a LOT simpler.
– rickvdbosch
Jan 3 at 13:08
No, it is uploaded as attachment of the wikipage
– Ciccio
Jan 3 at 13:09
No, it is uploaded as attachment of the wikipage
– Ciccio
Jan 3 at 13:09
@Ciccio Have a look at my updated answer
– rickvdbosch
Jan 3 at 13:22
@Ciccio Have a look at my updated answer
– rickvdbosch
Jan 3 at 13:22
|
show 2 more comments
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54022218%2fhow-to-center-an-image-in-azure-devops%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
