Changing Blog List Images Sizes

[Tommy Long]

This is probably a simple question so forgive me. I'm trying to find out a why to change the images that appear on my blog list page to show thumbnails and not full size images, when a user clicks on them they will be taken to the blog post page where the full size image will be shown. The page I'm talking about is here technelogos.com/blog. Thanks for your help.

[Ross Laird]

This is relatively straightforward. You will just need to modify the blog_post_list.html template (for the list), and/or the blog_post_detail.html template (for an individual post).

Here is a bit of code that I use in blog_post_list.html to show thumbnail-type images on my own blog list page, which is here:  http://rosslaird.com/blog/

                <!-- Post item start -->

                    <div class="col-sm-6 col-md-4 col-lg-4">

                        {% editable post.title post.publish_date post.content %}

                        <div class="post mb-20">

                            <div class="post-thumbnail">

                                <a href="{{ post.get_absolute_url }}"><img src="{{ MEDIA_URL }}{% thumbnail post.featured_image 360 240 %}" width="360" height="240" alt=""></a>

                            </div>

                            <div class="post-header font-alt">

                                <h2 class="post-title"><a href="{{ post.get_absolute_url }}">{{ post.title }}</a></h2>

                                <div class="post-meta">

                                    By <a href="{% url "blog_post_list_author" post.user %}">{{ post.user.get_full_name|default:post.user.username }}</a> | {{ post.publish_date }}

                                </div>

                            </div>

                            <div class="post-entry">

                                {{ post.description_from_content|safe|truncatewords_html:"50" }}

                            </div>

                            <div class="post-more btn btn-g btn-round btn-xs">

                                <a href="{{ post.get_absolute_url }}" class="more-link">Read more</a>

                            </div>

                        </div>

                        {% endeditable %}

                    </div>

                    {% if forloop.counter|divisibleby:"3" %}

                {% endif %}

                <!-- Post item end -->

Then, on the page for each individual post, the image is used as the background for the header. That code lives in blog_post_detail.html, and looks like this:

<section class="module bg-dark bg-dark-60" data-background="{{ MEDIA_URL }}{% thumbnail blog_post.featured_image 1900 700 %}" style="background-image: url({{ MEDIA_URL }}{% thumbnail blog_post.featured_image 1900 700 %});">

    <div class="post">

        <h1 class="module-title font-alt blog-title">{{ blog_post.title }}</h1>

    </div>

</section>

You can see how the above code renders the page by clicking on any post from the listing page.

Hope this helps.

Ross

[Tommy Long]

Ross,

        Thank you so much for helping me and showing me how you implement the code into your blog. I've tried changing my code to mirror yours but I still can't get it to work. I'm still figuring Mezzanine out lol. Here's my code below.

{% for blog_post in blog_posts.object_list %}
    {% block blog_post_main%}
    <article>
    <div class="post-image">
            <div class="post-heading">
            {% block blog_post_list_post_title %}
            {% editable blog_post.title %}
            <h3><a href="{{ blog_post.get_absolute_url }}">{{ blog_post.title }}</a></h3>
            {% endeditable %}
            {% endblock %}
            </div>
            {% if settings.BLOG_USE_FEATURED_IMAGE and blog_post.featured_image %}
            {% block blog_post_list_post_featured_image %}
            <a href="{{ blog_post.get_absolute_url }}">
                <img class="" src="{{ MEDIA_URL }}{{blog_post.featured_image}">
            </a>
            {% endblock %}
            {% endif %}

God Bless,

Tommy Long

Check out my blog at www.technelogos.com/blog

--
You received this message because you are subscribed to a topic in the Google Groups "Mezzanine Users" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/mezzanine-users/hHDFGnbS_Iw/unsubscribe.
To unsubscribe from this group and all its topics, send an email to mezzanine-use...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Eduardo Rivas]

You're missing a closing curly brace in the <img> tag.

[Tommy Long]

Eduardo,

             Oops! Thanks for catching that. Been staring at this computer screen for too long apparently.

God Bless,

Tommy Long

Check out my blog at www.technelogos.com/blog

On Fri, Oct 16, 2015 at 11:01 PM, Eduardo Rivas <jeriva...@gmail.com> wrote:

You're missing a closing curly brace in the <img> tag.