Subtle Image Expansion Hint for Mobile

theme-component
mobile

#1

This is a very simple theme component that replaces the metadata bar that normally displays on an expandable image with a small semitransparent expansion indicator.

Repo: GitHub - tshenry/discourse-mobile-image-expand-hint

Before

After

About

This was inspired by the discussion started here:

Installation

Follow this guide here:

Customization

You can adjust the position of the expansion hint. By default it is positioned on the bottom left. The code to achieve positioning can be found by clicking the Edit CSS/HTML button on the theme component and going to the Mobile tab. Here you will see the following CSS code:

.meta {
    height: 25px;
    width: 25px;
    bottom: 0;
    left: 0;
    //right: 0;
    //top: 0;
}

To change it to the top right:

.meta {
    height: 25px;
    width: 25px;
    //bottom: 0;
    //left: 0;
    right: 0;
    top: 0;
}

Just comment and uncomment according the the position you’d like.

Note: As of now, if this theme component gets updated, and you have changed the CSS at all, you will need to make those changes again after the update.




Please feel free to post if there are any questions, problems, or suggestions!


Black bar appearing on images
(Jeff Atwood) #2

This is nice, thank you for sharing it!

But isn’t the bar usually one line, not two? Is that image particularly small or something?

Oh wait this is for mobile, my bad. @zogstrip should we adapt it? Your call :wink:


#3

No problem :slightly_smiling_face: On mobile, the most common reason for the bar displaying two lines vs. one seems to be the length of the filename. Here is a screenshot on mobile of one of the images in this post, showing that the bar can be one line:

In any case, what I was hoping to do with this component was to make the expansion hint as subtle and unobtrusive to the image as possible, while still giving the user a clear indication that the image can be enlarged.


#4

Should this be considered for desktop also? One can make the argument that the file name, the dimensions aren’t super relevant for many people.


(Jeff Atwood) #5

No, it’s quite relevant for desktop, and there’s plenty of room.


#6

Once theme settings are added to Discourse (hoping soon!), I might be able to add a few different settings to this, including the ability to apply this to desktop, but for now, I think it’s best to keep it just mobile as that’s where it seems most beneficial. I wouldn’t want to have this apply to desktop by default.

In the mean time, if you really want to have it on desktop too, you can actually just go in the edit CSS/HTML section of the theme component, copy the CSS from the Mobile tab and paste it in the Desktop tab. Keep in mind, when this gets updated, it will get rid of any changes you’ve made.