Close

[Stefan Lochbrunner]'s idea: Side by side images

A project log for Hack the Hack A Day Editor

A hack based on "HTML Injection". Useful when you want an online editing feature that is not available otherwise. Might work on any Website.

rogeorgeRoGeorge 07/06/2015 at 07:333 Comments

In a log entry I could not reproduce the alignment from his page: https://hackaday.io/page/1082-test, because the editor was eating some of the style attributes when the log was saved. Still, side by side can be done as a table, but it doesn't look to good:

You can further stretch the idea, and make a log entry to look like a gallery.

How you can do it

Apply the steps described in the first log entry but instead, right click on your first picture and adjust your code to look something like that:

<tbody>
    <tr>
        <td style="width:50%; text-align:center; vertical-align:middle">
            <a href="https://cdn.hackaday.io/images/your_image_number_1_here.png" target="_blank">
                <img src="https://cdn.hackaday.io/images/your_image_number_2_here.png">
            </a>
        </td>
        <td style="width: 50%; text-align:center; vertical-align:middle">
            <a href="https://cdn.hackaday.io/images/your_image_number_2_here.png" target="_blank">
                <img src="https://cdn.hackaday.io/images/your_image_number_2_here.png">
            </a>
        </td>
    </tr>
</tbody>
Note: The editor thinks he's smarter then you are, so he's applying all kinds of different unsolicited formatting, depending on what part of the project you are editing. Didn't figure out yet why the editor is sometimes mangling styles.

Or you can do it from the HaD Editor

Note: In fact, it is possible all the time to do it from the HaD Editor, just that it never cross my mind to try it from the GUI. Too bad the smaller image is top aligned with the bigger image, instead of middle aligned.

:o(

Discussions

Stefan Lochbrunner wrote 07/07/2015 at 15:35 point

Yeah, it kinda works from the editor but it doesn't scale since the images have a fixed size after you resize them. Here's a screenshot of how the last two images look on a smaller (laptop) screen: 


On my desktop monitor they are side by side with the tops aligned like you described.

  Are you sure? yes | no

RoGeorge wrote 07/07/2015 at 17:47 point

Indeed, resizing of the whole page doesn't do good to the last trick.

It was a choice between using float and having text between pictures, or leave them jump one under another. The last one looks better. This is the best I could find so far. With both pictures float, text goes between pictures and make the whole page look like under construction or something. 

Just in case you will find the perfect way, I'll let a link to your page here: Side by side images.

So far, the only solution that really display two picture side by side, and consistently across any screen format, is to stick the two images together in a graphical editor, then save them as one wide image, but I guess this doesn't count.

:o)

  Are you sure? yes | no

Stefan Lochbrunner wrote 07/07/2015 at 18:08 point

Editing the images into one is what I've been doing so far... so I wouldn't say that doesn't count ;)

In the preview of that profile page of mine i get text between the images, too. But when I look at the full page it looks ok. I got rid of the text between the images by inserting spaces and line breaks. It should also not display text between the images if both images together take up 100% of the width.

I think better image editing has been brought up in the feedback post before but I'll ask if they can do something. Some possibilities would be to have an option to make the grid of the table transparent (maybe that could be done with html?) or make it such that the editor doesn't set the image size in absolute but relative values when you resize an image. I'll report back if I find something.

Anyway, I'm looking forward to more editor hacks :)

  Are you sure? yes | no