Image transformation from fixed float to responsive?
-
-
- BrettD
- Jr. Rocketeer
- Posts: 32
- Thanks: 3
-
I am converting an embarrassingly outdated Joomla/RT theme, active production website to a new RT Gantry 5 theme. I have not decided which one yet, although I have tried a few. Any suggestions as a start? The site is OttawaJazzScene.ca, a music news site. I am not looking for a dramatic layout change as a first step, except to remove the left column (menu to the top, or on button menu on mobile) to make better use of the space.
Currently, many articles contain embedded images throughout, either floating to the right as per this example, or to the left:
<img class="caption" style="margin: 0px 0px 0px 20px; float: right; border: 1px solid black;" title="some text" src="images/photos/somephoto.jpg" alt="some text" width="500" height="328" />
The border does vary (none/1) and bottom margin may vary in different image placements.
The maximum image size throughout the site is almost always 500px, which in non-phone browsers allows text to flow left or right. However, sometimes the images are smaller (mixed sizes in one article) but are always of the same format (tiny mce) as above.
I believe the best migration approach is to dump the articles table, then apply a global edit on it to transform the image code above to something responsive, then reimport the table. I have already done this approach to cleanup some absolute URLs and mixed http/https URLs. Note: I've already migrated the site to J3.6/RT using SP Upgrade.I really just need to do something with the images now.
Does anyone have any suggestions on what I need to transform the above to for a new responsive image in the new G5 templates? And could I code this to keep the left/right flow when the image container (article body) is wide enough to allow that? Is that possible?
If I know what the general transformation should be I can code up a regular expression or some php code to run through the mysql table dump of the original tables and transform it, and then reimport.
Thoughts, anyone? Thanks!
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13481
- Web Designer/Developer
-
If you want an image to behave responsively then it must not be floated. Also, it's a bad idea in general to do any inline CSS styling in the html. As regards how to edit your articles - I would suggest that you consider using j2xml to export the articles as xml and then reimport after edit. I would suggest you consider adding a class to the img tag so that you can use CSS to do the styling of your images and remove all that inline styling.
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- BrettD
- Jr. Rocketeer
- Posts: 32
- Thanks: 3
-
Hi Mark, thanks for taking the time to reply.
Totally agreed about removing sucky inline styling as much as possible, as part of this exercise.
I should add that since my posting, I am likely using Ambrosia as my destination template; I have it installed and am trying it. I may move to something different later, but I have enough balls in the air right now, including an OS/php 7 upgrade. Ambrosia will be a good fit regardless.
If you looked at the site link, you'll see that for layout purposes, I do need to pull images left or right for layout purposes within the text, and ideally scale them in a general way smaller/larger (ratio/%). I'm not fully up to CSS3 by any means, but isn't there a way to specify that an image pulls to the left or right in its container (e.g. <p>) while still scaling within the available container (<p>), <div>) width?
back to reading... Any suggestions?
Brett
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13481
- Web Designer/Developer
-
You need to be using responsive grids - in this way it's the container that floats and varies in size and then the image or text can be constrained by that container size. Please see
http://docs.gantry.org/gantry5/advanced/responsive-content
.
Regards, Mark. -
The following users have thanked you: BrettD
- Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
Time to create page: 0.040 seconds