Is there any way to reverse WordPress shortcode tags to get plain HTML?
The only solution I have come up with has been to parse out any HTML contained between the tags, however this doesn't work with some plugins like Caldera Forms.
Example from WP docs:
[caption id="attachment_6" align="alignright" width="300"]<img src="http://localhost/wp-content/uploads/2010/07/800px-Great_Wave_off_Kanagawa2-300x205.jpg" alt="Kanagawa" title="The Great Wave" width="300" height="205" class="size-medium wp-image-6" /> The Great Wave[/caption]
Expected:
<img src="http://localhost/wp-content/uploads/2010/07/800px-Great_Wave_off_Kanagawa2-300x205.jpg" alt="Kanagawa" title="The Great Wave" width="300" height="205" class="size-medium wp-image-6" />
The Great Wave
You can try inspecting the element using Chrome dev tools to see what's rendered. Then you can copy that. Knowing your ultimate goal could be helpful
Related
I am asked to do the localization of an old project. I did all the text part.
But I am stuck on Images.
<img id="img78" src="~/images/f1/step.jpg" runat="server" alt="image2" width="267" />`
This is one of the image tag I am struggling to fix. I have different images for German and French.
This is in a UserControl. I have 3 different resource file on the LocalResources folder of the UserControl. All text fields are working.
This is due in 2 days. Any help would be appreciated. I am new to programming. This project is done in old asp.net.
Is it possible to set the src from LocalResourceFile.
I tried the following way but didn't work:
<img id="img78" src='~/images/<%= GetLocalResourceObject("step1") %>/step1_2.jpg' runat="server" alt="image2" width="267" />
My ResourceFiles are Activate.ascx, Activate.ascx.de, Activate.ascx.fr
ResoucefileEntry :- (Name)step1.Text
(value)g1
I need to change the url for <img src=>
for German as `src="~/images/g1/step.jpg"`
for French as `src="~/images/f1/step.jpg"`
for English as `src="~/images/e/step.jpg"` This is the default.
The project I'm working on has a standard that HTML5 code must also be well formed XML. This requirement is built into automated tests. This means empty elements like img, link, br, hr, ... must have a /> closing delimiter - not just a >.
For example:
1) good: <img src="foo.png" alt="stuff" />
2) bad: <img src="foo.png" alt="stuff">
I'm using Intellij IDEA 2018.2. I have Emmet enabled. To create an img element I type img followed by a TAB. Emmet expands this to <img src="" alt=""> but that's not well formed XML. I want it to automatically self-close resulting in <img src="" alt="" />. I've also tried CTRL+SPACE auto-complete with the same result.
Question: How do I get Intellij IDEA to automatically self close HTML5 empty elements?
This is a simple question and I've done internet searches and looked at Intellij Settings and documentation but still haven't found an answer. Maybe I'm just missing it ...
In HTML5 tags like <br> or <img> do not require a "/ " for closing them like <br/> (http://www.w3.org/TR/html5/text-level-semantics.html#the-br-element,
http://www.w3.org/TR/html5/syntax.html#void-elements).
However, you can easily change current behavior in Settings | Editor | Live Template | Zen Html | br/img by modifying the templates accordingly:
I get HTML code from the backend via $http of AngularJS, and log the code retrieved and is OK, but to see it in the browser, the html structure changed.
This is the code that I get:
<a href=" http://www.google.com" target="_blank">
<figure>
<img class="img-responsive" src="/sites/Satellite;jsessionid=pk_tbxorbyJ4KrsWxo1jaVBFYvQPx1VovEs2GpjWziIk6cFaL50_!650994948?blobcol=urldata&blobkey=id&blobtable=MungoBlobs&blobwhere=1462843196206&ssbinary=true" />
</figure>
<p> Some text</p>
</a>
and this is what the browser displays:
<a href=" http://www.google.com" target="_blank">
</a>
<figure>
<img class="img-responsive" src="/sites/Satellite;jsessionid=pk_tbxorbyJ4KrsWxo1jaVBFYvQPx1VovEs2GpjWziIk6cFaL50_!650994948?blobcol=urldata&blobkey=id&blobtable=MungoBlobs&blobwhere=1462843196206&ssbinary=true">
</figure>
<p> some text</p>
Then I did the following test, log the code retrieved
$log.debug(vm.myHtml);
and then sanitize the code with
$log.debug($sce.getTrustedHtml(vm.myHtml))
and I get the same previous difference.
I was having the same problem and so played around with the Plunker available on the AngularJS docs.
I then modified it by placing some <h1> tags within <a> tags (see this plunker). The good news was that it worked in this most basic case. This had me scratching my head for ages.
In the end, I was just guessing that maybe the version of ngSanitize that I was using was maybe a little old and at some point they had slightly changed the way the tags were mapped, split and then rendered. I looked through the history but couldn't find anything. In the end, i updated to 1.5.7 the same as the version in the plunker. And smiling again :)
just wondering if there is a way to reduce the amount of code needed when displaying a lot of images in HTML?
I am wanting to display around 2-300 images in a gallery, and at the moment the HTML will look like this:
<div id="scroller>
<img src="/Content/images/decking/decking-1.jpg" width="100" alt="" />
<img src="/Content/images/decking/decking-2.jpg" width="100" alt="" />
<img src="/Content/images/decking/decking-3.jpg" width="100" alt="" />
<img src="/Content/images/decking/decking-4.jpg" width="100" alt="" />
<img src="/Content/images/decking/decking-5.jpg" width="100" alt="" />
</div>
...but down to image "decking-250.jpg".
Is there a more efficiant way to display the images so that I don't have 250+ lines of "img src" HTML?
The only part of the filename that changes is the "-1", "-2", "-3" etc etc. The rest, including the Alt tag can remain empty.
I am building this site in ASP.Net MVC3 Razor using the ASP.net online tutorials as a guide if that helps any solution come to mind, of if it simply has to be done that way then that is also fine - I just wondered if there was another approach I should consider to learn?
Many thanks in advance.
This is the way HTML works. You can't reduce that, as you need one img tag for each picture. You may create that code dynamically via PHP, JS, …. But in the end you'll get a long list of img tags, maybe individually wrapped by other tags (for example in a list).
I agree with Feela, and though it may appear verbose, your code is about as bullet-proof as it gets. Yet if something like JS is something you can use (or are using already), there are options. This isn't tested, but you could set up a for-loop statement in Jquery/Javascript that could condense the code. For example:
for (i=1; i < 250; i++) {
$('#scroller').append('<img src="/Content/images/decking/decking-' + i.toString() + '.jpg" width="100" alt="" />');
}
I'm no ASP coder, but perhaps it provides something functionally similar.
I'm trying to find a way of enriching information about images in a web page using schema.org.
The following code, however, doesn't seem to pass muster:
<figure itemscope itemtype="http://schema.org/ImageObject" class="figure-container" style="width: 580px">
<img itemprop="image" src="http://cdn.donaldjenkins.com/media/blog-posts/gtd-apps-1.jpg" alt="The Omnifocus Mac app" width="580" height="450" title="The Omnifocus Mac app">
<figcaption itemprop="description"><span itemprop="name">The Omnifocus Mac app window</span>, showing the Perspectives settings panel. This is a powerful feature that allows you to conceal part of the app's inherent complexity when you want to. But Things allows you to do the same more easily with its 'Areas of responsibility' feature.</figcaption>
</figure>
Including a <span>element as a child of a <figure>element doesn't validate, but I haven't found another way of appending the nameattribute to another tag, since the text doesn't actually require formatting.
Any suggestions as to how to achieve this would be welcome. I'm also at a loss to understand why <span>can't be a child of <figure>...
Try the validator at http://validator.w3.org/nu/, I copy/pasted your fragment and it validated just fine.