Drupal

Twig hard coded image with link field conditional Drupal 10

If you need an Image hard code such as a social media icon, but only want to display when a certain link field is filled out.... Here's your twig code.

My link field is field.hudl.url replace it with your link field.

The twig:

<div id="social">
{% if content.field_hudl_link is not empty %}

Twig render image field Drupal 9 Template

  <div class = "image"> 
   Zoe
{% set image_url = file_url(node.field_YOUR_FIELD.entity.getFileUri()) %}
  <img src="{{ image_url }}") >
  </div>

Mobile Device Scrolling to the Right- Desktop Div causing issue? Check first.

When dealing with a mobile design coming from a custom webpage that needed a lot of regions changed on it to not use the branding of the entire site, particularly, no side bars and fixed width. My mobile design was scrolling right because of extra space on the right and you could only see it on an actually mobile device. Mobile device simulators do not catch it.

If you have a scrolling issue in mobile, sometimes it is a div on the desktop page causing the issue.  Using "position: fixed", will break you Y axis scroll (Up and Down).

 

Infographic Hover Effect on Image Map - Mouse Over JS HTML Twig

I had the hardest time piecing all this together.  One of the reason was because when you search for image maps, you get a bunch of maps. However after hours of searching and ChatGPTing. I finally mage this thing work. I am sure there is an easier way through some kind of coding platform but this is what I had to do.  Hope it helps someone else!

DDEV- Drush command to revert changes to a drupal view before you save

I am sure we have all ran into this, working on a view and forgetting to change the Apply to from "Apply to all views" to "Apply only to this view". Thus adding or worse, deleting fields or configurations across all view displays.

Easy solution if you use Drush. I use DDEV for my local so my command is:

ddev drush eval "\Drupal::keyValueExpirable('tempstore.shared.views')->delete('YOUR_VIEW_ID');"

This reverts the temporary changes. :)

Render the first item of a paragraph field in twig- Super easy without a loop.

Editors needed to tag different items to a piece of content. However because the content's header render the logo for the other tagged content, if you tagged more than two, the header would render for each tagged content.

Sooooo I thought I put a loop but because the header was based on a paragraph field, it was cooperating.

Easy solution Side by Side comparison.  (Basically, you just need to add a " .0 " to you twig field. Easy peasy!

Infinite Scroll "Load More" will not go away on taxonomy view when pager is selected.

I hade one page view in the taxonomy view that was showing the Infinite scroll "load more" text when I had the mini pager enable.

Turn out there was a block that displayed nodes with the same vocabulary that was using infinite scroll.

I changed that to a pager and the "load more" went away and my pager on the page view displayed.  

The infinite scroll block was in a completely different view too! 

Weird but I'll take it.

Drupal 9 Views Template Twig if statement for boolean fields

I don't know why this isn't any where on the web... Or at least that I could find.

I needed my block to show an image at full width if the editor selected it and another display if the editor did not select it.

For this to work you need to make sure your boolean field is set to "1/0" in two places.  The content type Fields Display section and in your view in the field.

Subscribe to RSS - Drupal