retug February 10, 2022

Website Quality of Life Updates

The website has three updates

1. New (hopefully easier to view) layout
2. Slugified URLs
3. Images that enlarge on click

1 - New (hopefully easier to view) layout

This one was by far the hardest for me to achieve, but hopefully makes the site easier to read on mobile. I have very little frontend development skills at this point and this work was 99% in reworking the html code for the website... and it was a bear for me.

The old website appeared like the image below, lots of wasted space for the stupid image to take up, it looked exceptionally bad on mobile where screen space is at a premium:

The new site has the appearance you are looking at, hopefully much better, no more wasted space:

The code changes to make this happen are subtle and I struggled with them. I still do not fully understand the <div> tag and how and why it works.

    <article class="media content-section">
      <div class="container">
        <div class="media-body">
          <div class="article-metadata">
            <img class="rounded article-img" style = "float:right" src= "{{ object.author.profile.image.url }}">
            <a class="mr-2" href="{% url 'user-posts' object.author.username %}">{{ object.author }}</a>
            <small class="text-muted">{{ object.date_posted|date:"F d, Y" }}</small>
            <h2 class="article-title">{{ object.title }}</h2>
            {% if object.author == user %}
              <div>
                <a class = "btn btn-secondary btn-sm mt-1 mb-1" href = "{{post.get_absolute_url}}/update">Update</a>
                <a class = "btn btn-danger btn-sm mt-1 mb-1" href = "{{post.get_absolute_url}}/delete">Delete</a>
              </div>
            {% endif %}    
        </div>

This post has made me identify another upgrade I need to make, a way to format code to make it look readable... more work for a later time.

2 -Slugified URLs

I thought this one was going to be difficult but it turned out to be much easier than I had anticipated. I had to make a change to my models.py file (essentially the database which allows this blog site to work) which always scares me because the last time I did this, I lost the whole website. This time it worked and I did not have to restore the website, horray!

The term slugify is apparently a django term for turning urls into human readable urls. For example, the previous url for this post would have been re-tug.com/post/7, the slugified post now incorporates the post title, retug.com/post/website-quality-of-life-updates/7. Without slugifying the title, the url would have been retug.com/post/website%20quality%20of%20life%20updates/7.

This apparently helps with search engine optimization and will make the urls a little more meaningful.

The code to make this happen:

 Models.py

class Post(models.Model):
    title = models.CharField(max_length=100)
    slug = models.SlugField(null=True, blank=True, unique=True)

    def get_absolute_url(self):
        #return reverse('post-detail', kwargs = {'pk': self.pk})
        return reverse('post-detail', kwargs = {'pk': self.pk, 'slug': self.slug})

Urls.py

urlpatterns = [
    path('post/<slug:slug>/<int:pk>', PostDetailView.as_view(), name='post-detail'),

In addition to these updates, a lot of the html hyperlinks had to be updated... one example:

.html

<div>
                <a class = "btn btn-secondary btn-sm mt-1 mb-1" href = "{{post.get_absolute_url}}/update">Update</a>

3 - Images that enlarge on click

The simplest of the three to solve. I use CKEditor for my image uploading and viewing and they have nice option to embed a link in an image. Try clicking on the image below and it should enlarge.

This solves my problem of tiny images not being readable.