WBCE CMS Forum

WBCE CMS – Way Better Content Editing.

You are not logged in.

#1 20.09.2021 19:29:24

losttrip
Member

[solved] NIA - Preview Image Display Behaviour

WBCE Version: 1.5.0
PHP Version: 7.4.23
NIA 0.3.5
NWI 5.0.7

I'm trying to get some control over how the Preview Image ( .mod_nwi_teaserpic ) or lack there of, is displayed.  Essentially, I want to hide the teaserpic img scr= code, if there is no Preview Image.

The reason is that I have border, box-shadow and padding styles applied to the class - .mod_nwi_teaserpic img
as well as a box-shadow style on the - a img:hover

So, even when there is no Preview image, these styles still get applied:
aa1a5ddb0e422d49dbf23e746a16c568.png
(note the square boxes.  The top one is a link (has Content_long), the bottom is not (does not have Content Long))


The NIA section uses the following template:

<div class="mod_nia">
	<h2 class="latest_news">{{ lang.TXT_HEADER }}</h2>
	
	{% for news in newsItems %}
		{% if news.TS_POSTED_WHEN > 0 %}
			<div class="mod_nwi_group">
				<div class="mod_nwi_teaserpic">
					
					{% if (news.CONTENT_LONG or news.HASGALLERYIMAGES) %}
					<a href="{{ news.LINK }}">{% endif %}<img src="{{ news.IMAGE }}" />{% if (news.CONTENT_LONG or news.HASGALLERYIMAGES) %}</a>{% endif %}
					
				</div>
				
				<div class="mod_nwi_teasertext">
					{% if (news.CONTENT_LONG or news.HASGALLERYIMAGES) %}
					<a href="{{ news.LINK }}">{% endif %}<h3>{{ news.TITLE }}</h3>{% if (news.CONTENT_LONG or news.HASGALLERYIMAGES) %}</a>{% endif %}
					<div class="mod_nwi_metadata"><!--{{ news.DISPLAY_NAME }} | -->Published {{ news.TS_PUBLISHED_WHEN | date(lang.DATE_FORMAT) }}</div>
					{{ news.GROUP_IMAGE }} 
					<div class="mod_nwi_shorttext">
						{{ news.CONTENT_SHORT}}
					{% if (news.CONTENT_LONG or news.HASGALLERYIMAGES) %}
					<a href="{{ news.LINK }}">{{ lang.TXT_READMORE }}</a>
				{% endif %}
					</div>
				</div>

				<div class="mod_nwi_spacer"><hr /></div>
				
			</div>
			
		{% endif %}
	
	{% else %}
		{{ lang.TXT_NO_NEWS }}
	{% endfor %}

</div>

There are four Preview Image scenarios as far as I can tell:

  1. Preview Image with Content_Long

  2. Preview Image without Content_Long 

  3. no Preview Image and no Content_Long

  4. Content_Long without Preview Image

Scenario 1 is not a problem, everything displays as I would like.

Scenario 2 - This works fine after this solution - To prevent the hover styles from displaying, I implemented this code ( https://forum.wbce.org/viewtopic.php?pid=28134#p28134 ):

{% if (news.CONTENT_LONG or news.HASGALLERYIMAGES) %}
					<a href="{{ news.LINK }}">{% endif %}<img src="{{ news.IMAGE }}" />{% if (news.CONTENT_LONG or news.HASGALLERYIMAGES) %}</a>{% endif %}

Scenario 3 - I removed the default placeholder image (as suggested here - https://forum.wbce.org/viewtopic.php?pid=38003#p38003 ), but even though there is no Preview Image, the img code is still there, so the img styles are applied to it:

<div class="mod_nwi_teaserpic">
<img src="" />
</div>

Scenario 4 - Even though there is no Preview Image, because there is Content_Long, the link code and img code are there, all styles are applied:

<div class="mod_nwi_teaserpic">
<a href="https://www.mysite.com/posts/welcome-message-21/"><img src="" /></a>
</div>

If there is not Preview image, I want to hide the associated code, either:

<img src="" />

or

<a href="https://www.mysite.com/posts/welcome-message-21/"><img src="" /></a>

I played around and tried:

{% if (news.IMAGE) %}
{% if (news.CONTENT_LONG or news.HASGALLERYIMAGES) %}
					<a href="{{ news.LINK }}">{% endif %}<img src="{{ news.IMAGE }}" />{% if (news.CONTENT_LONG or news.HASGALLERYIMAGES) %}</a>{% endif %}
{% endif %}

But that did nothing.

I would gladly provide a link through PM, if that would be helpful.

Thank you.

Last edited by florian (22.09.2021 15:49:40)

Online

#2 21.09.2021 05:34:24

florian
Administrator

Re: [solved] NIA - Preview Image Display Behaviour

I tried to reproduce the issue, but in my test environment (with the same PHP, WBCE, NWI and NIA version), the behaviour using

{%if (news.IMAGE) %}
	{% if (news.CONTENT_LONG or news.HASGALLERYIMAGES) %}
	<a href="{{ news.LINK }}">
	{% endif %}					
	<img src="{{ news.IMAGE }}" />					
	{% if (news.CONTENT_LONG or news.HASGALLERYIMAGES) %}
	</a>
	{% endif %}
{% endif %}

worked as expected, e.g. the image is only shown if the post actually has an image.


Code allein macht nicht glücklich. Jetzt spenden!

Offline

Liked by:

losttrip

#3 22.09.2021 10:47:41

losttrip
Member

Re: [solved] NIA - Preview Image Display Behaviour

Thank you for your support!

I must have overlooked something when I tried adding the

{%if (news.IMAGE) %}{% endif %}

and testing.  Perhaps tired eyes were at fault.

Online

Board footer

up