Categories
How To

Prettier DreamObjects Listing

Making my DreamObjects image lists look prettier.

A long time ago, I wrote about how to list your objects on DreamObjects. This code still works. I’m using it today, and as long as my bucket is public, it’s perfect.

It’s also kind of ugly and a hassle to get the link. I have to right-click every time, and really I just want to grab the link, paste it somewhere else, and go.

Thankfully it’s 2016 and there’s a library called clipboard.js that does this.

Before I did that, I decided how I wanted the layout to be. Two buttons, one for a link copy and one for a link to open in a new window.

The button list

Looks pretty basic, I know, but it’s better than that list.

Next I took my foreach loop and made it this:

	foreach ($bucket_contents as $file){
	
	    $fname = $file['name'];
	    $fname_pretty = strtolower( substr( $file['name'] , 0, strrpos( $file['name'] , ".") ) );
	    $furl = "http://".$bucketName.".objects.dreamhost.com/".$fname;
	
	    echo '<div id="example-text" class="example">';
        echo '<button class="btn" data-clipboard-demo data-clipboard-action="copy" data-clipboard-text="'.$furl.'" aria-true="Copied!">Copy link to '.$fname_pretty.'</button> ';
        echo ' <a class="btn" href="'.$furl.'" target="new">Open link to '.$fname_pretty.'</a>';
        echo '</div>';
	}

This gave me the output and set me up for the script code at the bottom of the page:

    <script src="clipboard.min.js"></script>
    <script src="tooltips.js"></script>
    <script>
    var btns = document.querySelectorAll('button');
    var clipboard = new Clipboard(btns);
    clipboard.on('success', function(e) {
        console.log(e);
        showTooltip(e.trigger, 'Copied!');
    });
    clipboard.on('error', function(e) {
        console.log(e);
    });
    </script>

Obviously clipboard.min.js is what you think it is, but the tooltips is so you can have that nice showTooltip popup so you know what you just did.

When you combine that with the work I did the other day for a droplet, all I have to do is keep that page up and handy to throw links at people.

You can see it at https://ipstenu.org/dreamobjects/.

Before you ask, since not everything there is an image (‘Wrong’ is Dom Deluise shouting that), and since the images are all varying sizes, I went with not showing the image at all.