In order to dynamically display an image alongside an h1 tag within an unordered list, I must create a conditional if statement to check for the presence of the image before

Here is the current progress of my wagtail template:

{% load wagtailimages_tags %}

<section class="container">
    <h2 class="text-center">{{ self.title }}</h2>
    <div class="general-alumnae-deck">
        {% for member in self.general_member_cards %}
            {% if member.photo %}

            {% endif %}
        {% endfor %}
    </div>
</section>

I aim to have the final code structured as follows:

<h2>Avatar Images</h2>

<ul>
    <li><img src="img_avatar.png" alt="Avatar" class="avatar"> <h3> Bleu </h3></li>
    <li><img src="img_avatar2.png" alt="Avatar" class="avatar"> <h3> Red </h3></li>
</ul>

</body>
</html>

If a photo exists, it will be displayed next to the "h3" tag with double brackets for dynamic templating.

https://i.sstatic.net/qvTkX.jpg

Answer №1

There is some ambiguity regarding the source of the image in question, as it may or may not come from Wagtail's image library. If indeed it does, it is recommended to utilize the {% image %} tag. Refer to

{% with self.general_member_cards as cards %}
{% if cards %}
    <ul>
        {% for member in cards %}
            <li>
                {% if member.photo %}
                    {% image member.photo fill-80x80 %}
                {% endif %}
                <h3>{{ member.name }}</h3>
            </li>
        {% endfor %}
    <ul>
{% endif %}

In addition, I have incorporated a {% with %} tag to cache self.general_member_cards within the template, anticipating a potential database query requirement. If such querying is unnecessary, this step can be omitted.

Answer №2

You already have the groundwork laid out...

<section class="container">
    <h2 class="text-center">{{ self.title }}</h2>
    <div class="general-alumnae-deck">
        <ul>
        {% for member in self.general_member_cards %}
            <li>
            {% if member.photo %}
                {% image member.photo fill-50x50 as avatar %}
                <img src="{{ avatar.url }} class='avatar">&nbsp;
            {% endif %}
            <h3 style="display:inline;">{{ member.name }}</h3>
            </li>
        {% endfor %}
        </ul>
    </div>
</section>

If you want the image next to the <h3>, you'll need to adjust the CSS by overriding the display:block property of the h3 tag to make it inline as shown above (or create a separate CSS class).

UPDATE: Revised to utilize wagtail's image template tag for obtaining the rendition of the member photo

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing jQuery to Toggle Visibility in Form Elements

When I'm working with a form that has multiple fields, one of them is hidden using Jquery based on user selection. However, when I try to submit the form after filling it out, the hidden field and its data are still included in the submission. How can ...

The representation of Django-extensions model graph can be visually depicted as a collection of square

During my project, I needed to visualize the database and found a recommendation to use django-extensions. Following the documentation, I took the following steps: I installed pyparsing and pydot using pip, then manually installed graphviz. Additionally, ...

Sophisticated Django annotation techniques

Prerequisites: The queryset must only return objects of type Article The queryset must only return unique objects Avoid using for loops that make individual queries to the database (which would result in N queries for N objects) My Model Definitions: c ...

What is the best way to center the header on the page?

Struggling to align the header and images centrally on the page, I've been experimenting with the box model but haven't had much success. Being new to this area, any guidance or tips would be greatly appreciated. https://i.sstatic.net/ejR8L.png ...

Is it possible to implement a delay period or prompt for user confirmation before the transition can be repeated?

When using CSS to code for an image or box to move when hovered over, there can be unexpected results. If the mouse is positioned within the click area at the beginning of the transition but not at the end, the effect may repeat indefinitely and stutter if ...

The CSS background design is experiencing issues in IE9

Check out this code snippet I have for customizing the background of a webpage: body { font-family: "HelveticaNeue", Helvetica, Arial, sans-serif; font-size: 12px; background: -webkit-radial-gradient(50% 20%, circle farthest-side, transparent ...

Is it possible to justify align inline-block elements across multiple lines?

I have encountered various scenarios where I need a DIV to contain an inline-block menu element - usually an anchor - and behave as if the elements are vertically justified, even when they overflow onto multiple lines. Let me illustrate with an example: ...

When the window is resized, the css('position') method may return undefined

Here is the code I am using to detect the browser resize event: window.onresize = function(){ var style = $('#button-selection').css('position'); if(style == "relative"){ $("#button-section").css("position"," "); }else if(style == ...

Tips for positioning buttons in the bottom corner of a webpage while ensuring they are responsive

Currently working on this website as a personal side project, focusing on making it responsive. This is my first attempt at creating a responsive webpage, and I have successfully figured out most aspects except for the positioning of the social media butto ...

Counting Django ORM objects

Take a look at these hypothetical models: class BaseProduct: quantity_available = Integer class Box(BaseProduct): items_in_box = Integer >> BaseProduct.objects.count() >> Integer Now, how can I calculate the total number of products a ...

Move your cursor over an image to modify the z-index of another image

I am facing an issue with my webpage that consists of 6 small images and one large image in the center, made up of six layers each containing one image, similar to this example: http://jsbin.com/onujiq/1/. I have set the z-index property of all center imag ...

Step-by-step guide on triggering a button using another button

I have a unique question that sets it apart from others because I am looking to activate the button, not just fire it. Here is my syntax: $("#second_btn").click(function(){ $('#first_btn').addClass('active'); }) #first_btn ...

The challenge with obscured overflow in CSS

I'm encountering an issue with the overflow hidden property of an element. My goal is to have the green bordered box slightly overlapping the red box, similar to the second example shown. <ul> <li id="first_slide">sdsdsadsadasdas< ...

What is the technique for implementing a slide animation on hover to move a div identified by the class `box`?

How can I create a div element with the class of box that already has some transitions applied to it, and also include a slide animation on hover effect for the same div? .box { background-color: red; width: 70px; height: 70px; transition-propert ...

css: varying container heights for columns in Chrome and Safari using Bootstrap 4

In my code snippet below (this is just a prototype, in the actual application everything is different but follows a similar structure): <body> <div class="row"> <div class="col-3 d-none d-sm-block"> <div class="h-1 ...

Convert JSON data into an HTML table with custom styling

If you have a set of JSON data that you want to convert into an HTML table, you can use the following code: $.each(data, function(key, val) { var tr=$('<tr></tr>'); $.each(val, function(k, v){ $('<td>' ...

Is the line between strict and transitional blurred by HTML5?

After conducting research, it seems like HTML5 has done away with the strict versus transitional differentiation (now always strict). Although I haven't found any explicit mention of this change, it is definitely implied. Can you confirm if this is in ...

Styling with CSS: Changing the Background Color of Text

Looking for a solution to apply line-height to text without affecting the background color? Check out the code snippet below and share your ideas if you have any. Thanks! .nb-semnox-impact-grid { display: block; font-size: 6 ...

Is it better to choose AJAX and JQuery for their speed and complexity, or stick with the simplicity of GET requests?

When a user attempts to log in and fails, an error message should be displayed on the page. There are two primary methods that can be used to achieve this: one involves using a form action on the HTML page and handling incorrect login information in the PH ...

The style in {filename} was not applied as it has a MIME type of 'text/html', which is not a compatible stylesheet MIME type

Currently, I am working with an index.ejs file in conjunction with Express for a local host web server. However, I seem to be encountering 4 errors of 2 different types. You can view the errors here. Below is a snippet of my code: <html> <head> ...