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.
Related
So Im wondering is there anyway you can add a hyperlink action in reality composer that can be used in web ar?
I can't seem to find an action for this?
The way I'm using the reality file on my website is like so
<a href="<...link to .reality file>" rel="ar">
<img />
</a>
any help would be appreciated?
In short, the link is:
<a rel="ar" id="CustomAction" href="kids‑slide.usdz#callToAction=Browse%20API&checkoutTitle=Kids%20Slide&checkoutSubtitle=Playground%20in%20your%20backyard&price=$145"> <img src="kids-slide-thumbnail.png"> </a>
Look at sections: "Display a Custom Banner" and "Detect a Tap" for detection of the tab. It isn't configured in Reality Composer but rather in the link it self: https://developer.apple.com/documentation/arkit/adding_an_apple_pay_button_or_a_custom_action_in_ar_quick_look
I'm trying to create code that will allow me to use different image URL's but essentially render the same image.
For example, this would be across potentially thousands of pages:
<img src="https://www.website.com/image-path-unique-name-1.jpg" />
<img src="https://www.website.com/image-path-unique-name-2.jpg" />
<img src="https://www.website.com/image-path-unique-name-3.jpg" />
But instead of rendering a 404, an image would exist based on:
<img src="https://www.website.com/core-image.jpg" />
Is there some way I can do this? Either by systematically creating multiple copies of an image based on an initial image? Or maybe another solution?
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
I am trying to internationalise the urls of my web application. Basically I want to be able to set the url of, let's say, a link to www.mysite.com/france/inscription when the preferred language is fr and www.mysite.com/signup when the preferred language is en.
Until now I have beenusing a jtsl choose to manually set the url:
<c:choose>
<c:when test="${pageContext.request.locale.language eq 'fr'}">
<a class="trialButton" href="<c:url value="/france/inscription?type=0"/>"><fmt:message key='features_trial'/></a>
</c:when>
<c:otherwise>
<a class="trialButton" href="<c:url value="/subscribe?type=0"/>"><fmt:message key='features_trial'/></a>
</c:otherwise>
</c:choose>
Ideally I would like to be able to get a localised url directly from my resource bundle, I tried to do:
<a class="trialButton" href="<c:url value=<fmt:message key='features_trial_url'/>/>"><fmt:message key='features_trial'/></a>
But eclipse doesn't accept it.
Do you know a way to do something like that?
You can't use a JSP tag inside an attribute of another JSP tag. But all JSTL tags printing a value have an attribute var allowing to store the value inside an attribute instead of printing it. So you can simply use
<fmt:message key='features_trial_url' var"theUrl"/>
<a class="trialButton" href="<c:url value='${theUrl}'>"><fmt:message key='features_trial'/></a>
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