Unable to assign link to image

Created on 29 February 2024, 4 months ago
Updated 23 March 2024, 3 months ago

Problem/Motivation

I'm hoping that a second set of eyes will reveal my issue. I've been using Slick and Slick Views for several years successfully. I have a pretty generic carousel that when you click on the image, it takes you to the destination (internal or external) specified on the Link field. It was recently reported to me that now when you click on the image, it always takes you to the carousel node that was created.

Steps to reproduce

I have a carousel content type with three fields -- body, image, and link. I also have a carousel View. The Slick settings have Main Stage set to Content: Image; Link is set to Content: Link. In the Fields section, I have Image displayed. Link Image to is set to Content -- the choice of Content: Link isn't in the drop-down. In the Preview section, the carousel image is displayed but beneath is another image with the correct URL shown.

Another approach I tried is to hide the Image and create a custom field with the content <a href={{ field_link }}>{{ field_image_carousel }}</a>. In this case in the Slick settings, I set Link to Content: Global: Custom Text. Even though the Image is hidden, the carousel uses the settings for Image and ignores the Custom Text.

In both cases, clicking on the image takes you to the carousel node for that image, not the URL given in the Link field.

I've spent a couple of hours trying many permutations of the various settings. Sometimes I can get the correct URL to display beneath the image but I just can't get the Link value to wrap around the image. If I could just get Content: Link to show up in the Image field settings, I would be all set.

Any idea what I'm doing wrong?

🐛 Bug report
Status

Fixed

Version

2.0

Component

Miscellaneous

Created by

