Last picture posted

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

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

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

1 Like

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

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?

1 Like

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

3 Likes

That totally worked, thanks!

1 Like

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.

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

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

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

Wow :bowing_man:

https://benjamim.omg.lol/

2 Likes

Cool photo. That sign looks OLD.

2 Likes

Yep, must holder than my grandfather.

2 Likes

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