Last picture posted

Picture Sharing
1

Hi - Discourse is good; thanks for setting it up.
I wonder if it would be possible to have a way to post the last 1 or couple of photos on one’s profile page, either with a shortcode like {some.pics.latest 1} or using a <script> tag like you can with status.lol.

5 Likes
2

Awesome idea! I’ll work on it shortly — what I’ll probably do is start with the <script> setup, because I want to add some custom tags that can pull in content across multiple services (pics, pastes, and statuslog) and need to work out how to make the behavior there consistent and reliable. Will share an update soon!

6 Likes
3

that’s awesome, thanks so much for your continual hard work!

1 Like
4

OK, I have an early first attempt at this. As a prerequisite, I designed a new URL format for individual member pages that doesn’t rely on a subdomain:

https://some.pics/by/adam

With this, we can now easily add a .js extension to access a script:

https://some.pics/by/adam.js

By default, this will drop all pictures into a <div> with an ID set to somepics_container.

I’ve also added a count parameter that will let you indicate the last n pictures that you want to include:

https://some.pics/by/adam.js?count=1

Haven’t tested this extensively yet, so I’m not sure what else might be needed… maybe an option for some default inline styling on the images (wither something like max-width: 100% or a way to pass some style directives or set a width or something… not sure!).

Open to all feedback and ideas for improvement!

6 Likes
5

Thanks @adam. So adding this to the profile:

<script src="https://some.pics/by/rick.js?count=1"></script>

… does indeed inject the div with the id set. The image is extending out over the container, and simple css like the following doesn’t seem to have any effect.

#somepics_container > img {width: 100px; border-radius: 30px;}

I’d like to style the image so it matches the site and is reasonably sized on desktop and mobile. Can you please tell me the css I need to achieve that?

image
image1920×1050 115 KB

1 Like
6

You could try img {max-width:100%;}
It worked for me

3 Likes
7

That totally worked, thanks!

1 Like
8

Hum…

Help. I don’t know how to use CSS.

I’m doing this:

- Latest Pic {image}

<div class="somepics_container" style=" img max-width: 100%;"><script src="https://some.pics/by/benjamim.js?count=1"></script></div>

But it doesn’t work.

9

Try style="img { max-width: 100%; }" instead.

10

Ok, I’m going to figure this out :bowing_man:

11

Assuming you’re trying to do this in your web page / profile:

Add the script tag where you want to inject the div. That happens automatically, and you can prove it by checking out the element in your browser inspector. You don’t need to specifically write the div.

Then in the “custom css” section, on the lower right of that settings page in the omg dashboard, add for example:

img {max-width: 100%; border-radius: 10px;}
3 Likes
12

Wow :bowing_man:

https://benjamim.omg.lol/

2 Likes
13

Cool photo. That sign looks OLD.

2 Likes
14

Yep, must holder than my grandfather.

2 Likes
15

thanks for the above. quick note to say adding this lil snippet into the " Additional Content" box will display the pic’s description right below the image.

<script>
        document.addEventListener('DOMContentLoaded', function() {
            var image = document.querySelector('.somepics_container img');
            if (image && image.alt) {
                var altText = document.createElement('p');
                altText.innerHTML = image.alt.replace(/\n/g, '<br>');
                image.parentNode.appendChild(altText);
            }
        });
</script>
2 Likes