I'm trying to open an image in new brrowser tab like this:
<a href="" target="_blank">
<img height="660px" width="420px"
src="<%= Url.Action("WebPageImage", "WPMManagement", new { id = actualId }) %>"
alt="bild mit webseiten version" />
</a>
I need to show just an image and nothing else (no styles etc.)
What about href? What do I need in it?
Change the href attribute to the URL of your image and you're good to go:
Click here to view the image
EDIT: If you're retrieving images from the database, then you'll need Url.Action rather than Url.Content. Check out this question for a similar discussion about retrieving images from a database.
EDIT #2: Updated the example code to use Url.Action rather than Url.Content
Related
The image is rendered on my blog of website using following erb code
<a href="<%= article_url(article)%>">
<img src="<%= article.main_image_url%>" alt="<%= article.title%>" /</a>
The main image url is actually stored in cloudfront on the url
https://s3.ap-south-1.amazonaws.com/mywebsite-dev/uploads/article/main_image/100/wonderful_image__1_.jpg
A scaled down version of size 500 X 250 pixel is stored at location
https://s3.ap-south-1.amazonaws.com/mywebsite-dev/uploads/article/main_image/100/large_wonderful_image__1_.jpg
My model of the article only saves the main image url. However, while uploading the image to s3, I do create a scaled down version of the image and add 'large_' prefix. This can be seen in the above url examples.
As of now, my erb code, renders the main image on the webpage and I need to edit this code, so that it renders the scaled down image instead. Basically, I need to edit this
<img src="<%= article.main_image_url%>"
so that erb changes
(The urls below are changed to blank client website'
https://s3.ap-south-1.amazonaws.com/mywebsite-dev/uploads/article/main_image/100/wonderful_image__1_.jpg
to this
https://s3.ap-south-1.amazonaws.com/mywebsite-dev/uploads/article/main_image/100/large_wonderful_image__1_.jpg
May be I need to split the article url by '/', take out the last part and add 'large_' to it.
Thanks in advance for the help. I am quite new to ROR and more into python.
Regards
I figured it out.It may be not a clean solution but it worked for me as of now.
<img src="<%= article.main_image_url.rpartition('/').first+'/large_'+article.main_image_url.rpartition('/').last%>" alt="<%= article.title%>" />
Thanks to everyone
In my view, there is a Model that holds a list of User objects. I save the profile pictures of these users in ~/thumbs folder as <username>.png. Now, I want to display all users with their profile pictures and name. So I've wrote the code as shown below
#Code
For Each item in Model
#<div class="col-md-2">
<img class="img-responsive" src="~/thumbs/#item.username.png" alt="">
</div>
Next
End Code
Here, #item.username.png generates an error because the intellisense of Visual Studio assumes that I want to display the png property of the username of the #item
If I put a space before .png and write the src attribute as ~/thumbs/#item.username .png the error gets resolved, but when I run the page; it doesn't show the images since ultimately the src is converted to thumbs/<username>%20.png
What can I do? Please advise!
use following to avoid compile razor syntax problem
<img class="img-responsive" src="~/thumbs/#(item.username).png" alt="">
refer here quick - reference
As an alternative, as per Daniel's comment, you'll can also pre-format the string, or build the string inline, e.g. with String.Format:
<img class="img-responsive" src="#String.Format("~/thumbs/{0}.png", item.username)" alt="">
Whatever I set data-url or data-text to, twitter just fetches the URL of the page the sharing button exists in and shows as the tweet-text.
example :
<a target="_blank" href="https://twitter.com/share"
data-count="none" class="twitter-share-button" data-url="http://www.gogole.com"
data-text="BLABLABLA" style="opacity:0">TWEET</a>
or
<a target="_blank" href="https://twitter.com/share"
data-count="none" class="twitter-share-button" data-url="<?php echo
urlencode('http://www.gogole.com')?>" data-text="BLABLABLA" style="opacity:0">TWEET</a>
in both cases, clicking on the link opens a new window with the twitter sharing box that includes the URL of my website and ignores the attributes I set.
Something should have gone dangly wrong. help appreciated !
please tell me if you need more info to be posted.
Thanks,
/t
You can use the query parameter "url" with the twitter share link "https://twitter.com/share"
When looking for the URL twitter button follow this priority:
Look for url in the share link query string
If not found, look for the data-url attribute of the Tweet Button anchor tag
If not found, look for the rel="canonical" link tag in the head of the document
If not found use the URL of the webpage
I have faced same issue - when using link as described in manual's example it didnt work.
this NOT works:
<a class="twitterBtn smGlobalBtn" target=_blank href="https://twitter.com/share" data-text="my_title" data-url="my_url" data-hashtags="my_hash" data-via="my_name" data-related="my_name">Tweet</a>
but this WORKS:
<a class="twitterBtn smGlobalBtn" target=_blank href="https://twitter.com/share?text=my_text&url=my_url&hashtags=my_hash&via=my_name&related=my_name">Tweet</a>
Don't know why twitter ignores data- attributes, but when params are inside the link as GET params - everything works fine.
Hope this will be helpful for someone in future)
I fixed this by moving script widgets.js before button markup and turning off async mode, like this:
<script src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-text="H..." />
twitter-share-button class also important.
I'm using Rspec and Capybara.
How can I write a step to click on an image? I have been unable to find a good way to get Capybara to see the image as a link.
Thanks
Example of html
<a title="inGroups" href="/de/users/index/roles-list/serviceID/1112/inGroup/1">
<img border="0" alt="inGroups" src="/themes/system/images/icon/16/role_activate.png">
<a title="inGroups" href="/de/users/index/roles-list/serviceID/1114/inGroup/1">
<img border="0" alt="inGroups" src="/themes/system/images/icon/16/role_activate.png">
<a title="notInGroups" href="/de/users/index/roles-list/serviceID/1112/inGroup/0">
<img border="0" alt="notInGroups" src="/themes/system/images/icon/16/role_deactivate.png">
<a title="notInGroups" href="/de/users/index/roles-list/serviceID/1114/inGroup/0">
<img border="0" alt="notInGroups" src="/themes/system/images/icon/16/role_deactivate.png">
Any suggestions?
It shouldn't be any different to clicking a normal link. I don't see how you would go about selecting an individual link in your example though, without any uniquely identifiable attributes on the link.
If you can't change the markup, you may need to use XPath to actually select the href element by the URL e.g.
my_link = find(:xpath, "//a[contains(#href,'1114/inGroup/1')]")
Would give you the first link, and then
my_link.click
Should click it as normal.
EDIT: Just to clarify, the important thing is that you select the a element and click it, not the img.
I put this and works:
for the index.html got to the show:
find("img[src*='photo03.jpg']").click
for the show.html
expect(page).to have_css("img[src*='photo03.jpg']")
I have one image from which I have to have 7 different links based on the part of the image clicked. How do I go about it using rails?
For future reference, you're talking about "image maps" - there's various tutorials for these, eg
http://www.onextrapixel.com/2009/04/30/how-to-create-multiple-links-on-a-single-image-with-image-map/
As far as i know this isn't really a rails question, as image maps are a totally front-end thing: like js, they only relate to the page as seen in the browser. As far as rails is concerned, when you click on a link it doesn't care whether that link was on an image map or not.
So, it's just some raw html that you would put in your view template.
I suppose you could make the image maps data-driven though, so that for example you store an image filename in the db and then save any map data in the db too, in an image_maps table. It's only worth doing this if you want to make the image maps user-editable, like flicker does for example. (flickr lets you draw a rectangle on an existing photo and tag it with some text)
just use url_for to generate the needed url
<img usemap="image_link" src="..." alt="" width="235" height="32" style="display: block;" />
<map name="image_link">
<area href="<%= url_for root_path %>" alt="Home" coords="0,0,189,19" shape="rect" />
<area href="<%= url_for :controller => "post", :action => "all" %>" alt="All posts" coords="190,0,386,22" shape="rect" />
<area href="<%= url_for new_resource1_path %>" alt="New resource1" coords="387,0,657,23" shape="rect" />
</map>
the root_path is defined as the home page and resource1 as a resource in config/routes.rb.
This is more of a javascript/flash type thing. You can absolutely position divs with links if you know exactly where the links need to go and you are not looking for an area for the user to click because this will just generate a link with text in a specific position.
Sounds to mee like you will need to make a flash app or do javascript workaround. This is not a Rails type issue so your solution won't come from Ruby/Rails.