When I use images from metadata in my layouts, I do it like this and it works:
<img src="<%= #site.url %>/images/<%= #document.icon %>" alt="" title="">
When I use the wonderful working thumbnail-plugin for DocPad like this, it works well, too:
<img src="<%= #getThumbnail("images/javascript.png", '128x128') %>" alt="">
Now I would like to combine both methods, to get the metadata from the document and let the thumbnail-plugin size it like I want. Is this possible? I tried something like this:
<img src="<%= #getThumbnail("images/<%= #document.icon %>", '128x128') %>" alt="">
I know the code above is crap, I am sorry... Just to explain what I would like to do.
You can definitely do what you're wanting to do. The key point to realize is probably that when using eco, <%= puts you in 'coffeescript' mode and you can write any coffescript expression you want.
So to do what you want, you'd write this markup:
<img src="<%= #getThumbnail('images/' + #document.icon, '128x128') %>" alt="">
Related
I have a tumblr blog embedded into my website (iframe) and want all clicks to open in a new tab to land on the post detail url (e.g. https://diestadtgaertner.tumblr.com/post/657405245299818496). I already adapted the template to get this working for most post types by exchanging the respective href variable with "https://diestadtgaertner.tumblr.com/post/{PostID}" and add target="_blank". However, I can't get this to work for the pictureset. Does anyone know how this might work?
Help would be greatly appreciated!
Thanks & best,
Torge
You can edit your template so the photoset gets output into a normal div (I think the default is to load photosets inside an iframe themselves, which could be causing you issues.
This is the block from my tumblr template:
<ul>
...
{block:Photoset}
<li class="post photoset">
{block:Photos}
<img src="{PhotoURL-500}" {block:HighRes}style="display:none"{/block:HighRes} />
{block:HighRes}
<img src="{PhotoURL-HighRes}" class="highres" />
{/block:HighRes}
{/block:Photos}
{block:Caption}
<div class="description">{Caption}</div>
{/block:Caption}
<p>
<span class="icon-link ion-ios-infinite-outline"></span>
{block:Date}{DayOfMonthWithZero}.{MonthNumberWithZero}.{ShortYear}{/block:Date}
</p>
</li>
{/block:Photoset}
</ul>
In any case you could wrap the entire block in the Permalink href. Something like:
<ul>
...
{block:Photoset}
<li class="post photoset">
<a href="{Permalink}"> // this permalink href now wraps the entire content of the post.
{block:Photos}
<img src="{PhotoURL-500}" {block:HighRes}style="display:none"{/block:HighRes} />
{block:HighRes}
<img src="{PhotoURL-HighRes}" class="highres" />
{/block:HighRes}
{/block:Photos}
{block:Caption}
<div class="description">{Caption}</div>
{/block:Caption}
</a>
</li>
{/block:Photoset}
</ul>
The issue now is that the default click links for the images inside this post (if they exist) will no longer function normally.
It is difficult to test this without the link to your site, but I think updating your tumblr template first should hopefully give you the result you are after, but of course I would recommend a backing up your code.
I only see an icon, and not the real image (also on the index page).
제목:<%= #food.title %> <br> <br>
<img src="<%= #food.image %>"><br> <br>
내용:<%= #food.content %> <br> <br>
<form action="/food/edit/<%= #food.id %>"> <input type="submit" value="수정"></form>
<form action="/food/destroy/<%= #food.id %>"> <input type="submit" value="삭제"></form>
I don't understand how an image can be saved in the database. I found a method that saves a url, but I upload the image file usually. I made an input tag that has the file type. How can I save the image? I have installed carrierwave.
What is #food.image? Is it a url, or the image itself? If it is a url, <img src="<%= #food.image %>"> should work. If it is the image itself, perhaps uploaded by carrierwave, you should use <%= image_tag(#food.image) %>.
I'm not sure what your Food model looks like, but try this (since you are using CarrierWave, add .url):
<img src="<%= #food.image.url %>"><br> <br>
or:
<%= image_tag #food.image.url %>
The icon you are seeing is the default icon shown by the browser if the image path is not found.
Reference: CarrierWave ActiveRecord
I have noticed that using xpath axes methods sometimes return wrong nodes. I have two examples:
url: "http://demo.guru99.com/v1/"
<tr>
<td align="center">
<img src="../images/1.gif">
<img src="../images/3.gif">
<img src="../images/2.gif">
</td>
</tr>
I can select three img elements by axes methods "//td//child::img". However when I use "//td//following-sibling::img", it can still return the second and third img elements. As far as I know, child and sibling are two different thing, so why this happens?
url: http://demo.guru99.com/selenium/guru99home/
<div class="rt-grid-12 rt-alpha rt-omega" id="rt-feature">
<div class="rt-grid-6 ">
<div class="rt-block">
<h3>
Desktop, mobile, and tablet access</h3>
<ul>
<li>
<p>
Free android App</p>
</li>
<li>
<p>
Download any tutorial for free</p>
</li>
<li>
<p>
Watch video tutorials from anywhere </p>
</li>
</ul>
<p>
<img alt="" src="images/app_google_play(1).png"></p>
</div>
</div>
<div class="rt-grid-5 ">
<div class="rt-block">
<img src="images/logo_respnsivsite.png"><br>
</div>
</div>
</div>
Here, if I use "//div[#id='rt-feature' and (#class='rt-grid-12 rt-alpha rt-omega')]//following-sibling::div", those div elements which should be child elements are still be counted as siblings
Use "//div[#id='rt-feature' and (#class='rt-grid-12 rt-alpha rt-omega')]//parent::div", the self element and its child div elements are all counted as parent.
This cause me a lot of confusion, please help me.
Suggesting that the XPath parser returns the wrong nodes, rather than that you don't understand why it is returning what it does, is starting from the wrong mindset. Unless you know the XPath parser is unreliable, start with the assumption that it is right and your expectations are wrong. Then go to the spec and study the semantics of the expression you have written.
You will find that
//td//following-sibling::img
is an abbreviation for
/descendant-or-self::node()/td/descendant-or-self::node()/following-sibling::img
so you have asked for all the following siblings of all the descendants of all the td nodes, which is exactly what you are getting.
I've come across people who habitually write "//" in place of "/" as a sort of magic fairy dust without having the faintest idea what it means. Don't do it: read the spec.
[ProductTitle]
[ThumbnailImage]
<a href="http://pinterest.com/pin/create/button/?url=lerivinos.com&media=lerivinos.com"
class="pin-it-button"
count-layout="horizontal">
Pin It
</a>
<script type="text/javascript" src="http://assets.pinterest.com/js/pinit.js"></script>
[OurPrice]
[AddToCart]
your sample code doesn't have the img link which pinterest give you in the code snippet.
Assuming you mis-copied and omitted it, I had the same problem because pinterest give you this:
<img border="0" src="//assets.pinterest.com/images/PinExt.png" title="Pin It" />
I had to add http: to the src to get it to work, ie:
<img border="0" src="http://assets.pinterest.com/images/PinExt.png" title="Pin It" />
Hope that helps.
The media parameter of your pintrest url should point at your image file, like so:
<a href="http://pinterest.com/pin/create/button/?url=lerivinos.com&media=https://www.google.com/images/srpr/logo3w.png"
class="pin-it-button"
count-layout="horizontal">
Pin It
</a>
From the pintrest goodies page
I have a little image that is showing up as a dead link on heroku, but not on my local, the image files were git pushed with everything else. Whats more is I have other images that show up just fine.
the view file for broken image
<% if report.status == 4 or report.status == 5 %>
<img src="<%= image_path('greenlight.png') %>" id="status">
<% elsif report.status == 2 or report.status == 3 %>
<img src="<%= image_path('yellowlight.png') %>" id="status">
<% elsif report.status == 1 %>
<img src="<%= image_path('redlight.png') %>" id="status">
<% end %>
view file for working image
<div id="header"><header>
<img src="<%= image_path('whfd_logo.png') %>" id="whfd">
<img src="<%= image_path('iaff.png') %>" id="iaff">
<span>text removed<br />
text removed</span>
</header></div>
view source fro broken image
<img src="/images/yellowlight.png" id="status">
view source for working image
<img src="/images/whfd_logo.png?1329844130" id="whfd">
<img src="/images/iaff.png?1329844130" id="iaff">
when the image works on my local the view source looks like this
<img src="/images/yellowlight.png?1329096113" id="status">
whats going on here? why is the number string after the image missing?
In the future you could run git add -A that will add AND delete any files you...well, added or deleted.
figured it out. I need to learn more about git.
running git add . before my git commit fixed it.