One of my two questions was previously posed by James Wages in the comments section of the SVGimage Action on ActionsForge. He wrote:
“Adding a link to a graphic with the SVGimage Action applied displays a clickable link in Freeway’s Preview only. When viewing in FF or Chrome or Safari there is no clickable link, despite the fact the HTML code contains the correct (a href). If not a bug in the Action, then what’s the solution to make a clickable link on SVGs?”
In my example page focus on the Twitter and Email buttons at the top right. Note that the Facebook link works because it was done with a Markup Item and an SVG file uploaded to the server, though the markup does not address the IE8 and old Android problem.
Also note that the custom margin settings did not work properly for the Twitter and email buttons in OSX FF, Chrome and Safari and iOS.
Viewing on my iPad I cannot see a twitter or email image top right!
On another note because you are using position fixed for the header and sidebar I can only read down as far as ‘Red Barn Farm’ (in the sidebar) in landscape view.
Am perplexed about how the twitter, facebook and email buttons do not appear on your iPad. Are you sure? On page load on my iPad 3, viewing in portrait or landscape using Safari and Chrome, the circular grey twitter, facebook and email buttons appear at upper right immediately below the masthead (though they do disappear under the masthead if you scroll down the page). I can’t find any settings within Safari that would cause the page to display differently.
Concerning smartphone viewing: This is a test page and not integrated with the live site, where a mobile redirect takes the reader to content formatted for smartphones.
The problem r/e Red Barn Farms is recognized and on the list of things to address.
Puzzling. It also works fine on a pre-retina display iPad 2. And the master page mobile setting in Freeway is set to “device width”, so I don’t know why you wouldn’t see the full width.
Reminds me of the mushroom factor in fixing up old houses: you try to change a lightbulb in a ceiling fixture and ending up needing to rewire the room and repair the ceiling plaster.
Thanks, anyway, DD, for taking the time to respond.
(Anyone who reads this and can see the button icons, please feel free to help me out with the original question!)
Haven’t worked much with SVG so honestly I know nothing.
I did the following:
I drew a HTML item, hit CMD-E and imported the .svg? So this is automagically turn this item into the .svg.
But we can’t add a link to a HTML item, right? Well - we can, using the HTML5 block link action.
Am not sure if this is correct (or a recommended way).
For the mobile device stuff:
Am not sure here as well, but if you define a min-width of 750px, I suppose the devices are forced to display 750px as well, which will mean cut off (at least for phone size (320x480) to the right.
I think you should play with different mobile-settings (auto, or even a page-width) - perhaps.
Thanks, Thomas, for focusing me on the file/import option vs the drag’n drop option, and for pointing out the HTML5 block link action. It allowed me to see that all the options offered don’t work, as you can see with the updates I made to the example page.
ROW 1
Importing as pass through items results in a “PlugIn” that like an HTML Item will not accept a link. However, Walter and Caleb both warn that the SVGimage action won’t work if you use a passthrough item. And the applied HTLM5 block link action does not work in any case, though the FW margin setting works.
ROW 2
Either import option without the passthrough image option checked (paying attention to or ignoring resolution) yields a Graphic Item that accepts a link in FW but neither link nor margin settings work with SVGimage action applied once published and viewed locally or from the server.
ROW 3
Graphic Items can have HTML5 link actions applied so I removed the FW applied links and added this action to both Graphic Items and there was no change from Row 2: neither action-supplied link nor FW set margin settings worked.
As an inbetween solution: can’'t you use an areamap?
Op 7 jul. 2014 19:58 schreef “Peter Laundy” email@hidden:
Thanks, Thomas, for focusing me on the file/import option vs the drag’n
drop option, and for pointing out the HTML5 block link action. It allowed
me to see that all the options offered don’t work, as you can see with the
updates I made to the example page.
ROW 1
Importing as pass through items results in a “PlugIn” that like an HTML
Item will not accept a link. However, Walter and Caleb both warn that the
SVGimage action won’t work if you use a passthrough item. And the applied
HTLM5 block link action does not work in any case, though the FW margin
setting works.
ROW 2
Either import option without the passthrough image option checked (paying
attention to or ignoring resolution) yields a Graphic Item that accepts a
link in FW but neither link nor margin settings work with SVGimage action
applied once published and viewed locally or from the server.
ROW 3
Graphic Items can have HTML5 link actions applied so I removed the FW
applied links and added this action to both Graphic Items and there was no
change from Row 2: neither action-supplied link nor FW set margin settings
worked.
Thomas,
So without the action, Freeway will automatically fill in a graphic file for IE8 and users of older Android platforms?
(the SVGaction is not used to get the SVG, but to backfill for browsers that don’t handle SVG files)
In the Hyperlink-dialog click the extended button and add “new”, for the name class and in the value field svg-link
Choose “Edit → Styles” and click the lil plus down left. Now important: In the tag-field add .svg-link (you see the leading point?). Tab into the name field and DELETE this entry. Tab back into the tag-field.
Click extended and add the following name/value pairs:
display/block width/100% height/100% .
Now add for all your other Icons the class svg-link as described in step one.
Having had another beer and thought of adding the properties of display:block; top:0; right:0; bottom: 0; left:0;
rather the width height 100% stuff. And I can even think of adding this class by default (even as inline-style) via action by default. The point is, that the action leaves the a-TAG alone which is causing a collapsing to nil (or nearby).
Having had my first beer, I’m agreeing with Delta Dave (stick with my single and double resolution pngs) and you, Thomas (this is WD’s terrain)…or I hope FW7s, as using SVGs makes a lot of sense.
Thanks, everyone!
(And Andries, I couldn’t get a Map Area to work over an SVG image)
… not wanted to be the badass of the month since I was a lil bit crucial in other threads these days. In this specific case, I agree - png is the law, but what about other cases? “SVG” is anyway best used in dynamic surroundings.
But what I wonder is fall-back to jpeg. Why not fall-back to gif or png or do I miss here something (shapes are based on transparency if I recall the sense of them correctly).
And another tipp of the day:
Never expect a new version solving a problem (which doesn’t exist) - it might end disappointing.
Hi Peter,
I think you’ll be better off using the SVG in the image src rather than embedding the image in the page as a plug-in item. Support is pretty good (back to IE9) and non-supported browsers can be easily patched top load an alternative (bitmap) image.
I ended up creating my own Action that automates this process and adds in SVGeezy (http://benhowdle.im/svgeezy/) as a fallback. It does pretty much what Walter’s Action does but in reverse and falls back to using PNGs if the browser doesn’t support SVGs.
Regards,
Tim.