Artful photo album and emojis

[michele_arts (Michele Roussel)]

Hi,

I’m using Photo Album pages in the Artful theme. I have no link to provide since the site is not published yet.

In a gallery of images, I use red circle emojis to indicate if a painting is Sold in the image caption below the image (red circle U+F534). I simply enter the enjoin using Emojis and Symbols (on iMac). When I click on that image thumbnail, the larger image shows correctly as well as the caption, however the red circle is not rendered. Instead I see two grey diamonds with question marks.

Am I doing something wrong? Is there another way to accomplish this?

Sorry I don’t have a link.

Thanks

[michele_arts (Michele Roussel)]

Just a follow-up on the above question about emojis. My site is published now and if you go to this page http://niroimages.ca/english/english/nature-e.html, which is a simple Photo Album, then scroll down to any image that has a dot in the caption, then click on the image to get a full size view, you will see the behaviour I described. That is, the emoji does not display in the full view. Thnx.

[teefers (Doug Bennett)]

@michele_arts

U+F534). I simply enter the enjoin using Emojis and Symbols (on iMac).

I would try entering them with the HTML code
🔴

That should display as the red dot

[michele_arts (Michele Roussel)]

@teefers

Big thanks, worked perfectly.

[michele_arts (Michele Roussel)]

Hi,

I spoke too soon. I had to abandon using these emojis because the purple and orange versions did not render on our older iMacs. Friends reported the same issue on Chrome. I am now trying to figure out how to use something else, that is, a large centre dot from bullets/stars font on emojis and symbols selection panel. New problems arising from that are being discussed in another thread

Changing font color and size in a photo caption on a RW photo album page

I have a website (breezyhillturning.com) that I use as a portfolio for my artwork. I do not use the site to sell work over the internet, however I have found that many people that are interested in possibly purchasing my work want to know what is available (I do this by email). I think it would be far easier for them and me if I can just put a little sticker like sign on each photo of a piece to let them know if it is available or sold. My thought was just to add a red S or a green A in the t…

Thanks

[teefers (Doug Bennett)]

What is it that you are wanting?

Sorry but I’m not following you, and that post you are referring above is five years ago and probably doesn’t really apply.

Did the “red dot” HTML code above not work?

The page you gave above is now giving 404.

You’re asking about orange and purple dots now,you didn’t mention or have these on the page.

You should never “color code” as the only way to distinguish information.

Accessibility

There are people that can’t distinguish between colors.

You might consider using something like different icons or shapes in addition to colors.

So maybe an orange diamond - 🔶
Along with a purple square - 🟪
And the red dot. - 🔴

These are Unicode characters, so they may render differently or not at all depending on the hardware, browser, and fonts being used.

You could use something like Font-Awesome. I don’t know if the theme you are using (Artful) loads FA but you can add it manually, or change themes to one that does.

[michele_arts (Michele Roussel)]

Sorry, you’re right, I’ll try to be more clear.

I asked the question in that other thread because its OP and I seemed to be trying to do the same thing, i.e., add a coloured dot in the caption field of a Photo Album page. When I asked that question, I did not notice the age of the posting.

The currently published page (www.niroimages.ca) uses red, purple and orange circle emojis, #128308, #128995, #128992. These only appear correctly on my newest iMac. On my husband’s one-generation older iMac, the purple and orange emojis do not render properly. Friends who use Chrome report similar behaviour. Our oldest iMac, about 10 years and several OS versions behind, does not even show the red emojis properly. I assumed this is some kind of font availability issue so am abandoning those emojis.

Also, after you suggested the emojis above, I thought my problem WAS solved since it worked fine on my computer (and on my iPad). The problems with purple and orange emojis didn’t appear until later.

I then tried (but have not published) using a different character. In the bullets/stars font of the iMac’s emojis and symbols panel, there is a very large centre dot (the 5th symbol in that font list). I attempted to use this symbol in the thumbnail captions, but used code to change its colour (example, span style=“color:orange” ●/span ). Btw, I left off the angle brackets in the example code to avoid formatting in this forum message.

