X3Photo Gallery Forums

Hello, Karl,

I understand that the purpose of EXIF information is to record & display information about camera & settings ralating to pictures.  This works great in X3, and I am happy that X3 is able to display that information.

Some of the pictures on my X3 sites have been scanned from paper photos, and I have managed to manually enter in scanner make & scanner model (for camera make & model), as you can see here:


I understand that X3 uses Font Awesome version 4.7, but I want to somehow be able to use something similar to THIS Font Awesome icon, which is v5.

I have absolutely no idea whatsoever as to how Font Awesome works, so my questions are:

1. Is it possible for me to maybe be able to download & add that specific Font Awesome v5 icon to my X3 site, and have X3 be able to display it?
2. If so, for specific X3 gallery folders, am I able to add Custom CSS code that would replace the Camera icon on the Exif line to that Font Awesom v5 scanner icon?

I know that I can use (some) unicode symbols in X3 labels, as for a test-only I have added that green checkmark to one of my labels in the above screenshot, with:
However, at the top of that page with the Font Awesome icon that I want to use, it shows that the Unicode code for that icon is f8f3, but when I try to use $#f8f3, all it shows is an empty square box instead of the icon.

In that above screenshot, I would like to be able to use that scanner icon on the label that shows the date of 31st May 2023.  If I can somehow do that, I would add another label to that line, with that same scanner icon, with the text Epson WF-7840 MFP Scanner, and haveX3 not display the Exif line at all, because in this case the Exif information is redundant as it already displayed in labels.

I welcome your thoughts on if & how I am able to accomplish the above.

Thank you in advance & have yourself a great day.

Regards,
John

I've managed a work-around:


I downloaded that icon, made the background transparent, and then used the following code to add the image to the labels:
I now just need to figure out how to shift the image up slightly-higher within the labels... using top, middle, or bottom for valign doesn't seem to work.

Thanks anyway, and thank you again for a great product.

Regards,
John

It looks like that worked for centering the image & text vertically, thank you, but something's making that label extend all the way to the right side of the line...

Sorry, I had that gallery temporarily hidden, to keep my relatives out of it while I was sorting things out  :relaxed:.

HERE is a link to that gallery.  Only the 1st image has that label-centering thing applied.  The inline-flex worked to make the label the correct width, thank you.

I do notice that the label with that align-items:center is slightly higher than the other labels on that line, so I figured that I would just add that extra code to ALL the labels in that gallery, as I have done for the 2nd image.  However, with that code added to all the labels for the 2nd image, only the 2 labels with the scanner image in the label got raised, not all the other labels on that line.

If it's not possible to align them all vertically, that's OK as I can live with that.

Sorry, I meant to say that I had that gallery temporarily protected (requiring a username & password), not hidden.  But I unprotected it a short while before you inquired about a link, so all is good in that respect.

Sorry for the delay in replying here.

It can't take into consideration what is affecting each span (different items inside), so that each span does not align with eachother.

The "real" solution to this, would be to use consistent icon types, so that the <span> tags would be consistent.

Well, as a test I intially removed all usage of Font Awesome icons, and instead went with images instead.  I didn't get around to testing to see what happens with different screen resolutions, as there were inconsistencies in the label heights... as an example, all would be aligned both top & bottom except for 1 label due to the height of that label's image, but when I enlarged or reduced that label's image so it would align with the other labels, it would now be aligned, but another label that was previously aligned with the other labels was now no longer aligned :thinking:.

All of these hassles, just coz I wanted that scanner icon  :sunglasses:, but in the end I eventually returned to using 100% Font Awesome icons (which are so much nicer, and painless), and just found another icon to use in place of that scanner icon, so all is good now & I'm happy.

Thanks for your help, Karl, and have a great weekend.