1

So I'm working as a frontend dev and I was told to make images inside article responsive. Our backend runs on symfony 2.X and sadly, I don't know much about it... The problem is the way, how the article is being rendered. It looks like this:

{{ article.content|raw }}

It means, that I have no option how to edit the style or class of the image. So I'd like to know, if there is any filter or function with which I could separate the image from the text and assign it a class or a style. We use our own Content Management System in which you paste the image right into the text...

TweeZed
  • 55
  • 1
  • 8

2 Answers2

0

There is no such function / filter available in Twig (or Symfony for that matter).

You could probably write a custom function / filter to achieve this but that may be a bit of a challenge if you're not familiar with Symfony.

The quickest way to sort this would probably be one of these two:

  1. If content is tied to a WYSIWYG in the CMS you may be able to edit the html in the source view of the WYSIWYG editor.

  2. If that's not possible you could jump onto the DB and edit the content html there.

Bananaapple
  • 2,984
  • 2
  • 25
  • 38
  • Well, I found out, that the image has some inline style added to it so I tried to replace the style with some another using "replace" filter, but it just broke the whole article. If it is possible to replace just the part of the text, that contains the code, it would solve my problem... – TweeZed Oct 24 '19 at 15:32
0

So I managed to make a javascript, that just finds all the images and applies a class to them to make them responsive. Here is the code:

$(document).ready(function(){
          for(var i=3; i < document.getElementsByTagName("IMG").length; i++){
            var image= document.getElementsByTagName("IMG")[i]
            if(image.classList.contains("img-responsive")){

            }
            else{
              image.classList.add("image-article");
            }
          }});

The loop starts from the fourth element, because the first three img tags are just some dummy code pasted by the CMS. It also checks if there are any images with img-responsive class to prevent broken css.

TweeZed
  • 55
  • 1
  • 8