help with html for linking a picture from another website

Frak_Lou_Elmo
Frak_Lou_Elmo

Hi all, I have pages like this:

https://gaximplague.obsidianportal.com/wikis/allosaurus

for now I upload the monster picture and picture of the statblock but this of course takes lots of space. Is there a html way to link to a picture existing somewhere else and have it show within a square of like 450 px?

If this is possible, can it be done withsomehtign more complex, like the statblock showing here: https://5e.tools/bestiary.html#allosaurus_mm

it is possible on that website to pop out the statblock into a new window, can that be showin wihtin a box?



Cheers,

Frak 

Comments

  • GamingMegaverse
    GamingMegaverse
    Posts: 2,897

    I use Gimp to edit my pictures to a more manageable size

    Just trying to help out.  Changed name from killervp to Gaming Megaverse to match other sites.

    image

     

  • ragnarhawk
    Posts: 113

    I know that thaen provided instructions in another thread for embedding a PDF - perhaps something similar would do the job?

  • thaen
    thaen
    Posts: 565

    @Frak_Lou_Elmo, yes, you can link to pictures elsewhere and display them in a set size.  That's actually what's happening by default.  If you inspect the allosaurus image, you'll see this:

    <img src="https://db4sgowjqfwig.cloudfront.net/campaigns/241935/assets/1140155/Screenshot_2021-01-04_at_09.55.56.png?1609750591"; class="asset-reference image-asset-reference media-item-align-none" data-asset-id="1140155" alt="Screenshot_2021-01-04_at_09.55.56.png" title="Screenshot_2021-01-04_at_09.55.56.png">

    That's an "img" that's pointed at the "cloudfront.net" site where OP stores the uploaded files.  You can place that exact code by itself in a new wiki page, and you'll see the allosaurus image there.

    Note, some sites don't like you to display their images on your site, and so they will place watermarks on the images that are displayed outside of their website, or may block it entirely.

    The reason you probably don't want to reference images on other sites, and instead copy them and upload them to your site first, is if those sites change their designs (or implement the blocking above), your link to the image might break and you won't get any warning.

    The 10GB limit is supposed to be high enough that Ascendants don't need to worry about storage space, but smaller images do load faster, and that makes your pages easier to use.

    To shrink the image sizes, there's a great tool called "squoosh".  It shows you the difference from the original image and the compressed image, and you can download the compressed image (on the right hand side of the screen, left hand side is the download of the original image):

    https://squoosh.app/

    So that's all of the image stuff.

    Regarding the stat block, I think you've got the best solution already of just screenshotting the stat block.  The method @ragnarhawk shared is great, but it only works for some formats (like PDF and Google Docs), which this stat block is not.  And even if you could display their page in your page directly, you'd have the same risk that this website changes it's design, which would break your pages.

    Let me know if that doesn't answer your questions...or if you have any more questions!

     

    Obsidian Portal Developer

  • Frak_Lou_Elmo
    Frak_Lou_Elmo
    Posts: 117

    thanks! I can indeed use that. Sqoosh looks great!



    my campaign wouldn't look half as good if it was not for the help in the forums :)

  • thaen
    thaen
    Posts: 565

    Happy to!

    Obsidian Portal Developer

  • gastoff
    gastoff
    Posts: 136

    I'd also like to add to what @thaen mentioned about saving your own copy of images to the OP media library is that some of the community have firewalls that will block URLs that seem suspicious. For example, my workplace firewall flags any non-US site, so any images that are being called from .uk or .ca etc will not load on the OP page. This issue is avoided by having the image stored directly in the OP media library.

    image

  • thaen
    thaen
    Posts: 565

    @gastoff, good point!

    Obsidian Portal Developer

Sign In or Register to comment.

Curiosities and Acquisitions is June's Campaign of the Month!

Read the feature post on the blog!
Or return to Obsidian Portal!

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Discussions