Sorry this might be a newbie question but I am quite new to Umbraco.
I have a media picker set up on a document type, and it all works fine.
So I go to the template and enter
#Umbraco.Field("bottomRightLarge")
this only gives me the ID of the image, how can I get this to show the actual image the user has selected?
I am using UMBRACO 7 - and I have tried http://our.umbraco.org/projects/website-utilities/social-bookmarking-button/general-discussions/19360-Displaying-an-image-from-Media-Picker-in-a-web-page - but the XSLT ERRORS bug time.
Try using the umbraco image item if using webforms or umbraco media for mvc
<img src="#Umbraco.Media(model.articleImageOne).Url" alt="">
or
<umbraco:Image field="articleImageOne" runat="server" />
This worked for me
<umbraco:Macro runat="server" language="cshtml">
<img src="#Model.MediaById(Model.topleftsmall).umbracoFile" alt=""/>
</umbraco:Macro>
please note I was trying this on firefox 20.0.1, and the save just didnt work properly.
Related
on a dev box we have noticed in some text attributes the media encased urls eg:
<img src="{{media url="wysiwyg/diagram/bigpool.jpg"}}"/>
are being displayed on the front end as
<img src="{{media url="wysiwyg diagram bigpool.jpg"}}"/>
and obviously breaking the image links. Playing around with {{skin url & {{ base url yields the same results. Any URLs outside of this are working fine.
To clarify it is saving correctly in the database (with slashes) but rendering in the browser without which is breaking the image.
I've also hardcoded the url without the {{media url=""}} and it will render fine.
Has anyone run into this problem before or any ideas on what would be causing this? Google and SE are not being to helpful!
The dev box is running NGINX, hhvm & Magento CE 1.9.2
Cheers.
You can use below code
<?php
$string='<img src="{{media url="wysiwyg diagram bigpool.jpg"}}"/>';
echo $this->helper('cms')->getBlockTemplateProcessor()->filter($string)
?>
This will display proper image as you want.
Note upfront: I do not have any experience using scripts but only some basic HTML and PHP skills.
I would like a page on my google site to refresh automatically as soon as the embedded google form was submitted. This to instantly display the embedded and updated google form results after the button is clicked without the visitor having to reload the page manually. (like you would have for any online poll)
My form sheet is updating perfectly but I have not yet found an example or tutorial how to make a page refresh work for the google site with an embedded google form when the submit button is clicked. I hope someone can help me by providing an example on how to make this work. Preferably I would like to use an embedded google form rather than having to create a separate PHP form loading into google forms what could be an alternative. Thanks.
Below the HTML as I can see it on my Google page. I would need a trigger I guess from these embedded forms to refresh the page on submit. I just have no idea on how to get this done.
<div>
<div style="text-align:left">
<div><img src="https://www.google.com/chart?chc=sites&cht=d&chdp=sites&chl=%5B%5BSpreadsheet+form'%3D20'f%5Cv'a%5C%3D0'10'%3D499'0'dim'%5Cbox1'b%5CF6F6F6'fC%5CF6F6F6'eC%5C0'sk'%5C%5B%22test+int+sheet%22'%5D'a%5CV%5C%3D12'f%5C%5DV%5Cta%5C%3D10'%3D0'%3D500'%3D397'dim'%5C%3D10'%3D10'%3D500'%3D397'vdim'%5Cbox1'b%5Cva%5CF6F6F6'fC%5CC8C8C8'eC%5C'a%5C%5Do%5CLauto'f%5C&sig=5VZGSIULBu8sSdf833qiLWVDcx8" data-origsrc="1VACx4d2pJEZlvAezbO9Gnh_nX3nIPwSJ4iCNjEmCiUM" data-type="spreadsheet-form" data-props="align:center;borderTitle:test int sheet;doctype:freebird;height:400;objectTitle:test int sheet;showBorder:false;showBorderTitle:false;wrap:false;" width="500" height="400" style="display:block;margin:5px auto;text-align:center;"></div>
<br>
</div>
<div style="text-align:left"><img src="https://www.google.com/chart?chc=sites&cht=d&chdp=sites&chl=%5B%5BGoogle+Gadget'%3D20'f%5Cv'a%5C%3D0'10'%3D499'0'dim'%5Cbox1'b%5CF6F6F6'fC%5CF6F6F6'eC%5C0'sk'%5C%5B%22Include+gadget+(iframe)%22'%5D'a%5CV%5C%3D12'f%5C%5DV%5Cta%5C%3D10'%3D0'%3D500'%3D397'dim'%5C%3D10'%3D10'%3D500'%3D397'vdim'%5Cbox1'b%5Cva%5CF6F6F6'fC%5CC8C8C8'eC%5C'a%5C%5Do%5CLauto'f%5C&sig=t6_Deqv8rgMQCB28aqz1n9MoVTU" data-igsrc="http://164.gmodules.com/ig/ifr?mid=164&synd=trogedit&url=http%3A%2F%2Fhosting.gmodules.com%2Fig%2Fgadgets%2Ffile%2F106581606564100174314%2Fiframe.xml&up_iframeURL=https%3A%2F%2Fdocs.google.com%2Fspreadsheets%2Fd%2F1g2cGeavUciTy6po7_DXPXMNqC1fqTTROHRoTnsafFfM%2Fpubhtml%3Fgid%3D754672963%26single%3Dtrue&up_scroll=no&h=400&w=100%25" data-type="ggs-gadget" data-props="align:center;borderTitle:Include gadget (iframe);height:400;igsrc:http#58//164.gmodules.com/ig/ifr?mid=164&synd=trogedit&url=http%3A%2F%2Fhosting.gmodules.com%2Fig%2Fgadgets%2Ffile%2F106581606564100174314%2Fiframe.xml&up_iframeURL=https%3A%2F%2Fdocs.google.com%2Fspreadsheets%2Fd%2F1g2cGeavUciTy6po7_DXPXMNqC1fqTTROHRoTnsafFfM%2Fpubhtml%3Fgid%3D754672963%26single%3Dtrue&up_scroll=no&h=400&w=100%25;mid:164;scrolling:no;showBorder:false;showBorderTitle:null;spec:http#58//hosting.gmodules.com/ig/gadgets/file/106581606564100174314/iframe.xml;up_iframeURL:https#58//docs.google.com/spreadsheets/d/1g2cGeavUciTy6po7_DXPXMNqC1fqTTROHRoTnsafFfM/pubhtml?gid=754672963&single=true;up_scroll:no;view:default;width:100%;wrap:false;" width="500" height="400" style="display:block;margin:5px auto;text-align:center;" class="igm"></div>
<div style="text-align:left"><br>
</div>
<div style="text-align:center">
<div></div>
<br>
</div>
<div style="text-align:left">
<div style="text-align:center"><br>
</div>
<div style="text-align:center"><br>
</div>
<br>
</div>
</div>
I'm sorry to be the annunciator of a such bad news but that's impossible.
As your code show, you are actually using a google Site to display your google form. The line:
<img src="https://www.google.com/chart?chc=sites&cht=d&...
IS the way google tell you there is a google form in this page when you hit the button to get the source code.
In other words: google don't let you put whatever you want in a google site. It's impossible to add some JS code that will be fired when the user submit the form.
Even if you host your form in something else than a google Site, you won't have this ability, as the form himself will be displayed in an iframe that can't be modified by external scripts.
This is an hard limitation of Google Form, the only workaround that you may use is to write to the user in the confirmation message of the form that he now need to reload the page or go to an other link.
Hi im now trying bootstrap for the first time and i cant seem to put an image in the bootstrap base 64 can anybody help me usually i use the
<img src=''>
This is my usual code in html5 and i know where to put the url or image path
where the image is located and the type of image it was
now im trying to put this code using bootstrap and I dont know how to use or make a responsive image
<img data-src="holder.js/200x200" src="data:image/png;base64," class="img-thumbnail" alt="">
i also tried this website http://getbootstrap.com/2.3.2/components.html#thumbnails but i dont even know how to use it and i dont know where to put the image path can anybody help me im kind of a noob at bootstrap and thanks! any help would really be appreciated
sorry guys i had seen some answers and got this also thanks for trying!
</div>
<div class="thumbnail">
<img src="image/untitled.png" alt="">
</div>
I am trying to add the images as button into existing article of web page. When I click on that button it have to redirect into another page or Url.
I have searched on net. I didn't get satisfied response.
I have gone through this page too.
Any help will be appreciated!!!
Actually, I have added the button using edit code option in joomla article, by inserting the following html code.
<a rel="nofollow" href="link_to_be_opened_on_image_click" class="weblink" style="text-decoration:none">
<img border="0" src="source_of_the_image_button.png" alt="Title" title="Title" />
</a>
I am trying to create a "pinterest share" button, but am running into a snag.
Currently, I have the pinterest button (generated from their Widget Builder) appearing in a Lightbox. (For certain reasons, it must appear this way.)
The issue is the Lightbox code has direct linking on it, so the code for the lightbox window is something like: www.domain.com/#/social/4
Pinterest is picking up that URL (which has no images since it's just the lightbox) instead of the URL for the main page (www.domain.com).
Does anyone know how I can specify the exact URL to share via the pinterest button?
I have read some posts that said doing this would work:
<img src="//assets.pinterest.com/images/PinExt.png" alt="Pin it" / > <script type="text/javascript" src="http://assets.pinterest.com/js/pinit.js"></script>
However, specifying the URL does not seem to work at all. It appears to be totally ignored and has no impact.
Any ideas?
Thanks in advance!
You can use a standard link and specify all the data in the parameters:
<a href="http://www.pinterest.com/pin/create/button/
?url=http%3A%2F%2Fwww.flickr.com%2Fphotos%2Fkentbrew%2F6851755809%2F
&media=http%3A%2F%2Ffarm8.staticflickr.com%2F7027%2F6851755809_df5b2051c9_z.jpg
&description=Next%20stop%3A%20Pinterest"
data-pin-do="buttonPin"
data-pin-config="above">
<img src="//assets.pinterest.com/images/pidgets/pin_it_button.png" />
</a>
Source: http://developers.pinterest.com/pin_it/
You can try using structured meta data and Rich Pins.