Craft Theme - How to make all collage blocks have the same style/behavior?

[rodrigosens]

Hey, 

I have a collage with 3 images, one that was supposed to have a video, but I changed it to image. Now, there is only one block that have a collection title I want to remove, and change the link for whatever I want. If it's possible, make all the blocks have same mousehover effect from the one with the title would be great.

Page: http://sewe.studio
Pasword: tahrti

[namphan]

Hi @rodrigosens,

Please go to Actions > Edit code > Assets > collage.css file and paste this at the bottom of the file:

.collage__item .collage-card img {
	transition: transform var(--duration-long) ease;
}

.collage__item .collage-card:hover img {
	transform: scale(1.03);
}

[rodrigosens]

@namphan Hey, thx! I did it, but nothing changed. 😞

[rodrigosens]

@namphan Sorry, the hover is working! Thanks! Can you help me with the other issues?
- remove the titled from the third box

- set link to any page or link, on every boxes

[namphan]

Hi @rodrigosens,

Please go to Actions > Edit code > Assets > collage.css file and paste this at the bottom of the file:

.card:not(.ratio)>.card__content {
    display: none !important;
}
.card--standard.card--media .card__inner .card__information {
    display: block !important;
    opacity: 0;
}

[rodrigosens]

Hey @namphan , thx! It worked! But I still can't change the third image link. Do you think theres a way to do it? If it doesn't, it's already helped a lot! 

[namphan · Accepted solution]

Hi @rodrigosens,

Please follow the steps below:

- Step 1: Go to collage.liquid file and add code here:

- Step 2: Go to card-collection.liquid file and change all code:

{% comment %}
    Renders a collection card

    Accepts:
    - card_collection: {Object} Collection Liquid object
    - media_aspect_ratio: {String} Size of the product image card. Values are "square" and "portrait". Default is "square" (optional)
    - columns: {Number} 
    - extend_height: {Boolean} Card height extends to available container space. Default: false (optional)
    - wrapper_class: {String} Wrapper class for card (optional)

    Usage:
    {% render 'card-collection' %}
{% endcomment %}

{%- liquid
  assign ratio = 1
  if card_collection.featured_image and media_aspect_ratio == 'portrait'
    assign ratio = 0.8
  elsif card_collection.featured_image and media_aspect_ratio == 'adapt'
    assign ratio = card_collection.featured_image.aspect_ratio
  endif
  if ratio == 0 or ratio == nil
    assign ratio = 1
  endif
  assign card_color_scheme = settings.card_color_scheme
  assign card_style = settings.card_style
  if wrapper_class == nil or wrapper_class == 'none'
    assign card_color_scheme = settings.collection_card_color_scheme
    assign card_style = settings.collection_card_style
  endif 
  assign collection_url = card_collection.url
  if card_link and card_link != blank
    assign collection_url = card_link
  endif
-%}

<div class="card-wrapper animate-arrow {% if wrapper_class and wrapper_class != 'none' %}{{ wrapper_class }}{% else %}collection-card-wrapper{% endif %}">
  <div class="card
    card--{{ card_style }}
    {% if card_collection.featured_image %} card--media{% else %} card--text{% endif %}
    {% if card_style == 'card' %} color-{{ card_color_scheme }} gradient{% endif %}
    {% if extend_height %} card--extend-height{% endif %}
    {% if card_collection.featured_image == nil and card_style == 'card' %} ratio{% endif %}"
    style="--ratio-percent: {{ 1 | divided_by: ratio | times: 100 }}%;"
  >
    <div class="card__inner {% if card_style == 'standard' %}color-{{ card_color_scheme }} gradient{% endif %}{% if card_collection.featured_image or card_style == 'standard' %} ratio{% endif %}" style="--ratio-percent: {{ 1 | divided_by: ratio | times: 100 }}%;">
      {%- if card_collection.featured_image -%}
        <div class="card__media">
          <div class="media media--transparent media--hover-effect">
            <img
              srcset="{%- if card_collection.featured_image.width >= 165 -%}{{ card_collection.featured_image | image_url: width: 165 }} 165w,{%- endif -%}
                {%- if card_collection.featured_image.width >= 330 -%}{{ card_collection.featured_image | image_url: width: 330 }} 330w,{%- endif -%}
                {%- if card_collection.featured_image.width >= 535 -%}{{ card_collection.featured_image | image_url: width: 535 }} 535w,{%- endif -%}
                {%- if card_collection.featured_image.width >= 750 -%}{{ card_collection.featured_image | image_url: width: 750 }} 750w,{%- endif -%}
                {%- if card_collection.featured_image.width >= 1000 -%}{{ card_collection.featured_image | image_url: width: 1000 }} 1000w,{%- endif -%}
                {%- if card_collection.featured_image.width >= 1500 -%}{{ card_collection.featured_image | image_url: width: 1500 }} 1500w,{%- endif -%}
                {%- if card_collection.featured_image.width >= 3000 -%}{{ card_collection.featured_image | image_url: width: 3000 }} 3000w,{%- endif -%}
                {{ card_collection.featured_image | image_url }} {{ card_collection.featured_image.width }}w"
              src="{{ card_collection.featured_image | image_url: width: 1500 }}"
              sizes="
              (min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: columns }}px,
              (min-width: 750px) {% if columns > 1 %}calc((100vw - 10rem) / 2){% else %}calc(100vw - 10rem){% endif %},
              calc(100vw - 3rem)"
              alt=""
              height="{{ card_collection.featured_image.height }}"
              width="{{ card_collection.featured_image.width }}"
              loading="lazy"
              class="motion-reduce"
            >
          </div>
        </div>
      {%- endif -%}
      <div class="card__content">
        <div class="card__information">
          <h3 class="card__heading">
            <a{% if card_collection == blank %} role="link" aria-disabled="true"{% else %} href="{{ collection_url }}"{% endif %} class="full-unstyled-link">
              {%- if card_collection.title != blank -%}
                {{- card_collection.title | escape -}}
              {%- else -%}
                {{ 'onboarding.collection_title' | t }}
              {%- endif -%}
              {%- if card_collection.description == blank -%}<span class="icon-wrap">{% render 'icon-arrow' %}</span>{% endif %}
            </a>
          </h3>
          {%- if card_collection.description != blank -%}
            <p class="card__caption">
              {{- card_collection.description | strip_html | truncatewords: 12 -}}<span class="icon-wrap">&nbsp;{% render 'icon-arrow' %}</span>
            </p>
          {%- endif -%}
        </div>   
      </div>
    </div>
    {% if card_style == 'card' or card_collection.featured_image %} 
      <div class="card__content">
        <div class="card__information">
          <h3 class="card__heading">
            <a{% if card_collection == blank %} role="link" aria-disabled="true"{% else %} href="{{ card_collection.url }}"{% endif %} class="full-unstyled-link">
              {%- if card_collection.title != blank -%}
                {{- card_collection.title | escape -}}
              {%- else -%}
                {{ 'onboarding.collection_title' | t }}
              {%- endif -%}
              {%- if card_collection.featured_image or card_collection.description == blank -%}<span class="icon-wrap">{% render 'icon-arrow' %}</span>{% endif %}
            </a>
          </h3>
          {%- if card_collection.featured_image == nil and card_collection.description != blank -%}
            <p class="card__caption">
              {{- card_collection.description | strip_html | truncatewords: 12 -}}<span class="icon-wrap">&nbsp;{% render 'icon-arrow' %}</span>
            </p>
          {%- endif -%}
        </div>
      </div>
    {% endif %} 
  </div>
</div>

- Step 3: Go to Customize and select link.

[rodrigosens]

Done! Thank you!