🇺🇸United States chanelwheeler

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @chanelwheeler
  • Status changed to Postponed: needs info 4 months ago
  • 🇮🇩Indonesia gausarts

    Thank you.

    IIRC (it is in 3.x, might be in 2.x as well), at the latest Blazy, there is a new option Image linked by Link field under Media switcher option to account for this.

    Be sure to also select the link under Link option. Then at Slick Views, simply select that Blazy Image/Media.

    Does that help?

  • Status changed to Active 4 months ago
  • 🇺🇸United States chanelwheeler

    I went through the Blazy settings; there's nothing about Media Switcher or links. Looking at the Blazy UI Drupal page, it doesn't appear to support Blazy 3 yet.

    In the Carousel Views settings, under Link, I see the text: "If Media switcher > Image linked by Link field is selected, it will be gone to serve as a wrapping link of the image, only if its formatter/ output is plain text URL." I just can't find Media Switcher anywhere. Anyone know where it is?

  • 🇮🇩Indonesia gausarts

    Media switcher option is in Blazy/Slick, etc. field formatters, not in Views styles.

    If using Views UI, on LHS, select your Image or Media. On modal, select Blazy as its field formatter.

    If using Field formatter UI, use Blazy or Slick formatter in the Manage display UI.

    Be sure you have link field to have the option either on Node or Media entities along with the chosen Image which should be wrapped by the link field.

    The rest are as you already found in the quoted description.

  • 🇺🇸United States chanelwheeler

    I don't entirely understand what you wrote but I am getting closer. In the Carousel View, I went to Fields -> Image and set the Formatter to Blazy Image. I then set Media Switcher to Image Linked by Link Field. The Link Field drop-down doesn't have any choices but it seems like it should.

    In Fields -> Link, I have the Formatter set to Link and "URL only" and "Show URL as plain text" checked on.

    What do I do to get the Link field to show up for the Media Switcher Link drop-down?

  • 🇮🇩Indonesia gausarts

    Just checked, sounds like a bug in Views UI.
    The link should be there if using Field UI.

    Can you confirm the link is available as option if using Field UI?

  • 🇺🇸United States chanelwheeler

    I'm not sure if I understand. If I go to the Content Type for the carousel then Manage Display and click on the Settings for the Image, I get the Media Switcher and the Link field does contain Link. Is there a bug number for the Views UI issue?

  • 🇮🇩Indonesia gausarts

    Moved it to Blazy for the fix, if any.

    Here is currently what works for images wrapped with links:

    1. If using Field UI, Link is fine for plain images and media. As you confirmed.
    2. If using Views, plain images in Node fail. But Media with its link is fine.

    Alternatively, till we have time to see to it, please try Media.

    Or try using Views UI to wrap your image with the link. This has a few ways with your OP rewrites. But may need to use the correct field for that. And likely the field reorders, etc.

    About Views UI bugs or limitations, I don't know for sure, but I did notice a few myself with missing formatter forms for Blazy OEmbed, etc.

  • 🇺🇸United States chanelwheeler

    How do I use Media? I don't know what you're referring to.

    I did try wrapping the image with the link by creating a Custom Text field with the content:
    <a href={{ field_link }}>{{ field_image_carousel }}</a>

    The problem is that in the Views Image settings, I only have the choices to link to nothing, content, or file. Whichever I choose overrides the Custom Text field even though Image is excluded from the display.

  • 🇮🇩Indonesia gausarts

    > How do I use Media?
    Similar to the way you created your Image field, only choise Media for the entity, not plain Image. More details in /admin/help page under Field and Field UI.

    > creating a Custom Text field with the content..
    No creating a new field. Just use Rewrite results right below the Blazy formatter.

    Also missing quotes:
    <a href="{{ field_link }}">{{ field_image_carousel }}</a>

    And field_link is reordered to be before image.

    Then select that formatter at Slick Views as usual. Not tested, just like so normally.

  • 🇺🇸United States chanelwheeler

    Ok, I created a new field and rendered it as Slick carousel. In Views, I added the new field, set the Formatter as Blazy Media, set Image Style to Slick media, and set the View mode to Slick carousel. Under Rewrite Results, I put <a href="{{ field_link }}">{{ field_image_2 }}</a>. This results in an unlinked image with the link displayed in a separate box and correctly linked to the destination.

    If I set Media Switcher to Image Linked by Link Field, the Link drop-down doesn't offer any choices. That Link field seems to be the crux of the issue. How do I get a value there?

  • 🇮🇩Indonesia gausarts

    > ... the new field, set the Formatter as Blazy Media
    You have a new media field now, correct?

    Then no need Rewrite results.

    Recapped steps:

    1. Create a new Media field in Content type Carousel, says Media Carousel (single value is safer, unless you can manage multivalue, which is better, ramifications at Display rows, etc.).
    2. Inside this Media Manage fields UI, create a Link field.
    3. Use the field at Views UI for Slick carousel.

    At Views UI:

    1. Add Media Carousel field at Fields with formatter as Blazy Media
    2. Set Media switcher for Image linked by Link field, and fill out the Link option. No need Rewrite results as said above. Rewrite is only needed for plain image due to this Views UI bug, not media which has no such bugs.
    3. Select it at Slick carousel under Main stage for aggregated contents like your OP intentions. Or directly set the formatter as Slick carousel for multivalue field for another usage.

    See Slick Views home page for more usage details.

  • 🇺🇸United States chanelwheeler

    I did exactly as you said but in Views UI in the Fields section under the Media Switcher, the Link drop-down is empty. What do I need to do to get that field populated?

  • 🇮🇩Indonesia gausarts

    > the Link drop-down is empty
    Create a link or plain text field at Media > Manage fields, says: /admin/structure/media/image/fields
    Adjust to any bundle others than Image, no problem.

    Then you will have the link under the Link option including in Views UI which is not for plain images as you OP reported. Add the Link to other Media types accordingly so you can have youtube thumbnail videos, etc., as images wrapped with links as well, for example.

    I suspected you are confused with the misleading Link option description specific for Slick form, also due to separate two forms below.

    This Slick Link description is indeed misleading at Slick form due to reuse and should also be corrected later.

    At Views UI LHS you'll have two forms for this purpose:

    1. Slick carousel form: Under Format > Settings, just select the Media field under Main stage. Ignore or leave Link option empty for now. Since this form has no Media switcher in it, the Link won't wrap images. I think you are confused with this one. Leave it empty for now, or add a new Field under Fields. This Link here is not for wrapping images, just regular separated Read more or Buy produk links. This Link description needs correction.
    2. Blazy formatter form: Under Fields > Content: Media or your Media field name. If you followed the above instructions correctly, you will have Media switcher and Link option populated. The Link description is correct here.

    Let me know?

  • 🇺🇸United States chanelwheeler

    > Adjust to any bundle others than Image, no problem.

    Do you mean to set it to something like Video File? Then how am I going to load static images?

  • 🇮🇩Indonesia gausarts

    > how am I going to load static images?
    For standard profile, add the exact same/ existing Image field found in Media Image type named field_media_image to any other media types to act as a remote/local video, audio, file, document, etc. thumbnail. Do not recreate another image field, just reuse the existing for consistent use with mixed media contents.

    Then be sure to associate it at blazy-related formatters Media stage option.

    That will also replace the factory/ default media thumbnail for your own hires image, or if any default thumbnail is no good or unwanted. More details in its description.

  • 🇺🇸United States chanelwheeler

    > For standard profile, add the exact same/ existing Image field found in Media Image type named field_media_image to any other media types to act as a remote/local video, audio, file, document, etc. thumbnail. Do not recreate another image field, just reuse the existing for consistent use with mixed media contents.

    I'm sorry I'm just not understanding this. I create an Image from Media Types and use that in my Content Type carousel, yes? What am I missing? (Just a heads up, I'm out of the office next week but I'll pick this up the following week.)

  • 🇮🇩Indonesia gausarts

    > I create an Image from Media Types and use that in my Content Type carousel, yes?
    Yes. It must be Add a new field > Reference > Media, not Image for the OP to work correctly in your Content type, says Article: /admin/structure/types/manage/article/fields

    To avoid confusions, avoid Minimal profile when you are first installing Drupal. Choose Standards profile.

    Most basic Media and Content type fields are already created for you in Standards profile.

    Then our communication will be easier.

    At other Media types other than Image, says Remove video /admin/structure/media/manage/remote_video/fields:
    After clicking Add field button in any Media types Manage fields is to select Re-use an existing field > Image: field_media_image. This field was created originally in Media type Image, so the rest of Media types should just re-use this. You do not create field_media_image, Drupal already did in Standards profile.

    For this OP purpose, the Link field in Media types is the only field you need to create manually since Standards profile has no Link field in Media type Image. And later the rest of Media types should re-use this Link field and follow the instruction in the above paragraph.

    It is crucial to get/ re-use the same exact field in all Media types for mixed Media contents to work correctly so that Blazy field options can choose the same field for all Media types.

    Shortly, only create a new field if none is already there. And re-use the existing if already there.

    Again, if not using Standards profile, please re-install your Drupal with it so that you can know Drupal and its original architecture which is the Standards. Then our conversation will be easier. True if you are just starting out. Avoid Minimal profile, it is for advanced users who have a lot of time to waste or don't want to go Standards.

    • gausarts committed cc44525d on 8.x-2.x
      Issue #3424739 by chanelwheeler: Unable to assign link to image
      
  • Status changed to Fixed 3 months ago
  • 🇮🇩Indonesia gausarts

    The fix should do.

    Feel free to re-open and or share your solutions.

    Thank you.

  • Automatically closed - issue fixed for 2 weeks with no activity.

Production build 0.69.0 2024