Using this centre dot seemed to work except that when viewing the thumbnail (in preview mode) in full-size, besides the correctly displayed caption above the full-size jpg, a mis-formed caption also appears to the right and below the image. I show this in the following screen grab

Btw, if I replace the centre dot with a letter, upper case P for example, I see the same behaviour. This happens regardless of which colour, red, purple, orange.

This is where I’m at. I appreciate that without a published page this is not easy to diagnose. I was just hoping to find someone who has attempted to use html color change code in a Photo Album caption and that may have had the same problem.

Btw, in that other old thread, I gave snippets from the Page source from my RW8 preview (with the angle brackets removed).

I apologize for spreading this info in two threads. The venture into that old thread was a mistake. I should have pm’ed the OP.

Thanks

[michele_arts (Michele Roussel)]

Thanks everybody, my issue seems to be resolved.

the colour change code that worked was, e.g.,

<span style=colour:orange>●</span> without quotation marks around colour:orange.

I tested on old iMacs and an old Windows 7 laptop.

[teefers (Doug Bennett)]

Without knowing the requirements of what you need, it’s impossible to give you proper advice.

I checked www.niroimages.ca, and I see No dots other than the red dot. I honestly didn’t go through the entire site, so unless you want to point more specifically as to where these purple and orange circles are, it’s hard to give help.

I can tell you a couple of essential bits of information.

1. Don’t use typed emojis or any other “special Mac” keyboard characters. As you have discovered, they are unique to the machine you are keying them on. Websites are for the rest of the world to view, and you are dependent on what the world might have on whatever hardware they are using. If you want to try and use the Unicode version, it’s best to use the HTML Unicode code.
2. NEVER color code as the only means of distinguishing content meaning. You are you violating every a11y standard for accessibility; You can use color as one way to discriminate as long as you have another way. So using color coding is Okay, as long as there is another way (e.g., Shape).

If you want to use symbols to differentiate or footnote anything, then your best and easiest would be to look into using Font Awesome.
Unfortunately, the theme you are using(Artful) doesn’t have Font Awesome built-in. You could add that to the theme by signing-up on the FA website and putting some code in the head section. Or I’d suggest you have a look at some of the other themes available. ThemeFlood’s themes (even the free ones) I think all have FA built-in. They all have a free demo version that you can try.

Since your site looks to be mostly a gallery, you might consider getting the Stacks plugin in the feature if you don’t already own it. There are a few really good Gallery stacks available.

• Pro Gallery - Stacks4Stacks - free demo available
• Gallery Stack 3 - InStacks
• Image Gallery - WeaverSpace

These are much more flexible than the built-in Photo Album plugin.

[michele_arts (Michele Roussel)]

All noted and thanks. I am not happy using the large centre dot from drop down panel, and I understand the possible problems, but so far this looks promising. I’ll keep looking for something more universal but at the moment the site seems to be working on a variety of computers.

I take your point about color coding, but the dots are only meant to indicate whether a particular painting has been sold or is otherwise not available. It is not a critical feature. In a previous incarnation (built using RW5), we actually used the words “Sold”, “Private Collection” in the caption. We wanted to make it prettier this time round.

In hindsight, we should have used Stacks but we thought we were keeping things simpler. This was probably a mistake.

FYI: for an example of an orange dot, on the Various gallery page, the third to last painting, Brigus Bridge has an orange dot. I can see it on my 10 year old iMac and on a 12 year old Windows 7 laptop. I’m waiting to hear from friends who are checking for me but a couple of them report seeing all dots now.

When you say you can only see red dots, do you mean that you cannot even see the purple and orange ones in the legend on each gallery page, above the thumbnails? That would be unusual, as the legend has been visible on every computer tested so far. It was only in the thumbnail captions that we encountered problems.

Thanks very much for the time you spent on this.