first() don't seem to work while using an image transform This "standard" set-up for rendering asset transforms works as expected. 

                {% set image = entry.articleImages %}

                {% if image | length %}
                    &lt;div class="col-sm-6 col-md-6"&gt;
                        &lt;a href="{{ entry.url }}" class="work"&gt;

                            {% for asset in image %}
                                &lt;img src="{{ asset.getUrl('worksList') }}" alt="{{ asset.title }}" title="{{ asset.title }}" height="{{ asset.getHeight('worksList') }}" width="{{ asset.getWidth('worksList') }}"&gt;
                            {% endfor %}

                        &lt;/a&gt;
                    &lt;/div&gt;
                {% endif %}


When I only want the first image out of the assets loop I would normally add .first() to the set image loop.

{% set image = entry.articleImages.first() %}


However this ends op in unclear error messages while rendering on the front-end ( Impossible to invoke a method ("getUrl") on a string variable ("111"))!
Or am I missing out on something?
This is where it goes wrong:

{% for asset in image %}


Because you use first(), you end up with an AssetFileModel, not an array of those.
If you than loop through that AssetFileModel with a for-loop, you get all the values of that Model. They don't have a method called getUrl(), which is what causes the error.

So, skip the for-loop and just use:

{% set image = entry.articleImages.first() %}
&lt;img src="{{ asset.url('worksList') }}" /&gt;


The url() method is an alias for getUrl().