lightbox anchor and svg icon

[PragmaticPraxis]

I am hoping to find a way to do a combined text and icon link. I am using WP SVG Icons, which are placed with a Div or Span that contains a data-icon attribute. I would like to have this icon in line with the link text, and ideally part of the link. But at this point I can’t even get the icon and text on the same line. And, I am new to HTML and CSS, and know just barely enough to be dangerous.

So…

I have tried <div data-icon=””></div>[wp_lightbox_anchor_text_mp4_video link=”http://content.pragmaticpraxis.com/RB/file_dialog_places.mp4″ poster=”http://content.pragmaticpraxis.com/RB/file_dialog_places.png” text=”File Dialog ‘Places'”]

and

<div data-icon=””>[wp_lightbox_anchor_text_mp4_video link=”http://content.pragmaticpraxis.com/RB/file_dialog_places.mp4″ poster=”http://content.pragmaticpraxis.com/RB/file_dialog_places.png” text=”File Dialog ‘Places'”]</div>

and neither puts the icon and text in line. I even tried

[wp_lightbox_anchor_text_mp4_video link=”http://content.pragmaticpraxis.com/RB/file_dialog_places.mp4″ poster=”http://content.pragmaticpraxis.com/RB/file_dialog_places.png” data-icon=”&#8221; text=”File Dialog ‘Places'”]

on a lark. No love.

My last thought is to do two anchors, one with the image, and one with the text, and both link to the same video. But that seems inelegant, if there is a way to get a combined image and text anchor. And, if I have to I can drop the SVG Icons, but I would rather use them if it’s possible. Hoping for some class passthrough magic.

Thanks!

Gordon

[PragmaticPraxis]

I spend two days trying to solve this, and within half an hour of posting a question I figure it out? My Google-Fu is… fickle.

So, this works a treat. Only issue is the icon isn’t part of the link, but I think I am ok with that. And wordpress wants to replace the & in the data icon reference when switching modes, but I have come to accept that WP is the new FrontPage when it comes to things like this.

<div style=”float:left;display:inline;margin-top:1px;margin-right:1em” data-icon=””></div>[wp_lightbox_anchor_text_mp4_video link=”http://content.pragmaticpraxis.com/RB/disable_auto_apply.mp4″ poster=”http://content.pragmaticpraxis.com/RB/disable_auto_apply.png&#8221; text=”Disable Auto-Apply”]

[wzp]

I spend two days trying to solve this, and within half an hour of posting a question I figure it out? My Google-Fu is… fickle.

Don’t sweat it. The other day, I called Google Apps support after spending 2 days looking for a way to delete something, and when I finally got the support gal on the line, the “Delete” button was staring me in the face. She probably thought I was just looking for an excuse to talk to her

[PragmaticPraxis]

So, coming back to this topic…

I am now looking at having two video links, one to a high quality H.264 MOV file, and one to a low quality MP4 file for the poor saps using Internet Explorer. To make that work, the current approach of a non link icon with link text isn’t going to work. So, is there any possible way to get a Div to work as the “image” for a link? Conceptually something like this?

[wp_lightbox_mp4_video link=”http://www.example.com/h264-encoded-video.mp4&#8243; source=<div style=”float: left; display: inline; margin-right: 1em; font-size: 1em;” data-icon=””></div>]

Or, better yet, can the lightbox take two links, and feed the MP4 only to IE, while the rest of the world gets the MOV?

Thanks!

Gordon

[wpCommerce]

@PragmaticPraxis, unfortunately this option is not available in the plugin.

[PragmaticPraxis]

Thanks for the heads up. As it turns out I think I have found the right settings to get MP4 files to look as good as my MOV files where. For a while the MP4 where chock full o’ artifacts and I thought I would need to provide the two options. Now to go address the controls color.

Thanks!

Gordon

[Author]

Posts