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.

Django Web Dev

awesome work on this site dude.

The sketching demo is impressive!

Thanks Celt! Saw your site up and running as well, looking good; exciting stuff. What did you use to build your site?

I plan on jumping back into the sketching portion of the site now when I get free time. I need to learn javascript to achieve some of the engineering items I want to post to this site.

We will have to collaborate in the future!

I also need to add a means to update and edit comments...

on my end I ended up using Flask, Django was a little overwhelming and what I wanted to do didn't exactly fit in the mold that it creates for a web app. 

I brute forced my way through so much of the javascript, lots of console.log commands. The syntax is very different than Python but you should be able to pick it up pretty quick. I found a lot of examples that were close to what I wanted to do, dynamic table inputs w/o a database, using Jquery which I recently learned is viewed as a bit of a dead language now that Node.js and React exist.

this is great free resources to get started with: https://eloquentjavascript.net/ 

did some cleanup work over the weekend on my end, if you want an example of a calculation done completely with Javascript take a look at either the development length page or the corbel page both of those just have their basic templates rendered through flask and all the work is done in Javascript.

Our Sidebar

You can put any information here you'd like.

  • Latest Posts
  • Announcements
  • Calendars
  • etc