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

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

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);
}

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

@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

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;
}

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!

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
-%}

  

    

      {%- if card_collection.featured_image -%}
        

          

            
          

        

      {%- endif -%}
      
        

          ### 
            
          {%- if card_collection.description != blank -%}
            

              {{- card_collection.description | strip_html | truncatewords: 12 -}} {% render 'icon-arrow' %}
            

          {%- endif -%}
        
   
      

    

    {% if card_style == 'card' or card_collection.featured_image %} 
      
        

          ### 
            
          {%- if card_collection.featured_image == nil and card_collection.description != blank -%}
            

              {{- card_collection.description | strip_html | truncatewords: 12 -}} {% render 'icon-arrow' %}
            

          {%- endif -%}
        

      

    {% endif %} 
  

  • Step 3: Go to Customize and select link.

Done! Thank you!