Using Drupal 7 Views I have created a View which shows an SVG image file.

Here is an example scenerio: A Marketing Article Node is periodically created when a specific Prodcut offer is in place, the purpose being to show users of an new product offer (price discount etc), this offer includes within the node article 2 variations of the SVG discount graphic image i): a full graphic for Desktop/Laptop viewports ii): a smaller alternative sized graphic for mobile (cellular) devices such as iPhone/Android. Both images are listed at creation time of the Node, but ONLY ONE is to show a viewport.

Using a simple custom Drupal View, the 2 images are singularly shown on a relevant page (frontpage landing will suffice for example) based on the Viewport size, but my issue is that both show (ie on Desktop) and even though I have experimented with CSS within Views Field options and 'attribute' rules and considered CSS Field Modules and more all to no avail.

Again it is the INDIVIDUAL Files that needs to be accessed in order for the CSS Media Rule to be applied at CSS level.

Additionally, I have considered adding a CSS field to the image type in the system File-Types Module, but not sure if I can access the CSS there. Possibly my approach is wrong or simply missing something.

My final alternative would for now just create two types of Views for each Viewport and hide within the Panel.

Some directional pointers & advice please, is most welcome. I've spent over 4 hours on trying to find a solution. Thank you.

The following is not suitable: Different responsive image per breakpoint

put on hold as too broad by leymannx, mradcliffe, kiamlaluno 2 days ago

Please edit the question to limit it to a specific problem with enough detail to identify an adequate answer. Avoid asking multiple distinct questions at once. See the How to Ask page for help clarifying this question. If this question can be reworded to fit the rules in the help center, please edit the question.

  • Ok, some the question is 'broad' but in the context of Drupal and site building still relevant. Anyway, found an answer, which does the job for now. – Paul B Aug 14 at 20:27

Using the following code to target the file name image source, I could hide one of the two images in the Views showing the current Node which had Image fields in. In this case, one .SVG filename exported from Inkscape was called "sales_discount_alt_mobile_2019" with 'mobile' the alt field from the Desktop graphic image. So in my Desktop @media CSS rule I added the below code to hide mobile graphic and did the opposite in the Desktop visual and hid the mobile.

img[src*="alt_mobile_2019"] {
visibility: hidden; }

It works for now, and I hope it solves some future novice's problems. Good luck.

Source taken from MDN resource.

Not the answer you're looking for? Browse other questions tagged or ask your own question.