Change link to blog post from text to an image link

1

I’m new to jekyll and coding, I was hoping someone could kindly help me.

I am creating a website that has two separate blogs on it. One blog has the typical list of blog posts to click on. For the second blog I would like to have a page of photos that are links to a blog post written based on that image.

My question is, how can I change the code to have the “photo blog” page display the images rather than a list of links.

Here is a link to my repository: GitHub - vasilisa-the-beautiful/vasilisa The website: https://beautifully-bipolar.com/

Also, you’ll notice that when you click the photo-blog link the layout shifts. I’ve been trying to fix that for a week now. Please help before I go crazy :'D

Thank you, I really appreciate the help!

2

You’re going to have to set the images on each post.

I see you have that already.

---
photo: 2_qoute.png
---

Then what you need to do in your photoblog.html layout is use the HTML img tag.

{%- for post in site.posts -%}
<div>
  <h2>{{ post.title }}</h2>
  {% assign photo_path = '/img/large/' | append: post.photo %}
  <img src="{{ photo_path | relative_url }}" />
</div>
{% endfor %}
3

Your repo looks terribly large and has a gemspec file in the root. Which makes me think you downloaded a zip or forked the repo.

I would highly recommended starting a very simple repo with just a few posts and pages and a config and no CSS or layouts or includes. And configure a Jekyll theme.

Then you can change themes using a few lines in _config.yml and Gemfile.

And you don’t have to clutter you repo with code that someone else wrote which you don’t need to bother with.

Plus you can always add to or override a theme by adding content in your own repo.

Follow the instructions on the About page of the Graphite theme

Check this out for an example of using Remote Theme plugin to install theme on a GH Pages site

Jekyll Theme Quickstart

4

Michael’s example is very straightforward and the only thing I would change is to create an href to that example if you want to make the image a clickable link.

If you want to get a bit more in-depth, I created a 3-part video series that shows you how to manage multiple blogs (or feeds, as I call them). In my case, I use a blog example and a podcast example, but the idea here is you can create as many as you want and call them whatever you want. If you do not want to display an image because the post does not have one, you can simply write display: none; in the scss code where the image displays in the grid. A little more learning required here, but it is nice to have a single code base to manage any type of post you want to display on a page.

1 Like
5

Thank you! I did download it as a zip originally. I’ve definitely tinkered with it a lot, trying new things and seeing if I could make something work (I had a page with a carousel at one point), so it may be me leaving code I don’t need anymore.

I wasn’t sure if I needed that gemspec file, so I left it alone. What purpose does it serve? It is different than the gemfile, right?

After I work my current problem out, I will take up your recommendation and try approaching a blog from a different, simpler angle. Practice makes perfect :slight_smile:

6

Thank you! I am going to watch these tonight :smiley: :blush:

7

oh yes thanks @BillRaymond

Here pointing to the post from the image. Or you can point to a larger version of the image.

<a href="{{ post.url | relative_url }}">
  <img src="{{ photo_path | relative_url }}" />
</a>
1 Like
8

@Kes01331

The gemspec file is part of the Ruby package management system.

It is only needed if you are making a Ruby gem that someone is going to install - such as a plugin or a theme. If you are only consuming other people’s gems and not making your own gem, then you can drop the gemspec.

More background

As with other languages, Ruby provides the ability to make a package installable. The package is known as a “gem”.

The Gemfile and gemspec file have different purposes.

The gemspec file describes the contents of a package (its name, the files it contains, the author). So it get installed by external projects.

The Gemfile describes which gems you want to add to your project.

For example, I have this demo site based on the Jekyll tutorial - see Gemfile of MichaelCurrin/jekyll-blog-demo. In that file, I am describing that I want at least 3 gems - the “jekyll” gem, the “minima” gem (a theme) and the “jekyll-sitemap” gem (a plugin).

Each one of those exists as a GitHub repo with a gemspec file in it and is published on the RubyGems website e.g. jekyll | RubyGems.org | your community gem host

My demo project has no gemspec file because it doesn’t need one.

9

In less than one minute you clearly explained what took me more than a day to figure out :rofl: (using category in the front matter to separate the posts onto different pages). It’s so simple, I don’t know why I didn’t consider that first- I guess I was looking for something more complicated, not taking into consideration that Jekyll can reuse code and make things easy :blush: I should try watching more videos instead of my habit of trial and error- I’ve found a lot of written tutorials hard to follow. Subscribed to your channel :wink:

1 Like
10

Glad it worked out for you! There are many ways to create multiple blogs and I have some other options on that playlist, but ultimately I just used categories because it was straightforward and easy to maintain.

1 Like