Skip to content

Commit a0cdca1

Browse files
authored
Update imageomics.md
1 parent 0d2e8d8 commit a0cdca1

File tree

1 file changed

+0
-74
lines changed

1 file changed

+0
-74
lines changed

_projects/imageomics.md

Lines changed: 0 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -42,77 +42,3 @@ Read more about <a href="https://imageomics.osu.edu/">the Imageomics Institute</
4242
</p>
4343
</div>
4444
</div>
45-
46-
47-
48-
<!-- Every project has a beautiful feature showcase page.
49-
# It's easy to include images in a flexible 3-column grid format.
50-
# Make your photos 1/3, 2/3, or full width.
51-
52-
# To give your project a background in the portfolio page, just add the img tag to the front matter like so:
53-
54-
---
55-
layout: page
56-
title: project
57-
description: a project with a background image
58-
img: /assets/img/12.jpg
59-
---
60-
-->
61-
<!-- <div class="row">
62-
<div class="col-sm mt-3 mt-md-0">
63-
{% include figure.liquid loading="eager" path="assets/img/1.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
64-
</div>
65-
<div class="col-sm mt-3 mt-md-0">
66-
{% include figure.liquid loading="eager" path="assets/img/3.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
67-
</div>
68-
<div class="col-sm mt-3 mt-md-0">
69-
{% include figure.liquid loading="eager" path="assets/img/5.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
70-
</div>
71-
</div>
72-
<div class="caption">
73-
Caption photos easily. On the left, a road goes through a tunnel. Middle, leaves artistically fall in a hipster photoshoot. Right, in another hipster photoshoot, a lumberjack grasps a handful of pine needles.
74-
</div>
75-
<div class="row">
76-
<div class="col-sm mt-3 mt-md-0">
77-
{% include figure.liquid loading="eager" path="assets/img/5.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
78-
</div>
79-
</div>
80-
<div class="caption">
81-
This image can also have a caption. It's like magic.
82-
</div>
83-
84-
You can also put regular text between your rows of images, even citations {% cite einstein1950meaning %}.
85-
Say you wanted to write a bit about your project before you posted the rest of the images.
86-
You describe how you toiled, sweated, _bled_ for your project, and then... you reveal its glory in the next row of images.
87-
88-
<div class="row justify-content-sm-center">
89-
<div class="col-sm-8 mt-3 mt-md-0">
90-
{% include figure.liquid path="assets/img/6.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
91-
</div>
92-
<div class="col-sm-4 mt-3 mt-md-0">
93-
{% include figure.liquid path="assets/img/11.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
94-
</div>
95-
</div>
96-
<div class="caption">
97-
You can also have artistically styled 2/3 + 1/3 images, like these.
98-
</div>
99-
100-
The code is simple.
101-
Just wrap your images with `<div class="col-sm">` and place them inside `<div class="row">` (read more about the <a href="https://getbootstrap.com/docs/4.4/layout/grid/">Bootstrap Grid</a> system).
102-
To make images responsive, add `img-fluid` class to each; for rounded corners and shadows use `rounded` and `z-depth-1` classes.
103-
Here's the code for the last row of images above:
104-
105-
{% raw %}
106-
107-
```html
108-
<div class="row justify-content-sm-center">
109-
<div class="col-sm-8 mt-3 mt-md-0">
110-
{% include figure.liquid path="assets/img/6.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
111-
</div>
112-
<div class="col-sm-4 mt-3 mt-md-0">
113-
{% include figure.liquid path="assets/img/11.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
114-
</div>
115-
</div>
116-
```
117-
118-
{% endraw %} -->

0 commit comments

Comments
 (0)